Initial commit: 79+ design patterns, LLM prompts, and assets

concepts/performance-optimization.md

@@ -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)