# Web Performance Web performance is the practice of making websites load fast, respond quickly, and run smoothly. It directly impacts user experience, conversion rates, and [[Search Engine Optimization (SEO)]] rankings. ## Key Metrics - [[Core Web Vitals]] — Google's standardized set (LCP, INP, CLS) - **Time to First Byte (TTFB)** — Server response time - **First Contentful Paint (FCP)** — When the first content appears - **Total Blocking Time (TBT)** — Sum of long task blocking periods - **Speed Index** — How quickly content is visually populated ## Optimization Areas ### Network - Minimize HTTP requests - Enable compression (Brotli, gzip) - Use CDNs for static assets - HTTP/2 or HTTP/3 multiplexing - Resource hints: `preload`, `prefetch`, `preconnect` ### Assets - Image optimization (modern formats like WebP/AVIF, responsive images, lazy loading) - [[Cascading Style Sheets (CSS)]] minification and critical CSS inlining - [[JavaScript]] bundling, tree-shaking, code splitting - Font subsetting and `font-display: swap` ### Rendering - Reduce render-blocking resources - Defer non-critical JS - Avoid layout thrashing - Use efficient CSS selectors - Server-side rendering (SSR) or static site generation (SSG) where appropriate ### Caching - Browser caching with proper `Cache-Control` headers - Service workers for offline and cache-first strategies - Immutable asset hashing for long-term caching ## Measurement Tools - Chrome DevTools Performance panel - Lighthouse - WebPageTest - `web-vitals` [[JavaScript]] library for RUM ## References - https://web.dev/performance/ ## Related - [[Core Web Vitals]] - [[Search Engine Optimization (SEO)]] - [[JavaScript]] - [[Cascading Style Sheets (CSS)]] - [[Accessibility (a11y)]]