design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 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
This commit is contained in:
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -0,0 +1,58 @@
|
||||
---
|
||||
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)
|
||||
Reference in new issue
Block a user