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.
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.