Introduction
Web performance impacts user experience, SEO, and conversions. Fast sites rank higher and convert better. This guide covers optimizing web performance from metrics to implementation.
Core Web Vitals
Largest Contentful Paint (LCP)
Measures loading performance:
- Good: < 2.5 seconds
- Needs improvement: 2.5-4 seconds
- Poor: > 4 seconds
First Input Delay (FID)
Measures interactivity:
- Good: < 100ms
- Needs improvement: 100-300ms
- Poor: > 300ms
Cumulative Layout Shift (CLS)
Measures visual stability:
- Good: < 0.1
- Needs improvement: 0.1-0.25
- Poor: > 0.25
Image Optimization
Formats
- WebP: Best compression
- AVIF: Even better than WebP
- SVG: Icons, simple graphics
Responsive Images
<img
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
src="image-800.jpg"
alt="Description"
>
Lazy Loading
<img src="image.jpg" loading="lazy" alt="Description">
JavaScript Optimization
Code Splitting
// Dynamic imports
const HeavyComponent = React.lazy(() =>
import('./HeavyComponent')
);
// Route-based splitting
<Route path="/dashboard" component={Dashboard} />
Tree Shaking
// imports.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
// main.js - only add imported
import { add } from './imports';
Minification
- Terser for JavaScript
- CSSNano for CSS
- Enabled in build tools
CSS Optimization
Critical CSS
<head>
<style>
/* Critical CSS inline */
.header { background: #fff; }
.hero { min-height: 100vh; }
</style>
<link rel="preload" href="styles.css" as="style">
</head>
Reduce unused CSS
- PurgeCSS
- Uncss
- Chrome Coverage tool
Caching
Headers
Cache-Control: public, max-age=31536000, immutable
ETag: "abc123"
Service Workers
// sw.js
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
Server Optimization
CDN
- Static assets
- Geographic distribution
- SSL termination
Compression
// Express compression
const compression = require('compression');
app.use(compression());
// Or server-level
// nginx: gzip on;
HTTP/2 or HTTP/3
- Multiplexing
- Header compression
- Server push
Font Optimization
Font Loading
/* Display swap for faster rendering */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
}
Font Subsetting
- Remove unused glyphs
- Include only needed weights
Build Tools
Bundlers
- Vite: Fast dev, optimized build
- Webpack: Flexible
- esbuild: Extremely fast
- Rollup: Libraries
Code Example
// vite.config.js
export default {
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
utils: ['lodash', 'moment']
}
}
}
}
};
Measuring Performance
Tools
- Lighthouse: Google audits
- WebPageTest: Detailed analysis
- Chrome DevTools: Real-time
- PageSpeed Insights: Field data
RUM (Real User Monitoring)
- New Relic: APM
- Datadog: Performance
- SpeedCurve: UX monitoring
Quick Wins
Fast Actions
- Optimize images
- Enable compression
- Set cache headers
- Remove unused code
- Preload critical assets
Low-Hanging Fruit
- Lazy load images
- Inline critical CSS
- Preconnect to origins
- Use web fonts efficiently
Conclusion
Performance is ongoing. Measure, optimize, and measure again. Start with Core Web Vitals, then address other improvements. Fast sites win.
Comments