javascriptreactjsperformanceservice-workerlighthouse

Why is TBT on PSI so different from my local machine?

When I test the performance of my SSR SPA on localhost, I get a low TBT (total blocking time) enter image description here

When I use PSI (pagespeed insights) to test the performance of the site, I get a very high TBT

enter image description here

Why is the TBT so different on PSI? How can I analyse this?

Update: Profiling the React application using the React dev tools shows there was a component that took 36ms to render.

Throttling on PSI caused the task to cross the 50ms threshold and count towards the TBT.

So all the tasks that took close to 50ms were being swallowed on my local machine and counted towards the TBT on PSI.

Solution

  • Lighthouse on mobile does a 4x slow down to try to simulate a slower device (as mobiles often). If you have a really fast computer, then that will still be faster than slowing down a slow computer.

    You can see the starting Unthrottled CPU/Memory Power by clicking on the emulation icon:

    Screenshot showing PSI used a machine that scores 458 unthrottled

    Here's the exact same thing on my high-end MacBook:

    Screenshot showing PSI used a machine that scores 2590 unthrottled

    So that's the first thing to check.

    As well as slowing thing down more, this may impact TBT in particular. TBT measures all tasks over 50ms, so you may have 36ms tasks for example, that cross this threshold, and TBT can jump even if other metrics only slow down a little.

    And you're right that service workers or other local caching can also cause a difference. And sometimes Lighthouse in DevTools will warn about that if it spots somethign that might impact the audit:

    Warning message saying "There may be stored data affecting loading performance in this location: IndexedDB. Audit this page in an incognito window to prevent those resources from affecting your scores."

    But all sorts of things can impact it - caching, extensions, other stuff going on on the machine, whether you've accepted cookies or not... etc. Personally I prefer to use PSI where possible (e.g. for production sites) as generally they are more stable, reliable results because of this. But for local development that's not possible so it's more important to measure a before and after of the same site, than to look for absolute numbers.

    Lighthouse is intended to be a high-level audit of potential performance problems. Not an absolute measure of how your site will perform—that's impossible to know without knowing the devices your suers will use. That's why the field data (at the top of PageSpeed Insights( is a better measure, and Lighthouse is a better auditing tool, which also shows some of the same metrics so you can calibrate the two.