Lighthouse: Avoid long main-thread tasks
Overview
Events like HTML/CSS parsing, JavaScript parsing/execution, among others, are "tasks" that run on the main-thread (by default).
When any one of these tasks run for longer than 50 ms (also known as a "long task"), they can delay, both First Contentful Paint, and the time it takes for your page to become fully interactive.
Ensure that you avoid long main-thread tasks, as much as possible, to deliver a good page experience to your visitors.
How does your site score on this audit?
How do long main-thread tasks affect page performance?
Every time your page loads, the browser uses the main-thread to handle most of the tasks related to rendering your page content, as well as, deal with user interaction.
Long main-thread tasks prevent the browser from dealing with other processes that are essential in loading your page.
For example, a long-running JavaScript file will stop the browser from processing any other task until it has been parsed and executed.
Decreasing the number of long main-thread tasks improves your overall page performance by minimizing main-thread work.
What this means for your visitors is, they may see content faster on your page and can interact with it sooner.
Click here to learn more about minimizing main-thread work.
How does GTmetrix trigger this audit?
This audit is highly correlated with your Total Blocking Time (TBT) and Time to Interactive (TTI) metrics.
Clicking this audit reveals which main-thread tasks ran for longer than 50 ms.
Note: GTmetrix lists all the long-tasks on your page; however, not all of them are considered for TBT calculation because of Lighthouse's methodology:
- A long-task is only considered "blocking" if its duration exceeds 50 ms, with the duration beyond 50 ms being considered the individual blocking time.
- For TBT calculation, Lighthouse only considers blocking time of long-tasks after FCP and before TTI.
- The aggregate of individual blocking times between FCP and TTI should be equal to the page's TBT.
How to avoid long main-thread tasks
This audit lists all the long tasks that are running on the main-thread. Ensure that you incorporate good practices into your development workflow to minimize the main-thread work in the interest of web performance.
Read our minimize main-thread work documentation to learn more.
For WordPress (and other CMS) users
If you're using a CMS (like WordPress), there are many plugins you can utilize to implement some of the best practices that would help in minimizing main-thread work.
For example, WordPress users can use WP Rocket to defer, minimize, and remove CSS/JavaScript.
Refer to our WordPress optimization guide to learn more.
Note: This is an expert-level optimization
Only experienced developers are advised to improve this audit.