Web Performance Standards & Core Web Vitals

Core Web Vitals

Google's Core Web Vitals

Core Web Vitals are user-centric performance metrics that measure loading performance, interactivity, and visual stability. They're key ranking factors for SEO.

Largest Contentful Paint (LCP)
2.5s

Good: ≤ 2.5 seconds

Measures loading performance. Time when the largest content element becomes visible.

Optimization Tips:
  • Optimize server response times
  • Use CDN for static assets
  • Preload important resources
  • Optimize images (WebP, compression)
First Input Delay (FID)
100ms

Good: ≤ 100 milliseconds

Measures interactivity. Time from first user interaction to browser response.

Optimization Tips:
  • Reduce JavaScript execution time
  • Break up long tasks
  • Use web workers for heavy processing
  • Optimize third-party scripts
Cumulative Layout Shift (CLS)
0.1

Good: ≤ 0.1 score

Measures visual stability. Quantifies unexpected layout shifts during page load.

Optimization Tips:
  • Set dimensions for images/videos
  • Reserve space for ads
  • Avoid inserting content above existing content
  • Use transform for animations

Performance Budgets & Metrics

Setting Performance Budgets

Resource Budget Guidelines
Size Budgets
  • Total page size: < 1.5MB
  • HTML: < 50KB
  • CSS: < 150KB
  • JavaScript: < 300KB
  • Images: < 800KB
  • Fonts: < 100KB
Count Budgets
  • HTTP requests: < 50
  • DOM elements: < 2000
  • Third-party scripts: < 5
  • Web fonts: < 4 families
  • Images: < 30 per page
Timing Budgets
  • Time to First Byte: < 600ms
  • First Contentful Paint: < 1.8s
  • Speed Index: < 3.4s
  • Time to Interactive: < 3.8s
  • Total Blocking Time: < 200ms

Image Optimization Strategies

Images Often Account for 60-70% of Page Weight

Proper image optimization can dramatically improve performance while maintaining visual quality.

Modern Image Formats
  • WebP: 25-35% smaller than JPEG, widely supported
  • AVIF: 50% smaller than JPEG, newer format
  • Progressive JPEG: Loads incrementally for perceived speed
  • SVG: Vector graphics for icons and logos
  • Fallbacks: Provide JPEG/PNG for older browsers
Responsive Images 
<picture>
  <source media="(min-width: 800px)" 
          srcset="hero-large.webp" 
          type="image/webp">
  <source media="(min-width: 800px)" 
          srcset="hero-large.jpg">
  <source srcset="hero-small.webp" 
          type="image/webp">
  <img src="hero-small.jpg" 
       alt="Hero image"
       width="800" height="400"
       loading="lazy">
</picture>

JavaScript Performance Optimization

Bundle Optimization
Reduce JavaScript Impact:
  • Code splitting: Load only needed code
  • Tree shaking: Remove unused code
  • Minification: Compress JavaScript files
  • Compression: Enable gzip/brotli compression
  • Defer non-critical scripts: Use async/defer attributes
  • Module bundling: Optimize with webpack/rollup
Runtime Performance
Optimize Execution:
  • Avoid long tasks: Break up work > 50ms
  • Use requestAnimationFrame: For smooth animations
  • Debounce/throttle: Limit expensive operations
  • Web Workers: Offload heavy computation
  • Virtual scrolling: For large lists
  • Lazy loading: Load content when needed

Caching Strategies

HTTP Caching
  • Cache-Control: Set appropriate cache headers
  • ETags: Validation-based caching
  • Last-Modified: Time-based validation
  • Immutable assets: Cache with long expiration
  • Cache busting: Version assets for updates
Example Cache Headers:
# Static assets (CSS, JS, images)
Cache-Control: public, max-age=31536000, immutable

# HTML pages
Cache-Control: public, max-age=3600, must-revalidate

# API responses
Cache-Control: private, max-age=300
Client-Side Caching
  • Service Workers: Programmatic cache control
  • Application Cache: Offline functionality
  • Local Storage: Cache API responses
  • Memory caching: In-app data storage
  • CDN caching: Global content distribution
Service Worker Cache:
// Cache-first strategy
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Performance Monitoring & Tools

Monitoring Tools & Services

Lighthouse

Google's automated tool for performance, accessibility, and SEO auditing

PageSpeed Insights

Real-world performance data and optimization suggestions

WebPageTest

Detailed performance testing from multiple locations and devices

Real User Monitoring

Track actual user performance with tools like Google Analytics

Performance API
// Measure Core Web Vitals
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // LCP
    if (entry.entryType === 'largest-contentful-paint') {
      console.log('LCP:', entry.startTime);
    }
    
    // FID
    if (entry.entryType === 'first-input') {
      console.log('FID:', entry.processingStart - entry.startTime);
    }
    
    // CLS
    if (entry.entryType === 'layout-shift' && !entry.hadRecentInput) {
      console.log('CLS:', entry.value);
    }
  }
}).observe({
  entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift']
});

Mobile Performance Considerations

Mobile-First Performance

Mobile devices have limited processing power and slower networks. Optimize for mobile first, then enhance for desktop.

Network Optimization
  • Reduce requests: Combine files, use image sprites
  • Optimize for 3G: Test on slow connections
  • Preload critical resources: DNS, connections, resources
  • Use HTTP/2: Multiplexing and server push
  • Implement offline-first: Service workers and caching
Device Optimization
  • Reduce CPU usage: Optimize animations and scripts
  • Battery considerations: Limit background processing
  • Touch optimization: Appropriate touch targets (44px+)
  • Memory management: Clean up event listeners and objects
  • GPU acceleration: Use CSS transforms wisely
Performance Optimization Checklist
Core Web Vitals
Optimization Techniques

Optimize Web Performance

Report performance issues and access resources to improve Core Web Vitals.

Report Performance Issue Performance Resources Standards Guide