Improve Lighthouse Score
Hi, I am looking to optimize my Next.js website for lighthouse but I am really struggling to bring my Total Blocking Time (TBT) or main thread execution time to go down.
I know lighthouse score isn't everything and the website feels fine in everyday use, but I am trying to do everything possible to improve SEO from a technical standpoint
It's a very basic website build with App Router and shadcn and built with SSG
Any tips or resources will be very useful
Thanks
Link to the pagespeed analysis: https://pagespeed.web.dev/analysis/https-mybiodata-app/1eprq6rw6p?form_factor=desktop
Solution:Jump to solution
Hydration itself was taking a lot of time, moved some components to be lazy loaded for a small initial gain. Found out about lazy-hydration, using this library https://www.npmjs.com/package/react-lazy-hydration
was able to bring down TBT to ~200ms from > 1s...
npm
react-lazy-hydration
Lazy Hydration for Server Rendered React Components. Latest version: 0.1.0, last published: 4 years ago. Start using react-lazy-hydration in your project by running
npm i react-lazy-hydration. There are 4 other projects in the npm registry using react-lazy-hydration.2 Replies
My Current Lighthouse score (0 in TBT) 😢
Solution
Hydration itself was taking a lot of time, moved some components to be lazy loaded for a small initial gain. Found out about lazy-hydration, using this library https://www.npmjs.com/package/react-lazy-hydration
was able to bring down TBT to ~200ms from > 1s
npm
react-lazy-hydration
Lazy Hydration for Server Rendered React Components. Latest version: 0.1.0, last published: 4 years ago. Start using react-lazy-hydration in your project by running
npm i react-lazy-hydration. There are 4 other projects in the npm registry using react-lazy-hydration.