Why Speed Matters
- 53% of mobile users abandon sites that take over 3 seconds to load
- A 1-second improvement in page speed can increase conversions by 7%
- Google uses Core Web Vitals as a ranking factor
Understanding Core Web Vitals
#
LCP — Largest Contentful Paint
Measures loading performance. How quickly the largest visible element loads. Target: Under 2.5 seconds How to improve:- Optimize and compress images
- Use a CDN (Content Delivery Network)
- Preload critical resources
- Remove render-blocking CSS and JavaScript
FID — First Input Delay
Measures interactivity. How quickly the page responds to user input. Target: Under 100 milliseconds How to improve:- Minimize JavaScript execution time
- Break up long tasks
- Use web workers for heavy computations
- Defer non-critical third-party scripts
CLS — Cumulative Layout Shift
Measures visual stability. How much the page layout shifts during loading. Target: Under 0.1 How to improve:- Set width/height attributes on images and videos
- Reserve space for ad slots and embeds
- Avoid inserting content above existing content
- Use CSS containment for dynamic content
Practical Optimization Checklist
#
Images
- Convert to WebP format (30-50% smaller than JPEG)
- Use responsive images with srcset
- Implement lazy loading
- Use appropriate dimensions (don't scale 2000px images to 400px)
CSS
- Inline critical above-the-fold CSS
- Remove unused CSS
- Minify all stylesheets
- Avoid CSS @import (use link tags instead)
JavaScript
- Defer non-critical scripts
- Code-split for smaller bundles
- Tree-shake unused code
- Minimize third-party scripts
Server
- Enable GZIP/Brotli compression
- Set proper cache headers
- Use HTTP/2 or HTTP/3
- Choose servers close to your audience
Tools for Measuring
- Google PageSpeed Insights: Core Web Vitals report
- Lighthouse: Detailed performance audit
- WebPageTest: Waterfall analysis
- Chrome DevTools: Real-time performance profiling
