With Page Experience (notably Core Web Vitals, for the purposes of this discussion) being taken into account by Google’s algorithms for ranking, it is important to make sure that you are doing everything you can to provide a good user experience, including reducing page load times and other page experience metrics such as Time to Interactive.
Important – Before You Remove Any Code
Always back up and test thoroughly before deploying any code changes.
Start with a Plugin Audit
An easy place to start looking for unnecessary code is in plugins and extensions.
While plugins can be useful for content management and other rich site features, they do often load unnecessary code across pages of your entire site. Take the very popular Contact Form 7, for example. It loads code on every single post and page of your WordPress site, regardless of whether or not those pages contain a contact form.
Use Plugins Judiciously
Take time to review all of the plugins and extensions that are being used on your site. Evaluate whether a plugin is absolutely required. If you are using a plugin for a single specific feature, try searching for another plugin that does just that. You’ll be surprised at how many lightweight add-ons out there provide straightforward, simple solutions without any extra features. Always use the official repositories for any CMS:
Alternatively, consider working with a developer to help you consolidate and incorporate specific features into your site’s architecture/CMS without a plugin. For example, Google Tag Manager and Google Analytics can be installed into your site template with some simple code. Yet there are entire plugins designed to help make the code implementation easier, often with additional, unnecessary code attached to them.
A good time to review your plugins is after a site launch. Plugins will often be installed for debugging or importing/exporting purposes, and may be fine to remove once the updated site is live. You may also find that there are plugins you use, but only occasionally, so consider deactivating those until you really need them to be active.
It is important to note that you cannot remove unused code from resources that are not hosted by your domain. However, with resources that you do host, you should be able to optimize.
How to Use Chrome DevTools to Find Unused Code
When you visit a URL, the Coverage tab will tell you how much code was used, versus how much was loaded, from any given resource.
To open Chrome DevTools, press Ctrl + Shift + I or click the right mouse button and choose Inspect.
To see it yourself:
- Open Chrome Developers Tools (press Ctrl + Shift + I or click the right mouse button and choose Inspect.)
- Next, click the settings icon > More tools > Coverage
- After that, click the Reload button (the circle arrow icon).
- Click any resource to see the used and unused code.
Each line of code is color-coded to help you identify used and unused code:
- Solid green means that line of code is executed.
- Solid red means it did not execute.
How To Use The Coverage Tab
Here’s how we used it to identify the resources that contained the most unused code to help us prioritize which to address first.
In the screenshot above you can see many CSS resources containing almost entirely unused styles. One of the items listed above is a Font Awesome CSS file. Within the DevTools Coverage tab we can drill down even further to see specifically which code/styles are unused.
The site in question used five icons in total. But the CSS file loaded thousands of icon styles on every single page and post.
Right away we know that we could specifically extract the icon styles the site needed and load only those instead. This required updating all of the file paths pointing to the current file with a path to the new, much smaller file we made.
Consider an Automated Service
As with almost any automated service, take caution. Be sure to back up your site, and test thoroughly on a staging environment. Here are a few automated services to consider:
Use a Plugin
I know that this seems like a hypocritical recommendation, but if you’re looking for a more cost-effective solution than an automated service, you might consider using a plugin. Ideally, the page load time you’ll be saving by removing unneeded resources will more than make up for the load represented by the additional plugin.
Perfmatters Script Manager springs to mind as an option for WordPress. It allows you to disable entire plugins, queries, and inline CSS/JS – even external scripts if they are enqueued properly in WordPress. Not to mention, the plugin also allows you to add exceptions based on whether a user is logged in or logged out.
Bundle Resources and Deliver Them Efficiently
While removing unnecessary plugins and unused code will help overall, bundling and delivering only the resources a given page needs can also make a significant impact.
With bundling, you will reduce the number and size of network requests, alleviating the amount of work processed on the main thread.
Once you have a good understanding of which resources are required for specific page types you can bundle them together and deliver them accordingly.
What is Minification?
Most hosting services provide minification services, but if you wanted to get a little more hands on experience, here are some recommendations you could explore:
- To minify HTML, try HTMLMinifier.
- To minify CSS, try CSSNano and csso.
Google’s own PageSpeed Module also integrates with an Apache or nginx web server to automatically optimize a whole site for performance, including resource minification.
Take Your Time
Of all the aspects to performance optimization, cleaning up and removing unused code is one that can have a noticeable effect. If done well your pages will run efficiently, and will undoubtedly provide a pleasant experience for your users – which is important to Google, and more importantly your bottom line.
Just remember to take your time and test thoroughly before pushing anything live. If you have additional recommendations for a plugin, resource or service. Do let us know in the comments, we’d love to hear about it!