Jon Fletcher 2020-08-31

Reduce script evaluation time in 4 steps

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. 

See the cost of parsing, here are the times it takes to parse and evaluate 1MB of decompressed  JavaScript on low and high-end hardware from the Google developer blog

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?

Fortunately, there are many ways to use Javascript with a fast-loading page and without sacrificing functionality. If we approach the page load from what our users really need first, we can set a more efficient order, prioritize certain assets, cut out dead weight and make savings in code weight and parsing — helping to 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.

Code splitting

The first few seconds of a users' experience is crucial. You need to make a good first impression to prevent them from bouncing. Consider what you need to make this first impression and the first impression rarely requires every JavaScript feature you have on the page. They want the headlines, images, and menus to load quickly and for their first click to work right away. 

This means that you can split your JavaScript bundle to only send the code needed for the initial route, using module bundlers like Webpack and dynamic imports to only fetch certain code snippets when requested by the user. 

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. 

Like compressing an image for a smaller file size but the same quality, tools like Terser, a JavaScript compression tool will create minified bundles. This leaves you with a smaller but perfectly valid and functional code file that will come with a reduced script evaluation time as less time is spent going over code that will remain unused. 

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

Latest Articles

‹ Back to Blog Home

Get the headlines

Sign up to get the best headlines direct to your inbox

Your name
Your email