Why Performance Matters
Website performance directly impacts:
- User Experience - Users abandon slow sites
- SEO Rankings - Google uses performance as a ranking factor
- Conversion Rates - Every second of delay costs conversions
- Accessibility - Slow sites hurt users on slower connections
A 1-second delay in page load time leads to 11% fewer page views, 16% decrease in customer satisfaction, and 7% loss in conversions.
Core Web Vitals
Google's key performance metrics:
#
LCP (Largest Contentful Paint)
How fast the main content loads.
- Good: < 2.5 seconds
- Needs Improvement: 2.5 - 4 seconds
- Poor: > 4 seconds
#
FID (First Input Delay)
How fast the page responds to user input.
- Good: < 100 milliseconds
- Needs Improvement: 100 - 300 ms
- Poor: > 300 ms
#
CLS (Cumulative Layout Shift)
Visual stability - how much the page jumps around.
- Good: < 0.1
- Needs Improvement: 0.1 - 0.25
- Poor: > 0.25
Image Optimization
Images often make up 50%+ of page weight.
#
Use Modern Formats
html
Copy
1<picture> 2 <source srcset="image.avif" type="image/avif"> 3 <source srcset="image.webp" type="image/webp"> 4 <img src="image.jpg" alt="Description"> 5</picture>
#
Lazy Loading
html
Copy
1<img src="image.jpg" loading="lazy" alt="Description">
#
Responsive Images
html
Copy
1<img 2 srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w" 3 sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px" 4 src="medium.jpg" 5 alt="Description" 6>
JavaScript Optimization
#
Code Splitting
javascript
Copy
1// Dynamic imports 2const HeavyComponent = lazy(() => import('./HeavyComponent')); 3 4// Route-based splitting in Next.js is automatic
#
Defer Non-Critical JavaScript
html
Copy
1<script src="analytics.js" defer></script> 2<script src="chat-widget.js" async></script>
#
Tree Shaking
javascript
Copy
1// ❌ Imports entire library 2import _ from 'lodash'; 3 4// ✅ Imports only what you need 5import debounce from 'lodash/debounce';
CSS Optimization
#
Critical CSS
Inline critical above-the-fold CSS:
html
Copy
1<head> 2 <style> 3 / Critical CSS inlined / 4 body { margin: 0; font-family: sans-serif; } 5 .header { background: #333; color: white; } 6 </style> 7 <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'"> 8</head>
#
Remove Unused CSS
Use PurgeCSS or Tailwind's built-in purging.
Caching Strategies
#
Browser Caching
bash
Copy
1# nginx.conf 2location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { 3 expires 1y; 4 add_header Cache-Control "public, immutable"; 5}
#
Service Workers
javascript
Copy
1// Cache-first strategy 2self.addEventListener('fetch', (event) => { 3 event.respondWith( 4 caches.match(event.request).then((response) => { 5 return response || fetch(event.request); 6 }) 7 ); 8});
Performance Monitoring
#
Tools to Use
- Lighthouse - Chrome DevTools audit
- PageSpeed Insights - Google's free tool
- WebPageTest - Detailed waterfall analysis
- Core Web Vitals Report - Search Console
Conclusion
Web performance is an ongoing process, not a one-time fix. Monitor your Core Web Vitals, optimize incrementally, and always test on real devices with various network conditions.
Tags
