Website performance directly impacts business outcomes. Slow sites lose visitors, reduce conversions, and rank lower in search. Studies consistently show that every second of delay reduces conversions. Google uses page experience as a ranking signal. Performance is not optional.
Performance Metrics
Core Web Vitals
Google's Core Web Vitals are the key metrics for user experience:
- Largest Contentful Paint (LCP): Time until main content loads. Target: under 2.5 seconds.
- Interaction to Next Paint (INP): Responsiveness to user input. Target: under 200 milliseconds.
- Cumulative Layout Shift (CLS): Visual stability—does content jump around? Target: under 0.1.
Other Important Metrics
- First Contentful Paint (FCP): When first content appears
- Time to First Byte (TTFB): Server response time
- Total Blocking Time (TBT): How long main thread is blocked
- Speed Index: How quickly visible content appears
Lab vs. Field Data
- Lab data: Controlled testing (Lighthouse, WebPageTest)
- Field data: Real user measurements (CrUX, RUM)
- Both matter—lab for diagnosis, field for reality
Image Optimisation
Images often account for most of a page's weight. Optimisation has huge impact.
Modern Formats
Use WebP or AVIF instead of JPEG/PNG. Significant size reduction with same quality. Fall back to JPEG for older browsers.
Responsive Images
Serve appropriately sized images for each viewport. Don't send 2000px images to mobile devices. Use srcset and sizes attributes.
Lazy Loading
Load images only when they enter the viewport. Native lazy loading (loading="lazy") or JavaScript-based. Don't lazy load above-the-fold images.
Dimensions
Always specify width and height to prevent layout shift. Let CSS control actual display size.
JavaScript Optimisation
Bundle Size
Audit bundle size. Remove unused code (tree shaking). Split bundles—load what's needed for current page.
Loading Strategy
Use async or defer for non-critical scripts. Move scripts to bottom of body. Consider removing or self-hosting third-party scripts.
Code Splitting
Load code on demand. Route-based splitting in SPAs. Dynamic imports for features that aren't immediately needed.
Third-Party Scripts
Audit all third-party scripts (analytics, chat, advertising). Each has cost. Consider: is the value worth the performance impact?
Server and Delivery
CDN
Use Content Delivery Network to serve assets from edge locations. Reduces latency. CloudFront, Cloudflare, Fastly.
Caching
Implement proper cache headers. Long cache for versioned assets. Appropriate cache for HTML. Browser caching reduces repeat visit load time.
Compression
Enable Gzip or Brotli compression for text-based assets. Significant size reduction for HTML, CSS, JavaScript.
HTTP/2 and HTTP/3
Modern protocols improve performance through multiplexing. Most hosting supports HTTP/2. HTTP/3 (QUIC) further improves performance.
CSS Optimisation
Critical CSS
Inline critical (above-the-fold) CSS. Load remaining CSS asynchronously. Improves first paint.
Unused CSS
Remove unused CSS. Tools like PurgeCSS can identify dead code. CSS frameworks often include much more than you use.
Web Fonts
Limit font weights and styles. Use font-display: swap. Consider system fonts for body text. Subset fonts to needed characters.
Measurement and Monitoring
Testing Tools
- Google PageSpeed Insights: Lab and field data with recommendations
- Lighthouse: In-browser and CI testing
- WebPageTest: Detailed analysis from multiple locations
- Chrome DevTools: Network tab, Performance tab
Real User Monitoring (RUM)
Track actual user experience with RUM. Field data shows real performance. Segment by device, connection, geography.
Performance Budget
Set performance budgets and enforce in CI/CD. Alert when metrics regress. Prevent performance from degrading over time.
Summary
Website performance requires attention across the stack: image optimisation, JavaScript efficiency, server delivery, and CSS management. Core Web Vitals are the key metrics to target. Measure with both lab testing and real user monitoring.
Performance is ongoing—new features, third-party scripts, and content can degrade it. Set budgets, monitor continuously, and treat performance as a feature, not an afterthought.