Web Performance Optimization

Web Performance Optimization

A practical guide to measuring, diagnosing, and improving web application performance.

Performance is a user experience feature. A fast site converts better, keeps users engaged, and ranks higher in search. This skill covers the metrics that matter, tools that measure them, and concrete optimization strategies.

Core Web Vitals: The Three Metrics That Matter

Google's Core Web Vitals are the three quantitative measures of user experience. They directly impact search rankings and user satisfaction.

1. Largest Contentful Paint (LCP)

What it measures: How fast the largest visible element (text, image, video) appears on screen.

Target: ` elements

• ` inside `
• Backgrounds with background-image
• Text blocks (paragraphs, headings)
• Videos (poster frame)
• Canvas elements

What doesn't count:

• Off-screen images
• Transparent images
• Text in canvas

Example LCP Timeline:

0s    — Page begins to load
0.8s  — Hero image starts loading
1.2s  — Hero image finishes (LCP = 1.2s)  ✓ Good (`)
- Compress images aggressively (WebP format, lazy loading for below-the-fold)
- Use a CDN for fast global delivery
- Avoid render-blocking CSS/JavaScript
- Use server-side rendering for critical content

### 2. First Input Delay (FID) → Interaction to Next Paint (INP)

**What it measures:** Delay between user input (click, tap, keystroke) and browser response.

**Target:** ` block page rendering
- Fix: Inline critical CSS, defer non-critical JS, use `async`/`defer` attributes

**Defer offscreen images** (high impact)
- Problem: All images load immediately, even those below the fold
- Fix: Use lazy loading (`loading="lazy"` attribute or Intersection Observer)

**Unsized images cause layout shift** (high impact)
- Problem: Images load without width/height, causing reflow
- Fix: Always declare `width` and `height` attributes or CSS aspect-ratio

**Reduce CSS** (medium impact)
- Problem: Large unused CSS files
- Fix: Remove dead code, split by route, use CSS-in-JS with automatic splitting

**Reduce JavaScript** (medium impact)
- Problem: Large bundle size
- Fix: Code splitting, tree-shaking, lazy loading routes

---

## Asset Optimization

### Images: Biggest Bang for Buck

Images typically account for 50-80% of page weight. Optimizing images has the highest ROI.

**Image optimization checklist:**
- ✅ Use modern formats (WebP with JPEG fallback)
- ✅ Compress aggressively (quality 75-85 is often imperceptible)
- ✅ Serve responsive sizes (`srcset`, `sizes` attributes)
- ✅ Lazy load below-the-fold images (`loading="lazy"`)
- ✅ Declare dimensions (prevent layout shift)
- ✅ Use a CDN with image optimization (Cloudflare, Akamai, Fastly)

**Example: Optimized Image Tag**
```html

  
  
  

Result: 95% size reduction, faster LCP, no layout shift.

Fonts: Load Strategically

Web fonts are often invisible bottleneck. Default behavior blocks rendering.

Font loading strategies:

Strategy 1: System Fonts Only (Fastest)

font-family: system-ui, -apple-system, sans-serif;

• No download; instant rendering
• Sacrifice brand consistency for speed

Strategy 2: Critical Font (Synchronous)

• Loads early; unblocks rendering after download
• Good for display fonts (headings)

Strategy 3: Non-Critical Font (Asynchronous)

• Loads in background; doesn't block
• Good for body text

Strategy 4: Variable Font (Modern)

@font-face {
  font-family: 'Recursive';
  src: url('recursive.var.woff2') format('woff2-variations');
  font-weight: 100 900;
}

• Single file for all weights/styles (400 normal + 700 bold = 1 file instead of 2)
• Huge savings for large font families

CSS & JavaScript: Load Only What You Need

CSS optimization:

• Remove unused CSS (PurgeCSS, Tailwind)
• Split by route (critical styles inline, route styles async)
• Compress and minify
• Use CSS-in-JS with automatic code splitting (styled-components, emotion)

JavaScript optimization:

• Code splitting by route (lazy load pages, modals, etc.)
• Tree-shaking (remove dead code)
• Minification and compression
• Consider moving to Edge runtime (Cloudflare Workers, Vercel Edge) for faster execution

---

Network Optimization

Caching Strategy

Browser cache (HTML Cache-Control header)

• Set long expiry for static assets (1 year for versioned files)
• Set short expiry for HTML (1-5 minutes or no-cache with ETag)

# Versioned assets (never change)
Cache-Control: max-age=31536000, immutable

# HTML (check for updates frequently)
Cache-Control: max-age=300, must-revalidate

CDN cache

• Edge caching for global delivery
• Geographically distributed servers reduce latency
• Example services: Cloudflare, Fastly, Akamai

Service Worker cache

