{
  "id": 13412689,
  "title": "Passing Core Web Vitals in a React app: what moves LCP",
  "url": "https://urgent.news/2026/10/10/passing-core-web-vitals-in-a-react-app-what-moves-lcp",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-10T13:00:00.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/theadnansaleem/passing-core-web-vitals-in-a-react-app-what-moves-lcp-47f3"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "On Qatar's national event platforms I brought core pages to Core Web Vitals compliance through memoization, virtualization, lazy loading and code splitting, which improved LCP by about 35% and TTI by about 30%. On a payments platform, dynamic code splitting cut the initial bundle by about 35%. The method is the same every time, and it starts with measuring, not with optimizing. The three numbers…",
  "key_points": [
    "Largest Contentful Paint (LCP) should be 2.5 seconds or less",
    "Code splitting sends a screen only when it is opened",
    "Memoization and virtualization minimize layout shift (CLS)"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}