Breakdown

How to minimize Main Thread Work

Speed performance

How to minimize Main Thread Work

In order for users visiting your site to interact with it, the browser implements a rendering process that produces a web page from input code instructions (HTML, CSS and JavaScript).

How does this rendering process work?

Its main thread usually works with the major part of the code: indeed, it checks the HTML code to build the DOM; it analyzes the CSS to apply the styles; it defines and executes the JavaScript code.

It processes user events as well: it can happen that your website does not react to the interactions of the user because the main thread is working on something else. This imply of course a bad user experience.

 

How the SeoChecker Main Thread work audit fails

If during the page loading its main thread is occupied for more than 4 seconds, SeoChecker displays an error.

breakdown

 

Thanks to this table, SeoChecker is able to show you where the CPU spent its time waiting for the browser to load the page.

 

How can I minimize the Main Thread work?

Here is a list of tips divided by sections.

Style and layout

  • do not use layout thrashing and complex/large layouts;
  • make style calculation easier and diminish the scope.

CSS

  • postpone non-critical CSS;
  • extract critical CSS;
  • minify CSS.

Memory usage

  • using measureMemory() you can check the total memory usage of your web page.

Rendering

  • organize layer count and stick to compositor only properties;
  • cut paint areas and make easier paint complexity.

Script compilation and evaluation

  • if there is unused code, remove it;
  • split the code reduce JavaScript payloads;
  • debounce input handlers;
  • use web workers;
  • optimize third-party JavaScript.

Share this Guide

Did you like it? Share it!

Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page