• Offline support
• Predictable performance (don't wait for network)
• Good for PWAs

Compression

Gzip/Brotli compression (most important)

• Compress text (HTML, CSS, JS) at 70-90% reduction
• Enable on server (nearly zero CPU cost for modern servers)
• Most browsers support it automatically

# Enable Brotli (better than gzip)
Content-Encoding: br

Lazy Loading

Intersection Observer API (modern, recommended)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

Native lazy loading (simplest, browser support ≈95%)

---

Runtime Performance

Rendering Performance

Frame budget: 60fps = 16ms per frame

• Rendering (layout, paint): ≤ 10ms
• JavaScript: ≤ 3-5ms (rest is browser work)

Avoid jank (stuttering):

• Don't block main thread (use Web Workers for heavy computation)
• Batch DOM reads/writes (all reads first, then all writes)
• Use requestAnimationFrame for animations
• Use CSS transforms instead of top/left (GPU-accelerated)

Example: Layout Thrashing (BAD)

// Bad: read-write-read-write alternates
for (let i = 0; i  {
  elements[i].style.width = (w + 10) + 'px'; // then all writes
});

Memory Leaks

Common causes:

• Detached DOM nodes still referenced in JavaScript
• Event listeners not removed
• Timers (setInterval) not cleared
• Circular references in objects

Detection:

• Chrome DevTools Memory profiler
• Heap snapshots to find retained objects
• Performance monitor for memory growth over time

---

Monitoring & Observability

Real User Monitoring (RUM)

Synthetic (lab) testing like Lighthouse is good, but doesn't capture real-world conditions. Real User Monitoring measures actual user experiences.

Key RUM metrics:

• Core Web Vitals (LCP, INP, CLS)
• Time to First Byte (TTFB)
• Page load time
• Error rates
• User interactions (clicks, scrolls, form submissions)

Popular RUM services:

• Google Analytics (free, built-in Web Vitals)
• Datadog (premium)
• New Relic (premium)
• Custom implementation using PerformanceObserver

Custom RUM implementation:

// Measure Core Web Vitals
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('LCP:', entry.renderTime || entry.loadTime);
  }
}).observe({ entryTypes: ['largest-contentful-paint'] });

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('CLS:', entry.value);
  }
}).observe({ type: 'layout-shift', buffered: true });

Performance Budgets

A performance budget is a maximum limit on page metrics. It prevents performance regression.

Example budget:

• JavaScript bundle: ≤ 150KB (gzipped)
• CSS: ≤ 50KB (gzipped)
• Images: ≤ 500KB
• LCP: ≤ 2.5s
• INP: ≤ 200ms
• CLS: ≤ 0.1

How to enforce:

• CI/CD checks (fail build if budget exceeded)
• Lighthouse CI (automated Lighthouse runs on every PR)
• Bundle size monitoring (bundlesize, size-limit)

Example CI check:

# GitHub Actions
- name: Lighthouse CI
  uses: treosh/lighthouse-ci-action@v10
  with:
    uploadArtifacts: true
    temporaryPublicStorage: true
    budgetPath: ./lighthouse-budget.json

---

Common Performance Issues & Fixes

Slow LCP

Problem: Page takes 4+ seconds to show main content.

Diagnosis:

• Largest element is a hero image? Problem is image loading
• Largest element is text? Problem is font loading or render-blocking CSS

Fixes:

• Hero images: Preload, compress, use CDN
• Fonts: Use system fonts initially, load custom font asynchronously
• Render-blocking CSS: Move to ``, inline critical styles, defer rest

High INP

Problem: Page feels unresponsive (clicks take 500ms+ to register).

Diagnosis: DevTools Performance profiler will show long JavaScript execution times.

Fixes:

• Break JavaScript into shorter tasks (use scheduler.yield() in modern browsers)
• Defer non-critical work (debounce, lazy load)
• Use Web Workers for heavy computation

High CLS

Problem: Page layout shifts unexpectedly.

Diagnosis: Lighthouse report identifies specific culprits (images, ads, fonts).

Fixes:

• Declare image dimensions
• Reserve space for ads/embeds before load
• Use font-display: swap to avoid font swap causing layout shift

---

Performance Testing Workflow

Step 1: Establish baseline

• Run Lighthouse audit (lab test)
• Set up RUM (real-world monitoring)
• Define performance budget

Step 2: Identify bottlenecks

• Lighthouse Opportunities section (ranked by impact)
• Performance profiler for runtime issues
• Network tab for slow assets

Step 3: Prioritize & fix

• High-impact fixes first (e.g., image optimization)
• Test in isolation (fix one thing at a time)
• Re-measure to confirm improvement

Step 4: Monitor & maintain

• Set performance budget in CI/CD
• Monitor RUM dashboard weekly
• Alert on regressions

---

When to Use This Skill

✅ Do use for:

• Core Web Vitals optimization and interpretation
• Lighthouse audit review and prioritization
• Asset optimization strategy (images, fonts, CSS, JS)
• Network and caching optimization
• Runtime performance improvements
• Performance monitoring setup
• Performance budget definition and enforcement
• Performance testing methodology

❌ Don't use for:

• Specific tool setup (Google Analytics, Datadog config — see tool-specific skills)
• Framework-specific optimization (React.memo, Vue computed properties — see framework skills)
• Server optimization (Node.js, database tuning — see backend skills)
• SEO optimization (though performance helps SEO)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: plugin87
• Source: plugin87/full-stack-design-skills
• License: MIT

Install and usage instructions live in the source repository linked above.