Why Performance Matters More Than Ever

Google’s Core Web Vitals are now a confirmed ranking factor. Sites scoring “Good” on all three metrics rank 25% higher on average.

The Three Core Web Vitals

Metric Good Needs Work Poor
LCP (Largest Contentful Paint) ≤2.5s ≤4.0s >4.0s
INP (Interaction to Next Paint) ≤200ms ≤500ms >500ms
CLS (Cumulative Layout Shift) ≤0.1 ≤0.25 >0.25

Quick Wins (80/20 Rule)

1. Images (biggest impact)

<!-- Use modern formats + responsive sizes -->
<img src="hero.avif" loading="lazy" decoding="async"
     srcset="hero-400.avif 400w, hero-800.avif 800w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="800" height="400" alt="..." />

2. Font Loading

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* Prevents invisible text */
}

3. Critical CSS Inline

<style>
  /* Inline above-the-fold CSS */
  body { margin: 0; font-family: system-ui; }
  .hero { min-height: 100vh; }
</style>
<link rel="stylesheet" href="/main.css" media="print" onload="this.media='all'" />

4. Code Splitting

// Only load when needed
const Modal = lazy(() => import('./Modal'));

5. Caching Strategy

Cache-Control: public, max-age=31536000, immutable  /* Hashed assets */
Cache-Control: public, max-age=3600                 /* HTML pages */

Tools for Measurement

  1. Lighthouse — Chrome DevTools audit
  2. PageSpeed Insights — Real user data from Chrome UX Report
  3. WebPageTest — Detailed waterfall analysis
  4. web.dev/measure — Google’s official measurement tool