We'll guide you through the process of recognizing the root causes of lengthy JavaScript execution times and how to mend their negative impact on website's performance by employing various different techniques like deferring non-critical JavaScript and optimizing file sizes.
- The blog post explains that prolonged JavaScript execution time warnings from PageSpeed Insights are often due to network and memory costs, or JavaScript blocking the main thread.
- PageSpeed Insights, utilizing Lighthouse, helps identify JavaScript files that contribute to long execution times and flags issues when execution exceeds 2-3.5 seconds.
- Solutions to improve execution speed include deferring or delaying unnecessary JavaScript files, and using module bundlers to split code for lazy loading.
- The post emphasizes the importance of PageSpeed Insights as a tool for developers to optimize website performance by addressing JavaScript execution issues.
Are you getting a warning about reducing JavaScript execution time in the PageSpeed Insights and aren’t quite sure where to begin?
In this post, we’re going to talk about probable causes, how to diagnose which are the top contributing files, and how to fix this issue.
One of the most obvious is the network cost, which refers to the size of resources the browser needs to download, which in turn also slows down the overall page load time and can contribute to enormous network payloads.
Another not so obvious, but still important cause you should be aware of is the memory cost of your resources. Furthermore, if JavaScript holds a lot of references, it might also consume a lot of memory, which can cause your website to appear slow. Or even worse, if there are occurrences of memory leaks, it can cause your page to freeze up completely.
One of the more common reasons why you’re getting this warning is that your website is loading and executing JavaScript on the main thread, effectively blocking the content from rendering until it finishes. This blocking behaviour directly impacts Core Web Vitals metrics.
You can also have large JavaScript files, which may take some time to execute, which can delay the time to interactive (TTI). Moreover, TTI is a metric that is related to how users perceive page speed and affects Interaction to Next Paint (INP).
How to find top contributing files to long JavaScript execution time
This is where PageSpeed Insights comes to the rescue. Furthermore, it uses the Lighthouse tool that helps identify the biggest contributors of execution time.
But you already know this since you got the warning about this issue there. However, what you might not be aware of is that it will show a warning if the JavaScript execution time takes longer than 2 seconds and fails if it takes more than 3.5 seconds.
It also reports the time spent executing, evaluating and parsing each JavaScript file the page loads, which gives us the opportunity to completely root out this issue by addressing each reported file separately. You can measure rendering time using Chrome Dev Tools for more detailed analysis.
How to improve JavaScript execution speed
Simplest solution to this issue is to defer or delay the JavaScript files that aren’t necessary for rendering the page. You should also minify JavaScript files to reduce their execution time. You can do this by adding the defer attribute to the script tags. Furthermore, what this will actually do is load the JavaScript files in parallel and execute them after the page finishes parsing.
This way you have all the content rendered while the JavaScript files execute in the background, making your website appear faster.
Meanwhile delaying the JavaScript execution means that the files will be loaded in parallel like with defer, but it will execute only after the user interacts with the webpage.
Another, more fine-tuned solution to this problem is to split the code into multiple files. Furthermore, popular module bundlers like Webpack, Parcel, and Rollup allow you to split your bundles by using dynamic imports.
Essentially, you can create modules that will be lazy loaded or provided only when they’re needed. This way you can reduce a big part of unused Javascript code, making those files that are necessary on initial load more lightweight. Similarly, you can remove unused CSS to reduce overall resource processing time.
Conclusion
To conclude, we described what the actual issue is when the PageSpeed Insights tool gives us a warning about JavaScript execution time and how to address it. Furthermore, PageSpeed Insights is one of those tools that are indispensable to every web developer, allowing us to improve upon our websites on various different fronts. Optimizing JavaScript execution is a key part of why you should speed up your site for better user experience and search rrankings.
