Core Web Vitals: LCP FID CLS
Understand what Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift measure and why Google uses them as ranking signals.
Core Web Vitals: LCP FID CLS is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Performance Matters
Slow pages lose users. Google made performance a ranking signal: sites with poor Core Web Vitals scores rank lower in search results. Beyond SEO, every 100ms of delay measurably reduces conversion and engagement.
The Three Core Web Vitals
Google measures three user-experience metrics: LCP (loading speed), FID (interactivity), and CLS (visual stability). Each has 'Good', 'Needs Improvement', and 'Poor' thresholds.
Largest Contentful Paint (LCP)
LCP measures when the largest visible content element (image, video poster, or text block) finishes rendering. Good: under 2.5s. Poor: over 4s. Optimise by preloading hero images, reducing render-blocking resources, and using a fast CDN.
First Input Delay (FID) and INP
FID measures the delay between a user's first interaction (click, tap) and the browser responding. Good: under 100ms. In 2024, FID was replaced by Interaction to Next Paint (INP), which measures all interactions, not just the first.
Cumulative Layout Shift (CLS)
CLS measures unexpected layout shifts during page load. Good: under 0.1. Poor: over 0.25. Caused by images without dimensions, late-loading fonts, and ads injected after first paint.
Measuring CWV in the Browser
Use the web-vitals npm package to capture real-user metrics and send them to your analytics endpoint.
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
function sendToAnalytics({ name, value, id }) {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify({ name, value, id }),
keepalive: true
});
}Fixing LCP: Preload the Hero Image
Tell the browser to download the hero image early, before parsing the rest of HTML.
<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">Fixing CLS: Reserve Space
Always set width and height on images and embeds so the browser reserves space before the asset arrives. Use aspect-ratio CSS for responsive containers.
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">Fixing INP: Break Up Long Tasks
Long JavaScript tasks block the main thread, delaying response to clicks. Break work into chunks with scheduler.yield() or setTimeout so the browser can paint and respond to input.
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
}
}Lab Data vs Field Data
Lab data (Lighthouse) is a synthetic test in a controlled environment. Field data (CrUX, RUM) is collected from real users on real devices. Field data is the source of truth for SEO ranking.
Performance Budgets
Set explicit limits: e.g. LCP under 2s, JS bundle under 200KB. Enforce in CI with Lighthouse CI or @bundle-analyzer to fail builds that regress performance.
Quick Check
Which Core Web Vital measures unexpected visual jumps during page load?
Recap: Core Web Vitals
LCP: load speed of largest element, target under 2.5s. INP (formerly FID): responsiveness, target under 200ms. CLS: visual stability, target under 0.1. Measure with web-vitals package in production; use Lighthouse in CI. Field data drives SEO, not lab data.
Frequently asked questions
Is the “Core Web Vitals: LCP FID CLS” lesson free?
Yes — the full text of “Core Web Vitals: LCP FID CLS” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Core Web Vitals: LCP FID CLS”?
Understand what Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift measure and why Google uses them as ranking signals. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Core Web Vitals: LCP FID CLS” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Core Web Vitals: LCP FID CLS
- Lighthouse Audits and Scoring
- Image Optimization: lazy loading formats WebP
- Code Splitting and Lazy Routes