Performance
Web Development
Core Web Vitals
Next.js

BLOG

Web Performance Optimization: The Metrics That Actually Matter

May 28, 2025 • 8 min read

Web Performance Optimization: The Metrics That Actually Matter

Core Web Vitals are just the beginning. Here's the performance engineering we do on every production web app we ship.

Performance Is a Product Feature

Slow websites lose users. The data is unambiguous: a 100ms improvement in page load time correlates with a 1% increase in revenue (Amazon's research, repeatedly validated). For a startup, a slow app can kill your growth before you even know it's happening.

But performance optimization has a lot of noise. Let's focus on what actually moves the needle.

The Metrics That Matter

Largest Contentful Paint (LCP)

This is the most important metric for perceived load time. LCP measures when the largest visible element (usually a hero image or headline) renders. Target: under 2.5 seconds.

The biggest LCP killers:

  • Unoptimized images (still the #1 issue we find in audits)
  • Render-blocking fonts
  • Slow server response (TTFB above 800ms)
  • Cumulative Layout Shift (CLS)

    Measures visual stability — how much the page shifts after initial load. Layout shifts are infuriating for users. Target: under 0.1.

    The biggest CLS causes:

  • Images without explicit width/height (or aspect-ratio)
  • Dynamically injected content above existing content
  • Web fonts causing FOUT/FOIT
  • Interaction to Next Paint (INP)

    Replaced First Input Delay in 2024. Measures the latency of all user interactions throughout the page lifecycle. Target: under 200ms.

    INP killers:

  • Long JavaScript tasks blocking the main thread
  • Heavy third-party scripts
  • Unoptimized event handlers
  • What We Actually Do in Every Project

    Images: The Biggest Win

    Always:

  • Use next/image (or equivalent) for automatic format conversion and lazy loading
  • Serve WebP or AVIF — typically 30-50% smaller than JPG/PNG
  • Set explicit dimensions to prevent CLS
  • Use responsive srcset — don't serve a 2000px image on a 400px screen
  • Fonts: Often Underestimated

  • Use font-display: swap or optional
  • Preload your primary font weight
  • Self-host fonts instead of loading from Google Fonts when possible (reduces DNS lookup)
  • Subset your font to only the characters you use (saves 40-60% of font size)
  • JavaScript: Bundle Discipline

  • Run "next build && next analyze" (or equivalent) monthly
  • Aggressively code-split — next-dynamic for anything below the fold
  • Audit third-party scripts quarterly. Every analytics tag, chat widget, and A/B test SDK adds 50-200ms.
  • Prefer native browser APIs over JavaScript libraries when feasible (e.g., IntersectionObserver instead of scroll listeners)
  • Caching Strategy

    We implement a layered caching strategy:

    1. Browser cache — long-lived cache for static assets with content hashes

    2. CDN cache — Cloudflare or equivalent caching responses at the edge

    3. API response cache — Redis for expensive database queries

    4. Stale-while-revalidate — serve cached content instantly, refresh in background

    The Performance Budget

    Set one. We target:

  • JavaScript bundle: < 150KB gzipped (initial load)
  • Images: < 200KB total above the fold
  • Total page weight: < 500KB gzipped
  • Review the budget in CI using Lighthouse CI or similar. Fail the build if you exceed it.

    The Tools We Use

  • Lighthouse — the baseline audit tool
  • WebPageTest — for deep dives and waterfall analysis
  • Chrome DevTools Performance panel — for INP and long task investigation
  • Vercel Analytics / Cloudflare Vitals — real user metrics in production
  • bundleanalyzer — to understand what's in your JavaScript bundle
  • One Thing to Do This Week

    Run PageSpeed Insights on your homepage right now. The LCP suggestion is almost always actionable. Fix it. Measure again. That improvement in LCP directly correlates with better SEO rankings and lower bounce rates.

    Performance
    Web Development
    Core Web Vitals
    Next.js
    Author Avatar

    JumpFast Tech Team

    Frontend Engineering

    The JumpFast engineering team shares practical insights on building web apps, mobile applications, and enterprise software. We've shipped 40+ products and write about what actually works.

    More from our blog

    Ready to Build?

    Tell us what you're building — we'll make it real

    Book a free discovery call or send your project brief. No commitment, no fluff.