How to find which element is your LCP
LCP — Largest Contentful Paint — is the moment the biggest thing on screen finishes loading. But Google picks that element for you, and it's often not the one you'd guess. Until you know which element it is, you're fixing blind.
Here's how to find it:
— Open Chrome DevTools (right-click, Inspect)
— Click the Performance tab, then the reload icon
— In the timeline, find the
— Click it — the matching element highlights on the page
Nine times out of ten it's a hero image, a headline, or a big background. Once you know, you know exactly what to speed up.
Try this: Run it on your homepage and your slowest blog post. Often they have different LCP elements, which means different fixes. This one's easier than it sounds.
LCP — Largest Contentful Paint — is the moment the biggest thing on screen finishes loading. But Google picks that element for you, and it's often not the one you'd guess. Until you know which element it is, you're fixing blind.
Here's how to find it:
— Open Chrome DevTools (right-click, Inspect)
— Click the Performance tab, then the reload icon
— In the timeline, find the
LCP marker— Click it — the matching element highlights on the page
Nine times out of ten it's a hero image, a headline, or a big background. Once you know, you know exactly what to speed up.
Try this: Run it on your homepage and your slowest blog post. Often they have different LCP elements, which means different fixes. This one's easier than it sounds.
Why INP replaced the old FID metric
INP — Interaction to Next Paint — measures how quickly your page visibly reacts when someone taps a button or types. It replaced an older metric called FID (First Input Delay) in March 2024.
The difference matters: FID only timed the very first click, and only the waiting part, not the response. INP watches every interaction across the whole visit and reports one of your worst. Think of FID as judging a waiter by how fast they greeted you — INP judges the whole meal.
What this means for you:
— A page could pass FID but fail INP, because problems show up later
— A slow dropdown, a laggy 'add to cart', a janky filter — all count now
— Good INP is 200 milliseconds or less
Try this: Click around your own site like an impatient user. Anything that feels sticky is your INP suspect.
INP — Interaction to Next Paint — measures how quickly your page visibly reacts when someone taps a button or types. It replaced an older metric called FID (First Input Delay) in March 2024.
The difference matters: FID only timed the very first click, and only the waiting part, not the response. INP watches every interaction across the whole visit and reports one of your worst. Think of FID as judging a waiter by how fast they greeted you — INP judges the whole meal.
What this means for you:
— A page could pass FID but fail INP, because problems show up later
— A slow dropdown, a laggy 'add to cart', a janky filter — all count now
— Good INP is 200 milliseconds or less
Try this: Click around your own site like an impatient user. Anything that feels sticky is your INP suspect.
The simplest fix for layout shift: reserve the space
CLS — Cumulative Layout Shift — measures how much your page jumps around while loading. You've felt it: you go to tap a link, an ad loads above it, and the whole page lurches down. Annoying, and Google counts it against you.
The root cause is almost always an element that loads without the browser knowing its size in advance. The fix is to tell the browser the size upfront so it leaves a parking spot.
How to do it:
— On every image, set
— For ads and embeds, wrap them in a box with a fixed
— For web fonts, add
Think of it like saving a seat with your coat — nothing slides in unexpectedly.
Try this: Pick your top image and add its real width and height. One line, instantly less jump.
CLS — Cumulative Layout Shift — measures how much your page jumps around while loading. You've felt it: you go to tap a link, an ad loads above it, and the whole page lurches down. Annoying, and Google counts it against you.
The root cause is almost always an element that loads without the browser knowing its size in advance. The fix is to tell the browser the size upfront so it leaves a parking spot.
How to do it:
— On every image, set
width and height attributes— For ads and embeds, wrap them in a box with a fixed
min-height— For web fonts, add
font-display: optional so text doesn't reflowThink of it like saving a seat with your coat — nothing slides in unexpectedly.
Try this: Pick your top image and add its real width and height. One line, instantly less jump.
One to follow
For schema / structured data done right, @SchemaWire is the move. The newsroom for structured data: which schema types Google just started (or…
For schema / structured data done right, @SchemaWire is the move. The newsroom for structured data: which schema types Google just started (or…
Why PageSpeed Insights sometimes shows 'no field data'
You run PageSpeed Insights, expecting real-visitor numbers, and instead see a grey note saying field data isn't available. New page? Low-traffic page? This is normal, and here's what's happening.
Field data comes from real Chrome users, and Google needs enough of them to report a number without exposing individuals. A quiet page simply doesn't have the crowd.
What to do instead:
— Scroll down and use the lab data section — it always works
— Check the Origin Summary — it pools data across your whole site, which often has enough visitors
— Be patient — once traffic grows, field data appears on its own
Think of it like reviews: a brand-new restaurant has none yet, but the chain it belongs to has plenty.
Try this: Toggle to your origin-level scores to get a real-world read while the single page warms up.
You run PageSpeed Insights, expecting real-visitor numbers, and instead see a grey note saying field data isn't available. New page? Low-traffic page? This is normal, and here's what's happening.
Field data comes from real Chrome users, and Google needs enough of them to report a number without exposing individuals. A quiet page simply doesn't have the crowd.
What to do instead:
— Scroll down and use the lab data section — it always works
— Check the Origin Summary — it pools data across your whole site, which often has enough visitors
— Be patient — once traffic grows, field data appears on its own
Think of it like reviews: a brand-new restaurant has none yet, but the chain it belongs to has plenty.
Try this: Toggle to your origin-level scores to get a real-world read while the single page warms up.
Speed up LCP by preloading your hero image
If your biggest visible element — your LCP, Largest Contentful Paint — is a hero image, the browser often discovers it late, because it has to read your CSS first to even know the image exists. That delay shows up directly in your score.
You can hand the browser a treasure map so it fetches the image immediately.
How to do it:
— In your page
— For responsive images, add
— Only preload your one LCP image — preloading everything backfires
Think of it like texting a friend 'grab the big suitcase first' before they even reach the car.
Try this: Preload just your homepage hero, retest, and watch LCP drop. Don't preload more than one — that's the rookie trap.
If your biggest visible element — your LCP, Largest Contentful Paint — is a hero image, the browser often discovers it late, because it has to read your CSS first to even know the image exists. That delay shows up directly in your score.
You can hand the browser a treasure map so it fetches the image immediately.
How to do it:
— In your page
<head>, add: <link rel="preload" as="image" href="hero.jpg">— For responsive images, add
imagesrcset so it grabs the right size— Only preload your one LCP image — preloading everything backfires
Think of it like texting a friend 'grab the big suitcase first' before they even reach the car.
Try this: Preload just your homepage hero, retest, and watch LCP drop. Don't preload more than one — that's the rookie trap.
What 'render-blocking resources' actually means
PageSpeed loves flagging 'render-blocking resources', and it sounds scary. It's gentler than it looks once you picture it.
When a browser builds your page, it pauses everything until it has loaded certain files it considers essential — mainly CSS files and some scripts in your
Think of it like a recipe that says 'do not start cooking until you've read all 40 pages of the cookbook' — even the parts you don't need yet.
How to ease it:
— Add
— Move non-essential CSS out of the critical path
— Inline the tiny bit of CSS needed for the top of the page
Try this: Add
PageSpeed loves flagging 'render-blocking resources', and it sounds scary. It's gentler than it looks once you picture it.
When a browser builds your page, it pauses everything until it has loaded certain files it considers essential — mainly CSS files and some scripts in your
<head>. Until those arrive, visitors stare at a blank screen. Those files are 'blocking the render'.Think of it like a recipe that says 'do not start cooking until you've read all 40 pages of the cookbook' — even the parts you don't need yet.
How to ease it:
— Add
defer to scripts so they wait politely until the page is built— Move non-essential CSS out of the critical path
— Inline the tiny bit of CSS needed for the top of the page
Try this: Add
defer to one analytics or widget script and retest. Safe, quick, and you'll see the blank-screen time shrink.The one image change that helps Core Web Vitals most
If you do a single thing for performance this week, switch your images to a modern format. Old JPEGs and PNGs are heavy, and heavy images are usually the thing dragging down LCP — Largest Contentful Paint, your biggest visible element.
Modern formats squeeze the same picture into far fewer bytes:
— WebP is typically 25 to 35 percent smaller than JPEG
— AVIF can be 50 percent smaller, with the same visible quality
Think of it like vacuum-packing a sweater — same sweater, half the suitcase.
How to start:
— Export your hero and top images as WebP (every modern tool supports it)
— Use a
— Compress at quality 80 — eyes can't tell, but bytes can
Try this: Convert just your three heaviest images and recheck. This one's easier than it sounds, and the payoff is immediate.
If you do a single thing for performance this week, switch your images to a modern format. Old JPEGs and PNGs are heavy, and heavy images are usually the thing dragging down LCP — Largest Contentful Paint, your biggest visible element.
Modern formats squeeze the same picture into far fewer bytes:
— WebP is typically 25 to 35 percent smaller than JPEG
— AVIF can be 50 percent smaller, with the same visible quality
Think of it like vacuum-packing a sweater — same sweater, half the suitcase.
How to start:
— Export your hero and top images as WebP (every modern tool supports it)
— Use a
<picture> tag to offer AVIF, then WebP, then a JPEG fallback— Compress at quality 80 — eyes can't tell, but bytes can
Try this: Convert just your three heaviest images and recheck. This one's easier than it sounds, and the payoff is immediate.
Why your buttons feel laggy: long tasks
If clicks on your site feel a half-second late, the usual culprit is a 'long task' — a chunk of JavaScript that hogs the browser's single work line for more than 50 milliseconds. While it runs, your tap just waits in line. That delay is exactly what INP (Interaction to Next Paint) measures.
Think of the browser as a one-lane checkout: if a customer ahead has a giant cart, everyone behind waits, no matter how small their basket.
How to spot and ease them:
— In DevTools Performance tab, record an interaction — long tasks show as red-flagged bars
— Break big scripts into smaller pieces so the browser can pause between them
— Delay non-urgent work (analytics, tracking) until after the page is interactive
Try this: Record yourself clicking your main menu, find the longest red bar, and ask what it's doing. Naming the hog is half the fix.
If clicks on your site feel a half-second late, the usual culprit is a 'long task' — a chunk of JavaScript that hogs the browser's single work line for more than 50 milliseconds. While it runs, your tap just waits in line. That delay is exactly what INP (Interaction to Next Paint) measures.
Think of the browser as a one-lane checkout: if a customer ahead has a giant cart, everyone behind waits, no matter how small their basket.
How to spot and ease them:
— In DevTools Performance tab, record an interaction — long tasks show as red-flagged bars
— Break big scripts into smaller pieces so the browser can pause between them
— Delay non-urgent work (analytics, tracking) until after the page is interactive
Try this: Record yourself clicking your main menu, find the longest red bar, and ask what it's doing. Naming the hog is half the fix.
Break LCP into 3 parts to fix it faster
When LCP — Largest Contentful Paint — is slow, 'make the page faster' is too vague to act on. The trick the pros use is to split LCP into three stretches and find which one is fat.
The three parts of every LCP:
— Time to first byte — how long your server takes to answer
— Load delay + load time — how long before the image starts and finishes downloading
— Render delay — the gap between the image arriving and it actually appearing
Think of it like mailing a package: time to pack it, time in transit, time to unwrap it. You can't speed delivery if the real holdup is unwrapping.
How to see the split:
— PageSpeed Insights now shows this breakdown right under your LCP score
Try this: Find your biggest slice first. If it's first byte, that's a hosting fix; if it's load, that's an image fix.
When LCP — Largest Contentful Paint — is slow, 'make the page faster' is too vague to act on. The trick the pros use is to split LCP into three stretches and find which one is fat.
The three parts of every LCP:
— Time to first byte — how long your server takes to answer
— Load delay + load time — how long before the image starts and finishes downloading
— Render delay — the gap between the image arriving and it actually appearing
Think of it like mailing a package: time to pack it, time in transit, time to unwrap it. You can't speed delivery if the real holdup is unwrapping.
How to see the split:
— PageSpeed Insights now shows this breakdown right under your LCP score
Try this: Find your biggest slice first. If it's first byte, that's a hosting fix; if it's load, that's an image fix.
The sneaky layout shift caused by web fonts
Here's a CLS — Cumulative Layout Shift — cause people miss for months: custom fonts. Your page loads with a backup system font, then your real font arrives and swaps in. If the two fonts are different widths, every line of text reflows and the layout jumps. Google counts that jump.
Think of it like trying on two jackets that are 'the same size' but fit completely differently.
How to tame it:
— Add
— Better: use
— Best for stability:
Try this: Pick your body font and add a matching system fallback like
Here's a CLS — Cumulative Layout Shift — cause people miss for months: custom fonts. Your page loads with a backup system font, then your real font arrives and swaps in. If the two fonts are different widths, every line of text reflows and the layout jumps. Google counts that jump.
Think of it like trying on two jackets that are 'the same size' but fit completely differently.
How to tame it:
— Add
font-display: swap so text is readable immediately, then accept a tiny swap— Better: use
size-adjust in your @font-face to match the fallback's width to your real font— Best for stability:
font-display: optional — if the font is slow, the browser just keeps the fallback, zero shiftTry this: Pick your body font and add a matching system fallback like
Arial. Closer widths mean a smaller, calmer swap.Your '90 score' is not your Core Web Vitals
A lot of confusion comes from one screen. PageSpeed Insights shows a big number out of 100 — but that's the Lighthouse performance score, a lab estimate. It is not the same as passing Core Web Vitals.
The difference:
— The 0–100 score is a weighted blend of lab tests on a simulated phone
— Core Web Vitals is the green/amber/red pass at the top, from real visitors
— Google ranking uses the real-visitor pass, not the 100-point score
Think of the score as a practice-exam grade and the vitals as your actual licence test — related, but only one is on your record.
What to do:
— Aim to pass all three vitals (green) first
— Treat the 100-point score as a to-do list, not the goal
Try this: Look only at the colored vitals badges at the top. If they're green, you're in good shape even if the number isn't 100.
A lot of confusion comes from one screen. PageSpeed Insights shows a big number out of 100 — but that's the Lighthouse performance score, a lab estimate. It is not the same as passing Core Web Vitals.
The difference:
— The 0–100 score is a weighted blend of lab tests on a simulated phone
— Core Web Vitals is the green/amber/red pass at the top, from real visitors
— Google ranking uses the real-visitor pass, not the 100-point score
Think of the score as a practice-exam grade and the vitals as your actual licence test — related, but only one is on your record.
What to do:
— Aim to pass all three vitals (green) first
— Treat the 100-point score as a to-do list, not the goal
Try this: Look only at the colored vitals badges at the top. If they're green, you're in good shape even if the number isn't 100.