Avoid Long Main-thread Tasks

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

How to Avoid Long Main-thread Tasks

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.

lighthouse

Lighthouse

Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.

pagespeed

PageSpeed Terms

PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

yslow

YSlow

YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.