Minimize Main-thread Work

Earlier in this guide we discussed some tips on how to avoid long main-thread tasks. The main thread is what handles most of the processing. Its purpose is to parse the HTML to build the DOM, analyze the CSS and apply the styles, as well as execute JavaScript. So, the main thread has a lot going on during the initial phase as the page is loading. As a user, you may also experience that brief amount of time when a page will not respond to any input or action. That is because the main thread also handles user events. The performance threshold within Lighthouse is four seconds. Any main thread task that lasts longer than that will prompt the “Minimize main-thread work” message. The longer the main thread takes to process, the longer it takes for the page to become interactive, or time to interactive, or TTI.

The main-thread is made up of different components, so each one should be optimized independently of the other. Scripts are typically the first item that should be reviewed as the browser will take the most time on these scripts. Optimizations like deferring, or lazy loading, any non-essential or third-party scripts can help offload that from the main-thread work so the page can begin rendering. Additionally, we already talked about JavaScript, CSS, and HTML minification and compression, but these can also be implemented to optimize files even further. Other performance-enhancing techniques include using web workers, which can help assist with moving JavaScript off the main-thread and processing it separately to offer a more balanced approach. The goal of minimizing the main-thread work is to process the most critical aspects of your page as quickly as possible so the user is not left waiting.