Search code examples
reactjscore-web-vitals

React SSR with innerHTML and LCP impact?

I'm rendering a page using React 16 SSR and lazy loading the JavaScript bundle to improve performance. This reduced our initial JavaScript bundle size. This is possible by setting the innerHTML using React's Fallback and Suspense. Does this impact LCP time?

Solution

  • As of Chrome 88 (see the LCP changelog), techniques like this shouldn't impact LCP because LCP will now consider elements that were removed from the DOM (previously a removed element couldn't be the LCP candidate).

    This was actually done in part to address the exact use case you're describing, where JavaScript frameworks that do SSR will replace (rather than update) the DOM.

    If you do see cases where using SSR still reports LCP post-hydration, it could be a bug and I'd recommend reporting it at crbug.com.