google-chrome-devtoolslighthouseweb-performance

High Lighthouse Total Blocking Time despite no long task

According to Google document the main criteria for the Google Chrome Lighthouse tool to calculate the Total Blocking Time (TBT) is long task.

From my understanding, a Long task is any JavaScript that executes longer than 50 ms anything longer than that will add up to the TBT.

After I finish profiling my web application there is 1 long task 90 ms long. Which means I should have 40 ms of TBT.

But after I ran the lighthouse 3 times I got around 1300 ms of TBT on average

How is TBT is actually calculated? Why is my TBT higher than expected?

enter image description here

enter image description here

Solution

  • It doesn't look like you have any CPU throttling enabled for your performance trace, otherwise there would be a warning icon next to the Performance tab.

    With throttling:

    enter image description here

    Without:

    enter image description here

    However, by default Lighthouse runs with CPU throttling enabled:

    Lighthouse applies CPU throttling to emulate a mid-tier mobile device even when run on far more powerful desktop hardware.

    By default, Lighthouse uses a constant 4x CPU multiplier which moves a typical run in the high-end desktop bracket somewhere into the mid-tier mobile bracket.

    As the amount (or lack) of CPU throttling can have a dramatic impact on performance, especially TBT, you should set your manual performance traces to use a 4x CPU slowdown for consistency.

    enter image description here

    You can also confirm the exact CPU throttling settings for a given Lighthouse test by hovering over the config at the bottom of the report.