Performance Tips: Inline that CSS and Stop Loading Small Stylesheets

I like to use the page speed grading tool GT Metrix because among many other things, it gives us long lists of short things we can do to improve our client’s website speed. This post will cover one of the intermediate level tasks web developers can do to help reduce the amount of assets that is required for a webpage to be rendered correctly. One of the great values of WordPress is the ease and speed of adding new functionality to a website. Often times these plugins carry along small amounts of css in css stylesheets. On our GT Metrix report, this item shows up as the recommendation to Inline small CSS.

When we look at this list, we can see that 2 of those css files are included via plugins. The file “/wp-content/themes/dt-the7/style.css?ver=2.1.5” is the WordPress theme’s main stylesheet, and is required to make the theme load correctly.  Regarding the other two plugin stylesheets, we’re going to open up those stylesheets, copy their rules into our theme’s stylesheet, and deactivate them from being loaded. These particular plugins have 2 different ways to resolve this matter.

If your plugin already provides a “disable stylesheet” in it’s settings and backend options:

Luckily for us, this particular plugin, Name Your Price, provides an option to turn off adding it’s stylesheets from the plugin settings. Besides already knowing that there this option exists, it’s inferred in the codebase

/**
 * Load a little stylesheet
 *
 * @return void
 * @since 1.0
 */
public function nyp_style(){
  if ( get_option( 'woocommerce_nyp_disable_css', 'no' ) == 'no' )
    wp_enqueue_style( 'woocommerce-nyp', WC_Name_Your_Price()->plugin_url() . '/assets/css/name-your-price.css', false, WC_Name_Your_Price()->version );
}

That function is written so that if the “disable stylesheets” checkbox returns yes, as in, “please disable” the enqueue won’t process.

Backend settings option to disable stylesheet

We may not need these small styles anyway, so we’ll test a page in which these styles would be loaded. I can compare our development site’s display to the production site’s display at https://florabowley.com/product/gift-certificate/, and see that everything looks fine so we won’t bother adding the plugin’s styles to our theme’s files.

If you need to disable asset loading in a more manual fashion:

For the plugin WooCommerce Extended Coupon Features PRO, we’ll have to use a method called “de-registering enqueued scripts” to remove it’s stylesheet, since this plugin doesn’t even have it’s own settings page. This is a straightforward process most of the time, but as Justin Tadlock says :

Not all plugins use the appropriate methods for loading scripts and styles. Some developers just drop stuff right in the header. This is usually because they’re not familiar with two important WordPress functions: wp_enqueue_script() and wp_enqueue_style(). If your plugin/theme author isn’t using these functions, please encourage them to do so. It allows the rest of us to work with their code using the methods WordPress provides.

While figuring out what scripts or styles you want to disable, you might have to get your hands dirty. This means looking in code. Unless your plugin author has documented the script or style handle, you’ll need to find it.

So I’ll do a search in the plugin’s folder for the string “wjecf.css“. and I find it in the file plugins/woocommerce-auto-added-coupons-pro/includes/wjecf-pro-controller.php starting on line 142:

/**
 * Include stylesheet
 */
public function wp_enqueue_scripts() {
  wp_enqueue_style( 'wjecf-style', plugins_url('assets/wjecf.css', dirname( __FILE__ ) ), array() ); 
}

What we’re looking for in that bit of code is the “handle”, which is the first part of that array on line 5. Here’s the format that should follow, as taken from the WordPress codex on the subject:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Another easier way to find this is through using the development utility plugin Asset Queue Manager. This tool allows you to monitor, dequeue and requeue scripts and styles that are enqueued on your site. Once the plugin is activated, browse to any page on the front of your site. An Assets link will appear on the top right of the admin bar. Click that to view and manage all assets, as seen in the following screenshot.

Note: The plugin gives you the ability to quickly disable scripts and stylesheets through it, but I believe this should only be done for testing purposes. A good rule of WP web development is to never rely on a plugin for functionality you can easily add to a master custom plugin, or to your child theme. Websites that contain less plugins are easier to manage over the long run.

Now that we know that our handle is called “wjecf-style“, we’re ready to write our new function in our theme’s function.php file.

/* De-Registering small stylesheets from plugins to speed up the site */
add_action( 'wp_print_styles', 'flora_deregister_styles', 100 );
function flora_deregister_styles() {
  wp_deregister_style( 'wjecf-style' );
}

Clear your browser and server caches to test that the site looks good. Run your analysis tests again to confirm that the number of assets has diminished. We’re good!

note, wp_dequeue_style is to remove a CSS file that was enqueued with wp_enqueue_style(). When you find a stylesheet has been registered with wp_register_style(), use wp_deregister_style to unhook it.