The Ultimate Front-End Performance Playbook (2025)

Kauan Curbani

Kauan Curbani

— 4 min read
The Ultimate Front-End Performance Playbook (2025)

Modern users don’t wait. Performance is the product: it shapes SEO, conversions, retention, and how people feel about your brand. This playbook is a practical, copy‑pasteable guide to ship perceptibly faster apps in 2025—without rewriting your stack.

Why performance is a business feature

  • Higher conversions: every 100ms counts. Faster feels better and converts better.
  • Better SEO: Core Web Vitals are ranking signals.
  • Improved retention: speed reduces frustration and bounce.
  • Lower costs: fewer bytes ≈ fewer servers, faster builds, cheaper bandwidth.

Metrics that matter in 2025

  • LCP (Largest Contentful Paint): speed to main content. Target ≤ 2.5s p75 (mobile).
  • INP (Interaction to Next Paint): responsiveness across all interactions. Target ≤ 200ms p75.
  • CLS (Cumulative Layout Shift): visual stability. Target ≤ 0.1 p75.
  • TTFB (Time To First Byte): backend + network time. Target ≤ 0.8s p75.
  • Bonus: TBT (Total Blocking Time) in lab to diagnose INP; Memory for long sessions.

Tip: Monitor distributions (p75) by device/network segments, not just averages.

Measure: lab + field

  • Lab
    • Lighthouse (CI) for quick checks and budgets.
    • WebPageTest for multi‑step flows, filmstrips, and network shaping.
    • Bundle analyzers to find heavy modules.
  • Field (RUM)
    • Capture LCP/INP/CLS with a tiny snippet, segment by page, device, and country.
    • Use your analytics/observability stack (e.g., GA4, Sentry, Datadog, Elastic) or a lightweight endpoint.

Example: minimal RUM for Core Web Vitals (vanilla JS):

<script type="module">
  import {onLCP, onINP, onCLS} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js';
  const send = (name, value, id) => {
    navigator.sendBeacon?.('/rum', JSON.stringify({ name, value, id, url: location.pathname }))
      || fetch('/rum', { method: 'POST', keepalive: true, body: JSON.stringify({ name, value, id, url: location.pathname }) });
  };
  onLCP(({ value, id }) => send('LCP', value, id));
  onINP(({ value, id }) => send('INP', value, id));
  onCLS(({ value, id }) => send('CLS', value, id));
</script>

Quick wins that move the needle

1) Images: biggest, cheapest wins

  • Serve modern formats: AVIF/WebP with fallbacks.
  • Right‑size per viewport DPR; lazy‑load below‑the‑fold.
  • Use fetchpriority="high" for the hero image.
<img
  src="/images/hero.avif"
  alt="Hero"
  width="1200" height="800"
  fetchpriority="high"
  decoding="async"
  loading="eager"
  style="content-visibility:auto; contain-intrinsic-size: 800px 1200px;"
/>

2) Fonts: fast and invisible layout shifts

  • Host fonts yourself; sub‑set and preconnect.
  • Use font-display: swap or optional to avoid blank text.
  • Avoid layout jumps: match fallback font metrics if possible.
<link rel="preconnect" href="https://your-cdn.example" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="/fonts/Inter-Subset.woff2" crossorigin>
<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Subset.woff2') format('woff2');
    font-display: swap;
  }
  html { font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }
</style>

3) Critical CSS + defer the rest

  • Inline only above‑the‑fold CSS; load the rest async.
<link rel="preload" href="/css/above-the-fold.css" as="style">
<link rel="stylesheet" href="/css/above-the-fold.css">
<link rel="preload" href="/css/app.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/app.css"></noscript>

4) Ship less JavaScript

  • Audit dependencies; prefer native APIs.
  • Turn on tree‑shaking and minification; remove dead/polyfilled code for modern targets.
  • Split routes and heavy components; hydrate only what’s interactive.
// Route-level splitting
import('~/pages/heavy-report.js').then(({ render }) => render());

// Component-level lazy
const Chart = React.lazy(() => import('./Chart'));

