Passing Core Web Vitals in a React app: what moves LCP

Google's Core Web Vitals are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Each of these metrics has a good score: LCP should be 2.5 seconds or less, INP should be 200 milliseconds or less, and CLS should be 0.1 or less. These metrics are measured using real visits at the 75th percentile, so results from a fast laptop on office wifi are not reliable.

Testing should be done with mobile emulation and a throttled connection. To improve LCP, first identify the largest contentful element that appears on the page, which is usually a hero image or headline. The question then becomes what needs to download and run before that element can appear. Code splitting sends a screen only when it is opened, which can significantly improve LCP and Time to Interactive (TTI).

This method can be applied route by route, and heavy pieces inside a route can also be split. Preloading only what the first screen needs is also important, as preloading too many files can delay the crucial files. Removing preloads for unused files can improve Lighthouse mobile scores and reduce simulated LCP. Keeping interactions cheap is another way to improve INP.

Memoization and virtualization can help with this. Memoization stops components and calculations from repeating when their inputs have not changed, while virtualization keeps long lists and tables down to the rows that are on screen. Layout shift, which results in CLS, can be minimized by reserving space upfront for content that arrives without reserved space, such as images, embeds, late banners, or fonts that swap to a different width.