Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Lighthouse audit: Script evaluation vs Script Parsing

While running the lighthouse audit in chrome developer tools, I received the following report for javascript execution. I Found out that the main.js is taking a lot of time in Script Evaluation (455 ms) as compared to Script Parse (5 ms). But I am unable to figure out what is this Script Evaluation time? Is it the time taken to download the script? How can I reduce it?

Script Evaluation vs Script Parse

like image 902
Let me see Avatar asked Nov 15 '19 18:11

Let me see


1 Answers

According the following Lighthouse reference https://web.dev/bootup-time/, there are four main costs to execute any JS file:

  • Network cost
  • Parse and compile cost: JavaScript gets parsed and compiled on the main thread. When the main thread is busy, the page can't respond to user input.

  • Execution cost: JavaScript is also executed on the main thread. If your page runs a lot of code before it's really needed, that also delays your Time To Interactive, which is one of the key metrics related to how users perceive your page speed.

  • Memory cost

I believe the evaluation time in Lighthouse terminology is the time after parsing the script to load the whole file in memory. In other words you have to check the heavy file and try to optimize the code in the file itself. Here are some facts I learned from studying the same problem you are checking:

  • Script evaluation is the stage between parsing the script and executing the script which is mainly loading the code into memory.
  • Unused code will affect parsing time negatively but not evaluation and execution time.
  • Parsing time is increasing with script code size.
  • Script evaluation time is increasing with the increase of the amount of used code.
  • Lighthouse is flagging the script as blocking the main thread ONLY if it’s affecting the TTI. For example, if 10 MBs script file been added as a render blocking resource to any page without being used, Lighthouse will flag it as render blocking resource but not as blocking main thread issue.
  • Script evaluation is an indicator to how much code is needed to run the page.

The solution could be to split the file into two files, one is the critical file which should be loaded initially and the other one could be deferred to optimize the performance.

like image 143
Hazem Hagrass Avatar answered Oct 05 '22 23:10

Hazem Hagrass