Identifying the Cause of Poor TBT Performance
Eugene
I have a React and Next.js project, and I’m facing an issue. During PageSpeed tests, the TBT for the mobile version falls within the yellow zone.
I’ve already improved the FCP, LCP, Speed Index, and CLS metrics — all of which are now in the green zone. The overall PageSpeed score for mobile devices across 10 tests is 91 points. But the problem with TBT remains. And I want to fix it.
What I've already done:
- I switched the site to static generation.
- I eliminated all unnecessary libraries from the project.
- I manually analyzed the minified code of all the files. I found unnecessary code there. I made changes that allowed me to get rid of unnecessary code
The current size of all js code for the mobile version of one page is about 160Kb. These 160Kb are divided between seven files.
What I tried to do, but it didn't help reduce the TBT score:
- I disabled all analytics on the site. This did not result in TBT being in the green zone.
- I tried adding content-visibility: auto. That didn't help either
Here’s the link to my site: https://pixelplex.io/custom-software-development/
Maybe you have some ideas on how to improve the TBT score for mobile devices?
Paul Irish
--
You received this message because you are subscribed to the Google Groups "web-vitals-feedback" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web-vitals-feed...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/b9634839-5934-480b-9375-c48e421d6fe4n%40googlegroups.com.
Michal Mocny
Absolutely! Let's break down the hydration changes in React 18 and their implications, especially in the context of Next.js.
React 17 + Next.js (pages/ dir): Full Hydration
- Process: The server rendered the entire React component tree as HTML. The client then downloaded and executed JavaScript to make the HTML interactive (attach event listeners, etc.). This process is known as "hydration".
- Drawback:
- Blocking Rendering: The page remained non-interactive until all JavaScript loaded and the entire tree was hydrated. This could be slow, especially for large applications.
- Wasted Effort: Even if a user never interacted with a specific part of the page, it still got hydrated.
React 18: Selective and Progressive Hydration
React 18 introduces two key hydration improvements:
- Selective Hydration: Only hydrates the parts of the page that the user is interacting with or about to interact with. This is achieved using
<Suspense>boundaries, which can be used to "lazily" load components (and their associated JavaScript) when they become visible or are about to become visible in the viewport. - Progressive Hydration: Allows hydration to start before all JavaScript is loaded, making parts of the page interactive sooner. This is also facilitated by
<Suspense>boundaries. React 18 can stream HTML, enabling it to display content and start hydrating components as they become available.
Next.js App Router (app/ dir): Automatic Hydration Optimization
- Next.js's new App Router in the
app/directory leverages these React 18 features to automatically optimize hydration:- Automatic Partial Hydration: By default, each route segment in your app becomes a hydration boundary. Only the components for the currently active route are hydrated.
- Streaming and Suspense: Next.js automatically streams HTML for faster initial rendering and uses
<Suspense>for components that load data asynchronously, allowing parts of the page to become interactive while others are still loading.
Impact on User Experience
The combination of React 18's hydration improvements and Next.js's App Router leads to:
- Faster Time to Interactive (TTI): Users can interact with parts of the page much sooner, even before all resources are fully loaded.
- Smoother Interactions: The app feels more responsive because interactions aren't blocked by hydration of unrelated components.
- Reduced JavaScript Execution: Only the necessary JavaScript is loaded and executed for the parts of the page the user is engaging with, saving resources.
React 17 + Next.js (pages/ dir) Workarounds
If you're stuck with the older pages/ directory, you can still get some hydration benefits manually:
- Code Splitting: Use dynamic imports (
import()) to split your code into smaller chunks. This allows parts of your app to load on demand, improving initial loading time. - Component Level Hydration: Libraries like
react-hydration-on-demandcan help you selectively hydrate individual components. However, it requires more manual setup and may not be as seamless as the automatic optimizations in Next.js's App Router.
Example (Code Splitting in pages/ dir)
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/MyComponent'), {
ssr: false, // Disable server-side rendering for this component
});
Important Note: While these workarounds can help, the best way to get the full benefits of React 18's hydration improvements is to upgrade to the latest versions and use the Next.js App Router if possible. It offers a much smoother and more automatic experience.
Let me know if you have any other questions!
To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/CAK-PPf2uKyc%2BsoxqYfCWTeFN%3DdG6iyq%3DDR7LVtpUdkbsWMB2ig%40mail.gmail.com.
Michal Mocny
(woops, the pasted result was cut off half way-- let me try again)