Core Web Vitals are the three metrics Google uses to quantify the experience of loading a page: Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. They replaced a pile of vaguer “page speed” signals with something measurable from real users in the field, and because they feed into search ranking, they are worth understanding properly rather than chasing a green score in a lab tool.
Largest Contentful Paint measures when the biggest element above the fold finishes rendering, usually a hero image or a headline. Anything under 2.5 seconds is considered good. The usual culprits behind a slow LCP are an unoptimised hero image, render-blocking CSS, and a slow server response, in roughly that order.
The Three Metrics in Practice
Interaction to Next Paint looks at how quickly the page responds when a user taps or clicks. It is dominated by long JavaScript tasks blocking the main thread, which is why trimming third-party scripts often helps more than any image work. Cumulative Layout Shift, meanwhile, punishes content that jumps around as the page loads, the classic example being an image without width and height attributes pushing text down once it arrives.
The practical takeaway is that these three metrics pull in different directions and you cannot optimise them with a single switch. Lazy-loading images helps LCP and bandwidth but can hurt CLS if dimensions are missing. Deferring scripts helps INP but can delay interactivity if done carelessly. Measure with field data, change one thing at a time, and re-measure.
Leave a Reply