Why Unloading Assets? And what exactly is that?
Is the step that almost nobody in the WordPress optimization world is doing it, although is critical for core web vitals, good loading speed and best metrics.
Web pages are made up of numerous assets, such as CSS, JavaScript files, fonts, and images. When these assets load inefficiently, they can slow down your site. This negatively impacts user experience and SEO.
Now, we already handled the image optimization in the first guide (also the database optimization, another essential step). CSS/JS and fonts are a completely different business.
If you just go into minification, concatenation and other old-school actions, you’ll just end up with a bloated website anyway: JS and CSS code that is not used, bigger files due to concatenation, etc. By the way, some more effective and modern ways to use instead of concatenation is removing unused CSS and delaying JS loading. But this will be for another guide.
The whole point and reason for creating this guide is the fact that most of the plugins and themes load CSS and JS files on all pages of a website, although they are needed only on some pages. Even more crazy is that some plugins load assets on the website although those are used and needed only on the admin dashboard – this is the case of plugins that offer only functionality that is not shown/used on the website, and have only a settings page.
As a side note, at the end of the article you can find a video-tutorial for this guide.
First step: plugins audit and cleanup
So the easiest and most obvious step in optimizing asset loading is to remove the plugins that are not actually used. Deactivating the unused plugins will reduce the page requests, but we recommend deleting those plugins because they can result in a bloated database and can introduce security risks. So any plugin that is not used should be completely deleted.
Second step: selectively load the assets
Now this is a more time-consuming task and will involve a lot of trial and error. But we promise, it’s all worth it.
The way we recommend doing this is by installing Asset CleanUp: Page Speed Booster plugin, it’s free and it has 100k+ installations and a 5-star rating out of 1453 reviews (at this point in time).
After you install and activate it, go to its Settings page and you will find enough settings that could scare anyone who is not used to such a complex and complete plugin. But we will guide you through.
Down below you will find a gallery of screenshots with the settings that we recommend. This is for the Settings tab, a screenshot for each section. You will see the Test Mode enabled, which we recommend because this process can break some functionalities or the layout, so with test mode the users will see the unaffected website, while the administrators will see the optimized version. We recommend testing the website after each change (that’s why it’s a trial and error process and requires a lot of time) and if something is broken, revert the last change. After all the optimizations are finished and the website is completely functional, you can disable the test mode.
We do recommend reading the information about each setting and making sure that everything applies to your case too.
Now here comes the fun part: you’ll have to disable assets on each page basically. You can start by going to the CSS&JS Manager tab and you can start with the Homepage sub-tab. Here you will see all the assets loaded by plugins, theme, WP core, 3rd party, etc.
For each plugin or theme, you will find a list of assets that are being loaded. Your job is to figure out which assets are not needed, disable them, test the page, if everything is fine then keep going. We advise on starting with the CSS files because it’s easier, you’ll just have to test the layout after each file removal.
For each asset file, you can disable it on a per-page basis, for the entire website or for a certain post type.
When it comes to JS files, it’s more tricky because you can introduce bugs that are triggered only on specific actions, so you have to test everything that a user can do on a page. Also, JS files have dependencies.
As you can see in the above image, jquery has plenty of “children”, meaning JS files that depend on and require jquery to be loaded. By default, if you disable for example jquery, all its children will be disabled, otherwise there will be js errors in the browser. Obviously, jquery shouldn’t be disabled on any WP website. But in other cases, if you consider disabling a js file that has children, you have to make sure those children’s files can be also disabled without breaking anything, otherwise the main (parent) file shouldn’t be disabled.
So if you disable something site-wide, you should test the entire website and don’t forget about cart/checkout/account pages, if you have a WooCommerce store.
Unfortunately, we can’t give you a list of pre-defined assets to be unloaded since there are over 10.000 themes, over 50.000 plugins and each website has its own unique combination of them and combination of elements used in pages. So this will be your hard work and challenge to figure it out.
After you finish the homepage, we advise you to go on each page on the website, and edit it in admin, where you will see a settings section for the AssetCleanup. Fetch the assets and you will get a list similar to the previous one. Now you have to go again through the entire process.
We know this is the most difficult part of the optimization process, by far.
Nevertheless, we hope this is helpful if you are serious about optimizing your WP website.
For those of you who learn faster and understand easier through video-watching, we made a video tutorial as well: