How to Avoid CSS @Import in any WordPress Child Theme

0

Avoid CSS @Import :

Learn how to avoid CSS @import in any WordPress child theme to increase your page speed. If your WordPress website getting avoid the CSS import suggestion in Google’s page speed, Pingdom, Yahoo’s yslow,  Gtmetrix and webpagetest.org, here’s the solution to get 100% result on avoiding CSS @import.

It doesn’t matter, whether you are using twenty eleven, twenty thirteen, twenty fourteen or twenty fifteen WordPress theme. This trick will work with any WordPress child theme. By default your WordPress child theme CSS looks like below, it’s typical and with @import option, the web browser takes 500 ms(slow) to load a page, instead of 200 ms(fast).

/*
Theme Name: 2015 Child Theme
Theme URI: mygenesisthemes.com
Description: My own Twenty Fifteen Child Theme
Author: Syed Bavajan
Template: twentyfifteen
*/

@import url('../twentyfifteen/style.css');

The solution to avoid CSS import into WordPress:

Add the following wp_enqueue_style() code to your WordPress child theme’s functions.php file and remove @import url(‘../twentyfifteen/style.css’); from your child theme CSS file.

// avoid @ CSS import WordPress
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

After adding this code, check out your WordPress speed in Google’s Page Speed Insights, Yahoo’s Yslow, Pingdom and any other tool. If you face any problem still, let me know.

Leave A Reply

Your email address will not be published.