Web Performance Optimization: A Developer's Checklist

Web performance is no longer a nice-to-have — it directly impacts user experience, search engine rankings, conversion rates, and revenue. Studies show that 53% of mobile users abandon sites that take more than 3 seconds to load. Google has made Core Web Vitals a ranking factor, making performance optimization essential for SEO. This comprehensive checklist covers the most impactful techniques for building faster websites in 2026.

Understanding Core Web Vitals

Google's Core Web Vitals are three specific metrics that measure real-world user experience. Understanding these metrics is the foundation of performance optimization because they directly influence your site's search ranking.

Largest Contentful Paint (LCP): Measures loading performance. LCP should occur within 2.5 seconds of when the page first starts loading. It tracks the render time of the largest image or text block visible within the viewport.
Interaction to Next Paint (INP): Measures interactivity. INP should be 200 milliseconds or less. It assesses the responsiveness of a page to user interactions like clicks, taps, and keyboard inputs throughout the entire page lifecycle.
Cumulative Layout Shift (CLS): Measures visual stability. CLS should be 0.1 or less. It quantifies how much the page layout shifts unexpectedly during loading, which frustrates users trying to read or interact with content.

Image Optimization

Images are typically the heaviest assets on a web page, often accounting for 50-70% of total page weight. Optimizing images is the single most impactful performance improvement you can make.

Format Selection

Choose the right format for each image type. Use WebP as your primary format — it provides 25-34% smaller file sizes than JPG and 26% smaller than PNG with equivalent quality. Use the <picture> element to serve WebP with PNG or JPG fallbacks for maximum compatibility.

Responsive Images

Serve appropriately sized images for each device using the srcset and sizes attributes. A mobile user on a 375px screen should not download a 2000px wide hero image. This alone can reduce image data transfer by 50-80% on mobile devices.

<img 
  src="hero-800.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w,
          hero-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 80vw,
         1200px"
  alt="Descriptive alt text"
  width="1200"
  height="630"
  loading="lazy"
  decoding="async"
>

Lazy Loading

Add loading="lazy" to all images below the fold. This native browser feature defers loading of off-screen images until the user scrolls near them, significantly reducing initial page load time and data transfer.

Critical Rule: Never lazy-load your LCP image (usually the hero image). This delays the largest contentful paint and hurts your Core Web Vitals score. Only lazy-load images that are below the viewport fold.

CSS and JavaScript Optimization

Critical CSS

Extract and inline the CSS needed for above-the-fold content directly in the <head> of your HTML document. This eliminates render-blocking stylesheet requests and allows the browser to paint the initial view immediately. Defer the remaining CSS with media="print" onload="this.media='all'".

JavaScript Bundling and Code Splitting

Modern bundlers like Vite, esbuild, and webpack support automatic code splitting, which breaks your JavaScript into smaller chunks loaded on demand. Only the code needed for the current page is downloaded, reducing the initial bundle size dramatically.

Use async or defer attributes on script tags to prevent render blocking.
Tree-shake unused code with modern bundler configurations.
Lazy-load heavy components and libraries that are not needed on initial render.
Consider using smaller alternatives to heavy libraries (e.g., day.js instead of moment.js).

Font Optimization

Web fonts are a common source of layout shift and delayed rendering. Optimize font loading with these techniques:

Preconnect to font origins: Add <link rel="preconnect" href="https://fonts.googleapis.com"> to establish early connections.
Use font-display: swap: This shows a fallback font immediately while the web font loads, preventing invisible text (FOIT).
Subset your fonts: If you only use Latin characters, request only the Latin subset instead of the full Unicode range.
Limit font variations: Each weight and style is a separate file. Only import the weights you actually use.

Caching Strategies

Proper caching ensures returning visitors experience near-instant load times by serving assets from local storage rather than re-downloading them from the network.

Static assets: Set Cache-Control: max-age=31536000, immutable for CSS, JS, and image files with content hashes in their filenames.
HTML documents: Use Cache-Control: no-cache to revalidate on each request while still leveraging ETags for efficient conditional requests.
Service Workers: For progressive web apps, implement a service worker with a cache-first strategy for static assets and network-first for API responses.

Server and Network Optimization

Enable compression: Use Brotli compression (superior to Gzip) for text-based assets. Most modern servers and CDNs support Brotli out of the box.
Use a CDN: Content Delivery Networks serve assets from edge locations closest to your users, reducing latency significantly for global audiences.
Enable HTTP/2 or HTTP/3: These protocols support multiplexing, header compression, and server push, allowing multiple assets to download simultaneously over a single connection.
Preload critical resources: Use <link rel="preload"> for fonts, hero images, and critical CSS files.

Optimize Your Image Exports

Export HTML as optimized WebP images with our free converter for faster page loads.

Try HTML to WebP →

Measuring and Monitoring

Performance optimization is an ongoing process, not a one-time task. Set up monitoring with these tools to track your metrics over time and catch regressions early:

Google PageSpeed Insights: Free tool that measures Core Web Vitals and provides specific, actionable recommendations.
Chrome DevTools Lighthouse: Run audits locally during development to catch performance issues before deployment.
Google Search Console: Monitors Core Web Vitals for all pages indexed by Google, highlighting pages that need improvement.
WebPageTest: Advanced tool for detailed waterfall analysis, filmstrip views, and performance comparisons across different network conditions.

Conclusion

Web performance optimization is a multi-faceted discipline that touches every part of the tech stack — from image formats and CSS delivery to server configuration and caching. The most impactful changes are often the simplest: optimize images, eliminate render-blocking resources, lazy-load below-the-fold content, and leverage browser caching. Start with the highest-impact items from this checklist, measure your improvements with Lighthouse, and iterate continuously for the best results.