# Web Performance Optimization

> Optimize web applications for speed, responsiveness, and efficiency. Use this skill for Core Web Vitals analysis, Lighthouse interpretation, asset optimization strategies, network performance tuning, runtime performance improvements, monitoring setup, and performance budgets. Triggers include: page speed optimization, Lighthouse audit review, Core Web Vitals improvement, image/CSS/JS optimization…

- **Type:** Skill
- **Install:** `agentstack add skill-plugin87-full-stack-design-skills-web-performance-optimization`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [plugin87](https://agentstack.voostack.com/s/plugin87)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [plugin87](https://github.com/plugin87)
- **Source:** https://github.com/plugin87/full-stack-design-skills/tree/main/skills/tier-1-core-foundations/web-performance-optimization

## Install

```sh
agentstack add skill-plugin87-full-stack-design-skills-web-performance-optimization
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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)**
```css
font-family: system-ui, -apple-system, sans-serif;
```
- No download; instant rendering
- Sacrifice brand consistency for speed

**Strategy 2: Critical Font (Synchronous)**
```html

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

**Strategy 3: Non-Critical Font (Asynchronous)**
```html

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

**Strategy 4: Variable Font (Modern)**
```css
@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)
```javascript
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%)
```html

```

---

## 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)**
```javascript
// 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:**
```javascript
// 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:**
```yaml
# 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](https://github.com/plugin87)
- **Source:** [plugin87/full-stack-design-skills](https://github.com/plugin87/full-stack-design-skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-plugin87-full-stack-design-skills-web-performance-optimization
- Seller: https://agentstack.voostack.com/s/plugin87
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.