neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
59 lines
1.3 KiB
Markdown
59 lines
1.3 KiB
Markdown
---
|
|
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)
|