Table of Contents
To deal with this you have to find out which plugins or features on your site are loading the unused code. Fortunately, PageSpeed does this for you.
After doing that, run the PageSpeed test for a page on your site.
Mouse over any filename to reveal the full URL so you can see if it’s loaded by your theme or a plugin.
Files that are completely unused.
Check the Potential Savings (the amount of unused code) compared to the Transfer Size (the overall size of the file) . If they are the same it means the entire file is unused and you can remove it from the page (see below).
Parts of files that are unused.
If the savings is less than the transfer size it means part of the file is being used but not all of it. This is common on WordPress sites. For example, your theme may load a JS file which contains code for both a slider and a video player. If you only use the slider on a page, the code for the video player is unused and unnecessary to load.
But unless you are a developer custom-coding every part of your site, you won’t truly be able to fix this. There aren’t any automated solutions for site owners (yet), but the shortcut solution below will help you.
- Audit your site’s features and remove anything you don’t really need.
Removal is the best optimization 🙂.
That means auditing the list of files PageSpeed gave you and deciding if you really need that feature or plugin on your site. You have to weigh the value it brings to your visitors or your business, against the negative performance impact it’s having.
- Remove unused files with Asset CleanUp or Perfmatters
While it’s bad practice for plugin developers to load all of their files on every page of your site, even if not used, it happens – Contact Form 7 is an example of a plugin that does this. In such cases, plugins like Asset CleanUp and Perfmatters are very helpful. You can use either of these plugins to prevent entire files loading on pages where they are not needed at all.
I personally use the pro version of Asset CleanUp because it has an additional feature where you can target files specifically to be removed on mobile but not desktop (or vice versa). This is helpful when you’re creating custom mobile pages.
For any page on your site you can choose to prevent specific files from loading, and you can set global conditions to, for example, prevent them loading on all posts, or other specific content types. This will have additional benefits such as reducing the overall page size.
- Developers – Create modular code that loads only when needed
You can use WP Rocket , WP Meteor or Flying Scripts for this.
This shouldn’t be a problem in most cases. Usually people will try and scroll immediately, or their mouse is already over the screen, so they won’t notice anything.
Now you have to make a choice if you want to exclude those elements and damage your PageSpeed score in the process.
Flying Scripts is a free plugin. It works in the opposite way to WP Rocket. Whereas WP Rocket delays everything, and you only exclude what you don’t want delayed, with Flying Scripts you have to tell it what to delay. So this will require a bit more work from the user’s side to get the best performance.
- Compression with Brotli or GZIP
Optional: Rocket Loader from Cloudflare