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
1.3 KiB
1.3 KiB
title, description, tags
| title | description | tags | |||||
|---|---|---|---|---|---|---|---|
| Performance Optimization for Web | Core web vitals, image optimization, and rendering strategies. |
|
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
- WebP (best balance)
- AVIF (best compression)
- PNG (lossless)
- JPEG (legacy)
Sizing
<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
<img srcset="
small.jpg 640w,
medium.jpg 1280w,
large.jpg 1920w
" src="large.jpg" sizes="(max-width: 640px) 100vw, 1280px" loading="lazy">
Critical 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)