Cleaning up unused CSS and JS files from WordPress pages

WordPress can be a great option for easy website development, but because of the rapid evolution of the CMS, it can lead to inefficient code and slow loading pages. We'll show you how to clean up unused CSS and JS from pages to improve site-wide performance. 

WordPress has the reputation of being a “mature” software platform. Since it was released in 2003, it has grown to dominate the content management system (CMS) market, with more than 62 percent of CMS-driven sites running on WordPress.

A lot of things have changed since then. WordPress was born into a world with no popular smartphones, tablets, or countless other technologies that are part of millions of people’s lives today. WordPress has kept up with this rapid evolution by embracing an open development ecosystem in which third parties build and market a wide range of plugins and customizations, allowing end-users to create appealing and complex websites with a few clicks. At current count, there are about 60,000 plugins available in the WordPress plugin directory, as well as about 12,000 free themes.

However, this approach has forced WordPress to throttle real innovation to its core platform. To maintain a stable CMS where third-party plugins and themes don’t constantly conflict with the core, WordPress had to stop truly evolving several years ago – the WordPress UI, workflow, and core system haven’t changed much in the past nine years. And developers are encouraged to focus more on new tools than upgrading the existing ones.

Is WordPress “mature,” or just messy and slow? A little of both

So, most web developers now consider WordPress to be a “mature” platform. Some might say “stagnant.” But in any case, WordPress’s reliance on plugins comes with some benefits and, of course, several drawbacks. One of the most notable downsides is that WordPress core is not effectively optimized for fast page load, which degrades user experience and page rank in most search engines.

It’s no secret that WordPress sites are usually slower than websites built with new CMS technologies, like Ibexa DXP, and many others. A quick Google search will turn up a laundry list of tips on how to speed up your WordPress sites. This advice ranges from spending a little more on hosting to minifying on-page code.

But one piece of advice you’ll seldom get is to simply remove CSS and JavaScript where it’s not needed. This tactic requires a little more technical know-how than just running a minifying utility, but it can make a huge difference in WordPress performance – particularly since superfluous CSS and JS are some of the most problematic byproducts of relying on third-party plugins to drive new functionality.

Here’s an example: If you install a plugin to manage your Contact Us page form, all the styles and JavaScript code required for the contact form will be available on all WordPress pages, even though the form is on only one site page. Escalate this problem over 10, 20, or 30 different plugins, managing small features on different parts of the site, and you can see how all that code can drag down site performance.

CSS and JS clean-up improvements in the performance tests 

Instead of compressing and merging all these CSS and JS files, you can simply remove them from your pages and add them directly when required. Consider the following numbers:

Web Page Performance Test | 4G Speed Connection

Removing the non-used CSS and JS code from the page reduced the number of requests and page weight by about 50%. That resulted in a faster download time for all the required files on the page and a better availability to the user. Client browsers don’t need to process so many lines of code that don’t generate any positive impact on the page.

How to remove unused assets from WordPress pages

A simple function triggered by the script_loader_tag hook in function.php can handle the task of fully removing unnecessary JS. Consider the following code:

/**
 * This function removes js libraries from the homepage
 * Use the remove_from_front_page array to remove JS libraries
 * from the homepage
 * See: https://developer.wordpress.org/reference/hooks/script_loader_tag/
 *
 * @param $tag
 * @param $handle
 * @return array|mixed|string|string[]
 */
function remove_js_from_the_homepage( $tag, $handle ) {
 
// list of handles to remove from the front page
$remove_from_front_page = array(
'anythingslider-frontend-bundle',
'divi-breadcrumbs-module-frontend-bundle',
'divi-extension-frontend-bundle',
'divi-accessibility-da11y',
'contac-us-form-pro',
'social-media-share-bar',
);
 
// Do not remove when user is logged in
if ( is_user_logged_in() ) {
return $tag;
}
 
// Remove scripts from the front page
if(is_front_page()){
if (in_array($handle, $remove_from_front_page)){
return '<!-- JS script ' . $handle . ' removed by remove_js_from_the_homepage -->';
}
}
 
return $tag;
 
}
add_filter( 'script_loader_tag', 'remove_js_from_the_homepage', 10, 2 );
 

The code injects all the plugins when the user is logged in. That is not required, though.

Then, it checks if the handle is in the predefined array with the list of all JS libraries that should be removed from the homepage. If it is, the homepage and the handle exist on the $remove_from_front_page array, which our team creates after carefully analyzing the page. The script comments the JS tag, so you can still see the reference on the page, but the JS library will not be loaded.

You can use a similar function with the style_loader_tag hook to remove CSS files from your pages. Moreover, you can use other WordPress filters like is_category, page id or slug to determine the JS files you want to remove from other types of pages. The possibilities are endless and can be easily customized to your needs.

Conclusion

Removing unused JS and CSS code from your pages will not only increase your site performance but also make it more robust. You will avoid possible JavaScript conflicts and some style overrides that may create a poor user experience.

If you want to offer a better experience to your users on your WordPress website, having a professional team capable of optimizing and implementing custom solutions for your business is a valuable option. What to offer the best impression of your WordPress site to your clients? Contact us today!