Core Web Vitals & CSS
Google's Core Web Vitals measure user experience and affect SEO rankings. CSS directly impacts all three metrics - LCP (loading), CLS (visual stability), and INP (interactivity). Learn the CSS techniques that optimize each metric.
Core Web Vitals
- LCP (Largest Contentful Paint) - How fast the main content loads. Target: under 2.5 seconds
- CLS (Cumulative Layout Shift) - How much content shifts during loading. Target: under 0.1
- INP (Interaction to Next Paint) - How fast UI responds to clicks. Target: under 200ms
- CSS impacts LCP - Large CSS files block rendering. Use critical CSS and async loading
- CSS impacts CLS - Missing width/height on images, late-loading fonts, dynamic content injection
- CSS impacts INP - Heavy animations, expensive styles during interactions, forced layout recalculations
- Measure - Use Chrome DevTools Lighthouse, PageSpeed Insights, or Web Vitals extension
Core Web Vitals CSS Fixes
/* Fix LCP: Inline critical CSS */
/* In HTML <head>: */
/* <style>/* critical CSS here *//* </style> */
/* <link rel="preload" href="styles.css" as="style"> */
/* Fix CLS: Reserve space for images */
img {
width: 100%;
height: auto;
aspect-ratio: attr(width) / attr(height); /* Auto from HTML attributes */
}
/* Fix CLS: Prevent font swap layout shift */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: optional; /* Don't swap if not loaded quickly */
/* 'optional' = no layout shift at all (uses fallback if slow) */
}
/* Fix CLS: Fixed-size containers for dynamic content */
.ad-slot { min-height: 250px; }
.skeleton { min-height: 200px; }
/* Fix INP: Avoid expensive hover recalculations */
.card:hover {
/* ✅ GPU-only: fast */
transform: translateY(-4px);
/* ❌ Layout trigger: slow */
/* height: calc(100% + 8px); */
}
/* Fix INP: Use will-change sparingly */
.animated-element {
will-change: transform; /* Prepare GPU layer */
}Tip
The #1 CLS fix: always set width and height attributes on <img> tags AND use aspect-ratio in CSS. This reserves space before the image loads, preventing layout shift. Google specifically measures this in Core Web Vitals.
Every element follows the box model - content + padding + border + margin
Common Mistake
Using font-display: swap for custom fonts. Swap causes a visible text shift when the font loads (CLS penalty). Use font-display: optional instead - it shows the fallback immediately and only uses the custom font if it loads within 100ms. Zero layout shift.
Practice Task
Audit a page for Core Web Vitals: (1) Run Lighthouse and check LCP, CLS, INP scores, (2) Add aspect-ratio to all images, (3) Switch font-display from swap to optional, (4) Add min-height to dynamic content containers. Re-run Lighthouse.
Quick Quiz
Key Takeaways
- Google's Core Web Vitals measure user experience and affect SEO rankings.
- LCP (Largest Contentful Paint) - How fast the main content loads. Target: under 2.5 seconds
- CLS (Cumulative Layout Shift) - How much content shifts during loading. Target: under 0.1
- INP (Interaction to Next Paint) - How fast UI responds to clicks. Target: under 200ms