When you start the process of trying to make your website faster, one of the first places you will probably start is Google's Lighthouse test.
After all, if you want more traffic from Google, what better strategy than to follow their recommendations for optimizing your page performance? Unfortunately, the reality is rarely so pleasingly simple.
Once you see your score, you have to dig through the detail and technical breakdowns to find the hidden corners where your problems lie. One of the most common culprits, a blocker of the main thread and unseen anchor, dragging you down is script evaluation.
Here you can see that this page spent nearly 7 whole seconds on script evaluation— a time that can surely be reduced.
It is by far the biggest time cost that is blocking the main thread. The cost of parsing and evaluating the scripts also depends heavily on the device and CPU.
This can significantly impact how quickly a user can fully interact with this site so it's crucial to cut this time down to give every user a high-speed experience.
In this blog post, we are going to cover what script evaluation entails and how you can reduce script evaluation time, for faster pages and higher Lighthouse scores.
What is script evaluation?
Modern browsers use compilers, optimizations, and tricks to help your page execute as fast as possible, but this can substantially change the dynamics of the code. Meaning, the simple scripts you have on the page can be very different once executed compared to how you write them.
As well as the weight of the page in terms of file sizes to be downloaded, each script we use is going to have an evaluation cost associated with it. Script evaluation is an indicator of how much code is needed to run the page. Effectively, script evaluation is the stage between parsing the script and executing the script.
The problem is that this script evaluation time can block the main thread hurting your user experience and your scores in page performance measurement tools such as Lighthouse. Also, these Scripts often get parsed and compiled on the main thread.
How can I reduce script evaluation time?
Reduce script evaluation time:
Only send the code that your users need by implementing code splitting.
Minify and compress your code.
Remove unused code.
Reduce network trips by caching your code with the PRPL pattern.
By only delivering the scripts that need to be parsed and compiled, it can result in smaller script evaluations and faster page load times.
Minify and compress
A lot of the scripts you are running on your page will contain redundancies, whitespace, and things that don't add any functionality, but that have to be evaluated. Minification removes any of this fat around the edges.
Compression is then basically an algorithmic process that looks for patterns and repetitions in files to find shorter routes, fewer duplicates, and ultimately, smaller ways to deliver files.
Remove any unused code
If you're going to all the effort to defer and minify your code to cut down on script evaluation time, it's also a good idea to find and destroy any code that you're not actually using.
To hunt down this unused code, you need to analyze your bundles. Open Devtools, click Network, tick the box to disable cache, and reload the page.
You will then see all the code used to run your page — and how much of it is going unused.
A bundle analyzer such as Webpack will help you find out what each bundle is for and what they are made up of.
If you are unable to break down a library into the parts you are using and selectively imported, it's possible that there is a lighter alternative that does the same function or your devs could build a custom solution. If so, heavy, mostly unused libraries can be removed entirely.
Cut down on network trips
One of the most effective ways to cut down on the network transfer cost. Sending files back and forth that could be cached Use long-term caching to avoid having to re-fetch resources that haven't changed. HTTP caching will ensure browsers can figure out the ideal lifetimes for scripts to prevent the network from having to transfer unchanged bytes.
With these four techniques, you can reduce your script evaluation time dramatically. This will prevent blocking the main thread, slowing the loading time, and help to reduce your time to interactive.
Reducing script evaluation time is a major link to better user experiences, better mobile performance, and better SEO as Google takes performance more seriously.
To learn how Marfeel provides an ultra-light mobile framework for your site, click here to and get a call back from our team