← Back to Blog
Web Performance Optimization: Core Web Vitals and Beyond
Web performance is no longer just about fast load times—it's about providing an excellent user experience. Google's Core Web Vitals have become the standard for measuring and optimizing web performance, but true optimization goes beyond these metrics.
Understanding Core Web Vitals
Largest Contentful Paint (LCP)
LCP measures loading performance—the time it takes for the largest content element to become visible.
Good LCP: ≤ 2.5 seconds Needs Improvement: 2.5 - 4 seconds Poor: > 4 seconds
<!-- Optimize LCP with proper image loading -->
<img
src="hero-image.jpg"
loading="eager"
fetchpriority="high"
alt="Hero section"
/>
<!-- Preload critical resources -->
<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>
First Input Delay (FID)
FID measures interactivity—the time from when a user first interacts with your site to when the browser responds.
Good FID: ≤ 100 milliseconds Needs Improvement: 100 - 300 milliseconds Poor: > 300 milliseconds
// Optimize FID by reducing JavaScript execution time
// Use code splitting
const LazyComponent = lazy(() => import('./HeavyComponent'));
// Optimize long tasks
function optimizeLongTask() {
// Break into smaller chunks
setTimeout(() => processChunk(1), 0);
setTimeout(() => processChunk(2), 0);
}
Cumulative Layout Shift (CLS)
CLS measures visual stability—the amount of unexpected layout shift during page load.
Good CLS: ≤ 0.1 Needs Improvement: 0.1 - 0.25 Poor: > 0.25
/* Prevent layout shift with proper dimensions */
.image-container {
aspect-ratio: 16/9;
background-color: #f0f0f0;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
Advanced Performance Techniques
Critical Rendering Path Optimization
<!-- Optimize critical rendering path -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Critical CSS inlined -->
<style>
/* Critical above-the-fold styles */
.hero { font-size: 2rem; }
.loading { display: block; }
</style>
<!-- Non-critical CSS deferred -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
<!-- Critical content first -->
<div class="hero">Welcome to our site</div>
</body>
</html>
Resource Hints
<!-- Preload critical resources -->
<link rel="preload" href="critical-script.js" as="script">
<link rel="preload" href="hero-image.jpg" as="image">
<!-- Prefetch likely-to-be-needed resources -->
<link rel="prefetch" href="next-page.html">
<link rel="prefetch" href="secondary-image.jpg">
<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://api.example.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
Image Optimization Strategies
// Modern image loading with WebP/AVIF support
import { useState, useEffect } from 'react';
function OptimizedImage({ src, alt, className }) {
const [currentSrc, setCurrentSrc] = useState('');
useEffect(() => {
// Check for modern format support
const supportsWebP = checkWebPSupport();
if (supportsWebP) {
setCurrentSrc(`${src}.webp`);
} else {
setCurrentSrc(`${src}.jpg`);
}
}, [src]);
return (
<img
src={currentSrc}
alt={alt}
className={className}
loading="lazy"
decoding="async"
/>
);
}
Bundle Optimization
Code Splitting
// Route-based code splitting
import { lazy, Suspense } from 'react';
const AdminPanel = lazy(() => import('./AdminPanel'));
const UserDashboard = lazy(() => import('./UserDashboard'));
function App() {
return (
<Router>
<Suspense fallback={<LoadingSpinner />}>
<Route path="/admin" component={AdminPanel} />
<Route path="/dashboard" component={UserDashboard} />
</Suspense>
</Router>
);
}
Tree Shaking
// Ensure tree-shaking works with ES modules
// utils.js
export const formatDate = (date) => {
// Only export what's needed
return new Intl.DateTimeFormat().format(date);
};
// main.js
import { formatDate } from './utils.js';
// Only formatDate is included in the bundle
Caching Strategies
Service Worker Implementation
// sw.js
const CACHE_NAME = 'my-app-v1';
const urlsToCache = [
'/',
'/static/js/bundle.js',
'/static/css/main.css',
'/manifest.json'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
// Return cached version or fetch from network
return response || fetch(event.request);
})
);
});
HTTP Caching Headers
# Nginx configuration for optimal caching
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header X-Served-By "nginx-cache";
}
location ~* \.(html|htm)$ {
expires 1h;
add_header Cache-Control "public, must-revalidate";
}
Performance Monitoring
Real User Monitoring (RUM)
// Web Vitals tracking
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
function sendToAnalytics({ name, delta, id }) {
// Send metrics to your analytics service
analytics.track('Web Vital', {
name,
value: delta,
eventId: id
});
}
// Track all Core Web Vitals
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);
Custom Performance Metrics
// Measure custom metrics
interface PerformanceMetrics {
pageLoadTime: number;
timeToFirstByte: number;
domContentLoaded: number;
firstContentfulPaint: number;
}
function measurePerformance(): PerformanceMetrics {
const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
return {
pageLoadTime: navigation.loadEventEnd - navigation.loadEventStart,
timeToFirstByte: navigation.responseStart - navigation.requestStart,
domContentLoaded: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
firstContentfulPaint: getFirstContentfulPaint()
};
}
function getFirstContentfulPaint(): number {
const paintEntries = performance.getEntriesByType('paint');
const fcp = paintEntries.find(entry => entry.name === 'first-contentful-paint');
return fcp ? fcp.startTime : 0;
}
Mobile Performance Optimization
Mobile-First Approach
/* Mobile-first CSS */
.container {
width: 100%;
padding: 1rem;
}
/* Tablet */
@media (min-width: 768px) {
.container {
max-width: 750px;
padding: 2rem;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1000px;
padding: 3rem;
}
}
Touch Optimization
/* Optimize for touch interactions */
.button {
min-height: 44px; /* Minimum touch target size */
min-width: 44px;
padding: 12px 24px;
touch-action: manipulation; /* Disable double-tap zoom */
}
Advanced Techniques
Critical Resource Optimization
// Optimize resource loading order
function optimizeResourceLoading() {
// Load critical CSS inline
const criticalCSS = `
.hero { font-size: 2rem; color: #333; }
.loading { display: block; }
`;
// Inject critical CSS
const style = document.createElement('style');
style.textContent = criticalCSS;
document.head.appendChild(style);
// Load non-critical resources asynchronously
loadNonCriticalResources();
}
Lazy Loading Implementation
// Intersection Observer for lazy loading
function createLazyImageObserver() {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target as HTMLImageElement;
img.src = img.dataset.src!;
img.classList.remove('lazy');
observer.unobserve(img);
}
});
});
// Observe all lazy images
document.querySelectorAll('img[data-src]').forEach(img => {
imageObserver.observe(img);
});
}
Performance Budgets
Implementing Performance Budgets
{
"performance": {
"budgets": [
{
"path": "/",
"timings": [
{
"metric": "largest-contentful-paint",
"budget": 2500
},
{
"metric": "first-input-delay",
"budget": 100
},
{
"metric": "cumulative-layout-shift",
"budget": 0.1
}
],
"resourceSizes": [
{
"resourceType": "script",
"budget": 500
},
{
"resourceType": "image",
"budget": 1000
}
]
}
]
}
}
Continuous Monitoring
Automated Performance Testing
// Lighthouse CI for automated testing
// .lighthouserc.json
{
"ci": {
"collect": {
"staticDistDir": "./dist",
"url": ["http://localhost:3000"]
},
"assert": {
"assertions": {
"categories:performance": ["error", {"minScore": 0.8}],
"categories:accessibility": ["error", {"minScore": 0.9}],
"categories:best-practices": ["error", {"minScore": 0.85}],
"categories:seo": ["error", {"minScore": 0.9}]
}
}
}
}
Best Practices Summary
1. Measure First
Always measure current performance before optimizing:
# Lighthouse CLI
npm install -g lighthouse
lighthouse http://localhost:3000 --output html --output-path ./lighthouse-report.html
# WebPageTest
webpagetest test http://example.com --location Dulles:Chrome --first-view-only
2. Optimize Images
- Use modern formats (WebP, AVIF)
- Implement responsive images
- Compress images appropriately
- Use lazy loading
3. Minimize JavaScript and CSS
- Remove unused code
- Minify production bundles
- Use code splitting
- Optimize third-party scripts
4. Implement Caching
- Set proper cache headers
- Use service workers for offline support
- Implement CDN for static assets
5. Monitor Continuously
- Set up real user monitoring
- Track Core Web Vitals
- Alert on performance regressions
Conclusion
Web performance optimization is an ongoing process that requires continuous monitoring and improvement. Core Web Vitals provide a solid foundation, but true performance excellence comes from implementing comprehensive strategies across all aspects of your application.
Remember that performance is a feature, not an afterthought. By prioritizing performance from the beginning of your project and maintaining it through continuous monitoring and optimization, you'll deliver faster, more accessible, and more successful web applications.
The key is to start with measurement, implement optimizations systematically, and maintain performance as your application evolves. With the right tools and strategies, you can achieve excellent performance that delights users and improves your application's success metrics.
Tags:
Web Performance
Core Web Vitals
Performance Optimization
Lighthouse
Web Vitals