Avoid Long Main-thread Tasks

Before we dive into discussing the main thread tasks, we will briefly talk about the renderer process. Every time a page is loaded, the rendering engine, which varies by browser, initiates the renderer process. The renderer process is made up of different threads. Typically, there is the main thread (UI thread), I/O thread, and worker threads, but there can be more depending on what is required. The concept of multi-threading or multi-processing can vary depending on the browser as well. But they all work together to render the page and turn all the HTML, CSS, JavaScript into the visible and interactive elements you see on your screen or device.

Along with the Lighthouse message, the report also includes a breakdown of the time spent on the various elements, like script evaluation, stye and layout, parse HTML and CSS, and rendering. This can give web developers a high-level view on which specific areas can be optimized and which ones to prioritize. From here, there are several ways to minimize long main thread tasks, such as evaluating scripts (and third-party scripts), optimizing page layouts, minifying or deferring CSS, removing JavaScript, and much more. It really depends on the breakdown of elements in the Lighthouse report on which ones you should start optimizing, however, it is best practice to regularly review these elements to ensure that a user’s experience is not being held up or delayed by longer than normal main thread tasks.