Using Child Themes in WordPress is a great way to modify an existing theme, however, the CSS @import directive is slower than it has to be, so you should try and avoid it. Here’s why.
If it takes 200ms to load the child theme’s stylesheet, and 200ms to load the parent-theme’s CSS, a modern web browser should take approximately 200ms to load both of them, because modern browsers load assets in parallel.
Unfortunately, this is not true for CSS.@import Let me quote Google:
The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.
Which means that instead of 200ms, with it @import’ll take the web browser approximately 400ms to load both style sheets. Here’s a typical child theme’s CSS:
/* Theme Name: My Child Theme Theme URI: http://example.com/child-theme/ Description: Child Theme Author: John Doe Author URI: http://example.com Template: parent-theme Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ @import url(../parent-theme/style.css); /* My Child Theme CSS */
We can drop the @import statement, and make good use of functions.php and the wp_enqueue_style() function:
<?php // Opening PHP tag - nothing should be before this, not even whitespace
// Faster than @import
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}
And we don’t need to re-declare dependencies because the child theme’s functions.php is loaded before the parent theme’s. Unless, of course, the parent theme uses a different action priority, in which case we should just match it.
That’s +1 to the PageSpeed score 🙂
Going even further, since we are already using function.php can put as many or as few functions as you wish.
Here are some simple yet interesting things you can do with adding few lines to code to your function.php file;
Adds a favicon link to the head element of HTML pages.
// Custom Function to Include favicon
function favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "n";
}
add_action( 'wp_head', 'favicon_link' );
Hope this helps.