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 @import it’ll take the web browser approximately 400ms to load both stylesheets. Here’s a typical child theme’s CSS:
/** * Theme Name: My Child Theme * Template: parent-theme */ @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:
// 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 our PageSpeed score :)
