How to load an alternative, lighter version of a file?

  • gabe
  • Misc

Note: This post is meant for developers or for users that are comfortable editing code and have minimum knowledge of PHP/WordPress coding.

There are often situations when CSS/JS files are enqueued in WordPress, but on certain pages, only a fraction of their code is actually used. For instance, you might be using a theme that has a main CSS file (default is style.css) that is very large, let’s say 800 KB. On the homepage, one of the key pages you want to optimize, only 40 KB of that CSS syntax is actually needed. That’s only 5%. The browser downloads the other 95% that is not used and it would add up to the total page size, the page will not be rendered for the visitor until all the render-blocking files are downloaded (including the main theme style we just mentioned which is very large), thus adding up to the first contentful paint and a lower Google PageSpeed Insights score.

In an ideal scenario, only the CSS that is needed should be loaded, but this is not that simple. The easiest way (though often not effective) is to have one large CSS file that has all the CSS that is needed and although it would take a long time to load the first time, it would technically be in the caching of the browser and the other pages will load faster. But this applies only for the next visits, not the first time, and if you have a landing page (e.g. a campaign that sends the visitors there), the user experience would be affected for new visitors that do not have such a high-speed internet connection.

Asset CleanUp has a filter hook that allows you to specify a different URL and version (“ver”) for a certain CSS/JS file. This is usually recommended for developers or users who really know what they are doing. If you’re not comfortable editing that file and strip out useless code, then it’s recommended to leave it as it is, as any mistakes could lead to breaking of the functionality for the page you want to have optimized.

If you decide to go ahead with this, here’s how to do it, assuming the targeted file is the main theme’s CSS one, the theme’s name is “DIVI” and the targeted page is the homepage:

1) First, locate the CSS file that is loaded by the theme, in our example, the handle name is “divi-style“, just like in the print screen below:

2) Edit functions.php from your child theme (e.g. “/wp-content/themes/divi-child/”) if you have one or create a custom plugin and activate it having the following code: 
// Load a smaller DIVI CSS File
$wpacuCssHandle = 'divi-style';
add_filter('wpacu_'.$wpacuCssHandle.'_css_handle_data', function($handleData) {
    // Only load it on the homepage
	if (is_front_page()) {
		$handleData['src'] = get_stylesheet_directory_uri() . '/purified-css/divi-style-homepage.css';
		$handleData['ver'] = 1;
	}
	return $handleData;
});
Note the “purified-css” directory which is in the root of the child theme’s directory and the “divi-style-homepage.css” that you need to create and place there which will have the new contents (same contents of the original file, minus some or all the code that is not used). In case you decide to go for a custom plugin (e.g. you can’t just use a child theme for various reasons), then you have to replace “get_stylesheet_directory_uri()” with something like “plugin_dir_url(__FILE__)“, basically, making sure the URL to the plugin directory is the right one.

3) Once you make sure everything is in place (the new file uploaded and its URL set correctly for the ‘src’ value), just reload the page and the new file will load. Also, the row where the handle is located (in the CSS & JS manager list), will also be updated with the new source, letting you know that the filter was added successfully, like in the print screen below:

If you click on the filter icon, it will reveal to you extra information about the filter hook that was used and the location of the original source, which is in this case “/wp-content/themes/Divi/style.css“.
If you want to apply the same thing for a JavaScript file, then the code would be the same as in the example that was shown, obviously, the filter hook would have “js” in its title like this: ‘wpacu_’.$wpacuJsHandle.’_js_handle_data’ ($wpacuJsHandle would be the variable defined having the JS handle there).

Important: Chasing every byte of the CSS that is unused can be time-consuming and a task difficult to manage. Even if you strip 50% of the unused CSS, not the whole 95%, is still very good as it would save hundreds of KB from the total page size. Yes, it’s tempting to go for the whole unused one as Google Coverage reports it, but note that even this wonderful tool Coverage does not show all the unused code correctly because it can not anticipate the visitor’s movements on the site. The tool reports the CSS that is needed without any interaction such as hovering, clicking on various buttons that could load extra content that needs CSS (that was marked as unused, but suddenly it’s needed to be used after the user did certain actions). The same goes for @font-face or various animations. To be on the safe side, you can leave some extra CSS there, especially if you’re not sure about whether stripping it or not, just in case, as your page will still load very fast.

Was this post helpful?