// Hydrate only when visible
const mountWhenVisible = (el, mount) => {
  const io = new IntersectionObserver((entries) => {
    if (entries.some(e => e.isIntersecting)) { io.disconnect(); mount(); }
  });
  io.observe(el);
};

5) Network and caching

  • HTTP/2 or HTTP/3; compress with Brotli; cache aggressively with immutable assets.
  • Preconnect to critical origins; prefetch likely next routes.
<link rel="preconnect" href="https://api.example.com" crossorigin>
<link rel="prefetch" href="/next-route" as="document" />

Make interaction fast: win on INP

INP measures end‑to‑end responsiveness. Fix long tasks and schedule non‑urgent work.

  • Break up long tasks > 50ms. Use requestIdleCallback, scheduler.postTask, or setTimeout(0).
  • Avoid heavy synchronous work in event handlers; debounce where appropriate.
  • In React, prefer startTransition for non‑urgent state updates.
// Break up work
if ('scheduler' in window && scheduler.postTask) {
  scheduler.postTask(() => doNonUrgentWork(), { priority: 'background' });
} else {
  setTimeout(doNonUrgentWork, 0);
}

// React transitions for non-urgent updates
import { startTransition } from 'react';
button.addEventListener('click', () => {
  startTransition(() => {
    setFilter('popular'); // deprioritize
  });
});

Also:

  • Use content-visibility: auto to skip layout/paint for off‑screen content.
  • Virtualize long lists; stream results progressively from the server when possible.

Framework notes (brief)

  • Next.js/Remix/Nuxt: stream HTML, use route‑level code splitting and edge‑caching. Prefer server components/loader data fetching to reduce client JS.
  • Astro/Islands: hydrate only interactive islands; great for content sites.
  • React/Vue/Svelte/Solid: turn on production flags, minify, and analyze bundles.

Tooling you’ll actually use

  • Bundle analyzer: Webpack Bundle Analyzer, Vite analyze, or esbuild --analyze.
  • Image pipeline: Sharp/imaginary/imgproxy; automate responsive variants.
  • CI checks: Lighthouse CI with budgets; block PRs on regressions.
  • Monitoring: a tiny RUM pipeline + dashboards per page type.

Example Lighthouse CI budget (lighthouserc.json):

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "resource-summary:total": ["error", { "maxNumericValue": 300000 }],
        "script-treemap-data": ["warn", { "maxLength": 350000 }]
      }
    }
  }
}

Rollout plan: safer, faster

  1. Baseline: capture current p75 LCP/INP/CLS per route and device.
  2. Set budgets: bytes per route, max LCP, max CLS.
  3. Ship small: feature flag optimizations; A/B test impact.
  4. Guardrails: block PRs that break budgets; alarms on p75 regressions.
  5. Iterate: weekly performance review with clear owners.

Common gotchas

  • Oversized images and third‑party scripts dominate weight.
  • CSS blocking render: load non‑critical styles async.
  • Font flashes and shifts: misconfigured display/metrics.
  • JS bloat from legacy polyfills and unused components.
  • Server latency spikes and cache misses: watch TTFB and edge caching.

Copy‑paste checklist ✅

  • [ ] LCP ≤ 2.5s p75, INP ≤ 200ms p75, CLS ≤ 0.1 p75 (mobile)
  • [ ] Hero image optimized + fetchpriority="high"
  • [ ] Fonts subset + preconnect + font-display: swap
  • [ ] Critical CSS inlined; rest loaded async
  • [ ] Route and component code splitting; heavy deps audited
  • [ ] Long tasks < 50ms; background non‑urgent work
  • [ ] HTTP/2+TLS, Brotli, immutable asset caching
  • [ ] Prefetch next routes and preconnect critical origins
  • [ ] Lighthouse CI budgets + RUM dashboards

Conclusion

Performance is user experience. Start with the biggest wins (images, fonts, CSS, and JS diet), make interaction snappy (INP), and automate guardrails. Measure where users are, iterate weekly, and let the numbers guide you. Your users—and your metrics—will thank you.

If you ship one improvement this week, make it image optimization + budgets. It’s the highest ROI combo in front‑end performance.

Read more