Skip to content

Next.js 16 increases TBT (Total Blocking Time) #86383

@thernstig

Description

@thernstig

Link to the code that reproduces this issue

https://github.com/vercel/next-learn/tree/main/dashboard/starter-example

To Reproduce

I have a hard time saying how to reproduce this as I have a private website I cannot share, and reproducing this with a repro would be cumbersome. Hence the link to the Next.js tutorial. The page is fairly simple all-in-all with no custom client side JavaScript ('use client).

Current vs. Expected behavior

https://pagespeed.web.dev/ (Desktop) shows an increase in TBT after updating from Next.js 15 to Next.js and using cacheComponents: true where the page tested is using full static rendering during build time. Total TBT is 3,1 second on a fairly simple page.

This should be the culprit. This seems abnormally high for most of these

### ⚠️ Minimize main-thread work — 3.1s

Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this.

| Category                       | Time Used |
|--------------------------------|-----------|
| Script Evaluation              | 2,176 ms  |
| Other                          | 344 ms    |
| Garbage Collection             | 291 ms    |
| Style & Layout                 | 197 ms    |
| Script Parsing & Compilation   | 74 ms     |
| Rendering                      | 42 ms     |
| Parse HTML & CSS               | 13 ms     |

Provide environment information

This is from my local dev, although the results are seen on a live website. So Platform etc. is not relevant.

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Tue Nov 5 00:21:55 UTC 2024
  Available memory (MB): 31662
  Available CPU cores: 32
Binaries:
  Node: 24.11.0
  npm: 11.6.1
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.3 // Latest available version is detected (16.0.3).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Performance

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    PerformanceAnything with regards to Next.js performance.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions