---
title: Performance Optimization for Web
description: Core web vitals, image optimization, and rendering strategies.
tags: [performance, optimization, core-web-vitals, lighthouse, loading]
---

# Performance Optimization for Web

## Core Web Vitals

| Metric | Target | Weight |
|--------|--------|--------|
| LCP | < 2.5s | 25% |
| CLS | < 0.1 | 15% |
| INP | < 200ms | 50% |
| FID (legacy) | < 100ms | 10% |

## Image Optimization

### Format Priority
1. WebP (best balance)
2. AVIF (best compression)
3. PNG (lossless)
4. JPEG (legacy)

### Sizing
```html
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>
```

### Responsive Images
```html
<img srcset="
  small.jpg  640w,
  medium.jpg 1280w,
  large.jpg  1920w
" src="large.jpg" sizes="(max-width: 640px) 100vw, 1280px" loading="lazy">
```

## Critical CSS
```css
/* Inline above-the-fold styles */
<style>
  .hero { /* critical styles */ }
</style>
/* Load rest async */
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
```

## Anti-Patterns
- Never use images > 500KB
- Never skip width/height attributes (causes CLS)
- Never block rendering with JavaScript
- Never forget to optimize fonts (subset, preload, display=swap)