wow-design-wiki/concepts/performance-optimization.md

title, description, tags

title	description	tags
Performance Optimization for Web	Core web vitals, image optimization, and rendering strategies.	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

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