It's no wonder that reducing JavaScript execution time is crucial for improving your website’s Core Web Vitals.
By reducing or completely removing unused JavaScript, you can lower the execution time of the JavaScript files you actually need on your page. So, how can you ensure the JavaScript on your site executes as fast as possible? And why should you care?
Let's take a look!
What Is Unused JavaScript?
Unused JavaScript refers to irrelevant or deferrable JS code on your website. While that code isn't essential for user experience, the browser still prioritizes it when processing the page.
As a result, the essential elements of a website (think: above-the-fold content) are on standby until the render-blocking JavaScript takes its sweet time.
The culprits of slow JavaScript execution time often include:
- Third-party tracking code (like Google Analytics and Facebook Pixel)
- Slider images and carousels
- Animations and interactive elements
- Contact forms and social media sharing buttons (especially if they're attached to multiple pages on your site)
Of course, there's no need to remove those elements from your website. You just need to ensure there's no useless JavaScript clogging their code.
Why Should You Remove Unused JavaScript from Your Website?
Unused JavaScript Slows Down Your Page Load Time
When a browser opens a website, it loads the entire HTML from top to bottom. As it should, right?
However, if any JavaScript code pops up during that loading time, the browser will go "hold up!" and prioritize parsing, loading, and executing these codes. This will block the rendering of your webpage until the JavaScript is 100% executed.
If those scripts have code bloat, your page's loading time will be even slower.
It Hurts User Experience (UX)
The faster your website loads, the better the experience it will give your users. If your page struggles to render essential elements, users won't stay around for long.
It Damages Your SEO Efforts
The FID (First Input Delay) metric measures the time from the first user interaction with a page to when the browser starts processing the response. Website owners should strive for a FID of 100 milliseconds or less.
But here’s the kicker:
“In general, input delay happens because the browser's main thread is busy doing something else, so it can't (yet) respond to the user. One common reason this might happen is the browser is busy parsing and executing a large JavaScript file loaded by your app,” says Philip Walton, an engineer at Google.
Want a good FID score, so you get good SEO results? Chop off every bit of unused JavaScript.
How to Identify Unused JavaScript Files
Using PageSpeed Insights
PageSpeed Insights offers a detailed report on performance improvement suggestions. It’ll notify you of any unused JavaScript slowing down your website.
Here's how to identify potential JavaScript issues on PSI:
Go to PageSpeed Insights. After entering your website's URL in the textbox, click Analyze.
You'll see a complete analysis of your Core Web Vitals. Scroll down to see the Diagnosis section (it may take a little while to load).
If there are any JavaScript execution time issues, you’ll see a “Remove unused JavaScript” warning. Like the following:
???????
Next, expand the “Remove unused JavaScript” section to see the problematic scripts, their sources, and even estimated savings.
In the above example, removing unused JavaScript could reduce execution time by 8+ seconds.
Using Chrome DevTools
In DevTools, open the command menu by typing Control + Shift + P (Windows and Linux) or Command + Shift + P (Mac).
Next, type "coverage" in the text box and select Show Coverage.
Once you see the Coverage tab, click Reload.
Now, you should see the overall usage of CSS and JavaScript from each loaded file. Just like in the following example, where green indicates used code and red indicates unused code.
How to Reduce Useless JavaScript (For Good)
Remove the Excess Files
As long as your above-the-fold content doesn't require it and it doesn’t break any critical website functionality, you can remove the unnecessary code discovered in DevTools (as shown above).
Delay Loading JavaScript
By delaying JavaScript resources, you'll ensure that JS files will only load when (and if) they’re required during the user experience. Otherwise, the files won’t load, and your page speed won't suffer.
Plugins like Perfmatters can help you both delay and remove unused JavaScript.
Or, you can use functions such as setTimeout or setInterval to delay the execution of a particular piece of JavaScript code.
Defer JavaScript
Deferring JavaScript means loading and executing JavaScript files only after the HTML content loads. There's no need to wait around for the files to "do their thing.”
To defer the parsing of a JavaScript file, include the defer attribute in the <script> tag. For example:
<script src="script.js" defer></script>
Or, you can include the async attribute in the <script> tag. For example:
<script src="script.js" async></script>
Instead, you can also use plugins like Asset CleanUp: Page Speed Booster.
Use Code-Splitting
With code-splitting, you can break JavaScript code into smaller chunks. So, instead of loading all the code at once, the browser only loads the necessary code for a specific page. This enables more efficient page loading and a much better user experience.
You can use open-source frameworks like Rollup, Webpack, and Parcel to apply code splitting to your website.
Minify JavaScript Code
Developers add white space, hints, comments, and line breaks to their code for effective collaboration. Computers, however, can execute JavaScript files just fine without those elements.
Minifying removes any extras, resulting in lighter code that executes much faster.
You can remove unnecessary characters manually, or you can use plugins like Fast Velocity Minify to get the job done. Alternatively, you can also use Cloudflare's auto-minify functionalities.
More Quick Tips to Reduce Unused JavaScript
- Go easy on the plugins, especially those you haven't updated in a while. With outdated code, JavaScript execution time will be the least of your problems. I'm talking about potential vulnerabilities and hacking attempts.
- Prefer static images over sliders and carousels (especially above the fold). Sliders are fantastic, but you shouldn't use them at the expense of your page speed.
- Don't overuse social widgets and third-party tracking resources.
Overall, steer clear of JavaScript-based functionalities that could take a toll on execution time. And, in case they're unavoidable, do your best to lighten the JS load on your pages.
The Essentials Come First
By reducing unused JavaScript, you won't be compromising your website's functionality or interactivity. As a result, you’ll get a higher page speed, better UX, and greener Core Web Vitals.
Use the above tips as a guide to chop off redundant JavaScript code – or at least tell it to wait for its turn.
