“Reduce unused JavaScript resources” is one of the most common recommendations on PageSpeed Insights . Especially when your LCP is too high! If it is part of your recommendations, you are in the right place. In addition to your images, it is often your JavaScript files that weigh down the weight of your pages. Since 2013, the median weight of these has increased fourfold on mobile, according to HTTP Archive . Moreover, it is the second largest type of content in terms of size:
And, since their advent, Javascript frameworks mainly intended to improve the Developer Experience have increased the importance of JS ( as shown in this graph ) , and therefore the impact on page performance . But that was without taking into account their impact on page weight and loading times !
So, instead of improving the UX, these Javascript files can degrade it and lengthen loading times: if they are not loaded correctly, the more these scripts are numerous, the more the rendering of your page can be blocked . For example, for each JS script declared as synchronous in the page, the browser stops loading the page until the end of the download and execution of these files!
In any case, even if your scripts are loaded in a non-blocking way, they must be executed at some point. And the more JS you have, the longer this execution takes . And since the browser can only do one thing at a time, during this time, your user navigates less well: the page “freezes” or, it no longer reacts at all…
Not only is this problematic for your users, but it is also reflected in your Lighthouse and Page Speed Insights results: your TBT will be higher. And at the level of the Core Web Vitals found in the CrUX, it is your FID / INP that will be degraded this time.
To avoid this, check out the recommendations in this article to optimize the display of your JS and improve the performance of your pages.
How JS can slow down your pages?
You know it: all the resources integrated into the page take time to be analyzed and then loaded . So if they are not necessary, they degrade your performance for no reason . So that’s time and weight that you can save on your loading times!
And while JavaScript can add interactivity and make your site more enjoyable for your users… If it loads too early , has a lot of files , is on another domain, or takes a long time to load , your user experience will be degraded.
As a reminder, every time you want to display a page, this is what happens:
- the browser parses the HTML code to build the DOM ;
- when encountering a JavaScript (JS) file, the construction of the DOM is interrupted,
- The parser retrieves the script, executes it, and then continues its analysis of the HTML code.
Indeed, the browser displays the elements of a page according to their order in the HTML file. The location of your Javascript has a direct impact on the rendering of the page , the loading speed and also on the user experience. To load the JS, the browser must load the script, parse it, and then execute it. We explained this process in an article dedicated to loading JS .
The direct impact: the rendering of the page is blocked and your user will have to wait to see the content that was supposed to be displayed! JavaScript therefore has a direct impact on loading speed.
These blocking JavaScript files for your browser
Before you jump into optimizing your unused JavaScripts, let’s take a look at those rendering-blocking JSs.
SYNCHRONOUS JAVASCRIPT
With the <sync> attribute, JavaScript execution is blocking . The moment the browser detects a sync script in the HTML page it is analyzing, it must suspend the construction of the DOM. Then, it downloads the script, lets the JavaScript execute, before finishing the construction of the DOM. We often see this method applied to A/B testing scripts, thus ensuring that the flickering effect is avoided.
THE LIMIT OF ASYNCHRONOUS JS
Contrary to what you might think, JavaScripts declared in <async> can also be responsible for rendering blocking . Even if they do not interrupt the loading of the HTML code (they are downloaded in parallel), they can become blocking, because once downloaded, the browser executes them directly.
And this is one of the limitations of asynchronous JS: the analysis of the code is stopped , as well as the other scripts that were to be executed, and the rendering of the page as well.
Since the browser executes the JS once downloaded, it no longer follows the order of the code. And the more async scripts there are, the more likely you are to block your main thread and have a longer Time to interactive !
Using asynchronous JavaScript (too) frequently can therefore degrade your UX. Like all unused resources on your site, they are disabling for all users who navigate in bad conditions .
For more information, check out our article on the risks of using asynchronous JS all the time . Now let’s move on to the methods and techniques you can use to reduce your unused JS files.
How to Reduce Unused JavaScript Files
Start by identifying all unused Javascripts
Using the Coverage tool in Chrome DevTools, you can first analyze file by file which ones have the most unused code and then display for each file all the unused lines of code (CSS and JavaScript). The ones that are used are displayed in green, the ones that are not used are displayed in red.
By using Puppeteer’s Coverage class , you can automate the process of detecting (and extracting) unused lines of code . In the example below, lines 55-57 are used and 65-67 are unused. So they should be removed.
Equip yourself with a build tool to remove unused lines of code
Build tools are essential assets that you should equip yourself with to clean up your code in general. Regarding scripts, check out Tooling.Report to test and find the right tool for your case, your environment, your habits, but we can cite several classes of tools:
- If you have many dependencies , use Code Splitting to group your libraries or modules into shared packages. This will reduce loading time and save storage space.
- Reduce your file size based on network and browser constraints rather than application structure with Unused Code Elimination . You will also be able to remove unused lines of code.
- Eliminate unused lines of code or modules with Unused Imported Code , whether they are in the code or imported by other modules.
Use recommendations specific to your stack
Third category of advice to lighten your code and reduce your unused JavaScripts: do something specific according to your stack, for example:
- With Angular, include ” source maps ” in the production build of an Angular CLI application in order to inspect bundles . The Source Maps technique is also valid regardless of the stack used.
- Drupal: Remove all unused JS elements and use only the Drupal libraries that are necessary for the page (or part of the page). To go further, help yourself with the Drupal libraries .
- Joomla: Consider reducing or changing the number of Joomla extensions that load scripts on your page.
- If you are using Magento, consider disabling embedded Javascript .
- React: If you are not using server-side rendering, split the number of your javascript files used with React.lazy() . Alternatively, you can also split your code with a third-party library like loadable-components
- With Vue, and especially the Vue router, if you are not using server-side rendering, split your bundled scripts by lazyloading certain paths.
- On WordPress, reduce or change the number of plugins that load unused javascripts on your page.
Run scripts later with Smart JS
Finally, there are solutions to prioritize your most relevant scripts and display them only when needed . If they are not essential for the rendering of the page and can be executed after it is loaded, it is better to prioritize them for later.
This is how our Smart JS works. It is particularly useful for your scripts that have an impact on interactivity. This feature acts as an orchestrator that prioritizes what is really useful for the first display . Of course, if the async and defer attributes are used, the Smart JS takes them into account.
This feature will perfectly meet your need to clean up your code and prioritize your JS files. Also, if your PageSpeed score is heavily impacted by these files, don’t hesitate to clean up, delete unused resources and clean up your code. Loading times will be reduced and your users will thank you for it!
As with your images (or CSS files), Javascripts (whether first party or third party) are there to improve the user experience. However, they can also degrade this experience if they take time to load or are too heavy (because they are too numerous and poorly ordered). Thus, following this PageSpeed Insights recommendation can be effective at first . But you will have to repeat the operation on each of your pages and check the entire code of your site.
To avoid this, nothing is better than automation ! By choosing our engine, you will be able to intelligently implement the recommendations adapted to your case, offer the best possible UX to your users and ensure your revenues.
