Web Performance Optimization Checklist

Core Web Vitals as the Performance Foundation

Google's Core Web Vitals -- Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) -- define the baseline for acceptable web performance. LCP measures loading performance: the largest visible element should render within 2.5 seconds. INP measures responsiveness: interactions should produce visual feedback within 200 milliseconds. CLS measures visual stability: layout shifts should score below 0.1. These thresholds apply to the 75th percentile of page loads, not the median.

Measure real user performance, not just lab performance. Lighthouse scores from a developer's fast machine on a wired connection do not represent the experience of a user on a 4G connection with a mid-range Android phone. Real User Monitoring (RUM) tools like web-vitals.js, SpeedCurve, and Datadog RUM capture actual field data from every user session. The Chrome User Experience Report (CrUX) provides aggregated field data for publicly accessible sites.

Google uses Core Web Vitals as a ranking signal, but the business impact goes beyond SEO. A 2024 Deloitte study found that a 0.1-second improvement in LCP increased conversion rates by 8.4% for retail sites and 10.1% for travel sites. Walmart reported that every 100ms improvement in page load time increased incremental revenue by 1%. Performance is not a technical metric -- it is a business metric with a direct line to revenue.

Image and Asset Optimization

Images typically account for 50-70% of total page weight. Convert images to modern formats: WebP provides 25-35% smaller files than JPEG at equivalent quality, and AVIF provides 50% smaller files. Use the picture element with format fallbacks for browser compatibility. Serve appropriately sized images using srcset and sizes attributes -- a 400px-wide container does not need a 2000px-wide image on a mobile device.

Lazy load images below the fold using the native loading='lazy' attribute or Intersection Observer for more control. The LCP image should never be lazy loaded -- it needs to start loading immediately. Preload the LCP image with a link rel='preload' tag in the document head to prioritize its download. This single optimization can improve LCP by 200-500ms on content-heavy pages.

Minimize and bundle JavaScript and CSS. Tree-shaking removes unused code from bundles. Code splitting divides the bundle into chunks loaded on demand. Modern bundlers like Vite, esbuild, and webpack 5 handle these optimizations automatically. Audit third-party scripts -- analytics, chat widgets, ad tags -- which often add hundreds of kilobytes and dozens of network requests. Each third-party script should justify its inclusion with measurable business value.

Server and Network Optimization

Content Delivery Networks (CDNs) reduce latency by serving content from edge locations close to the user. Cloudflare, Fastly, and AWS CloudFront provide CDN services with minimal configuration. Cache static assets aggressively with long max-age headers and use content hashing in filenames for cache busting. A well-configured CDN can reduce Time to First Byte (TTFB) from 500ms to under 50ms for cached content.

Enable HTTP/2 or HTTP/3 on the server. HTTP/2 multiplexes multiple requests over a single connection, eliminating the head-of-line blocking that slowed HTTP/1.1. HTTP/3 uses QUIC, which handles packet loss more gracefully than TCP and improves performance on unreliable mobile connections. Most modern web servers and CDNs support both protocols with minimal configuration.

Implement server-side rendering (SSR) or static site generation (SSG) for content-heavy pages. Client-side rendering delays LCP because the browser must download, parse, and execute JavaScript before rendering content. SSR and SSG send fully rendered HTML that the browser can display immediately. Next.js, Nuxt, and Astro provide framework-level support for these rendering strategies with automatic optimization for Core Web Vitals.

JavaScript Performance and Rendering

Long tasks -- JavaScript execution that blocks the main thread for more than 50ms -- are the primary cause of poor INP scores. Identify long tasks using Chrome DevTools Performance panel or the Long Tasks API. Break large functions into smaller chunks using requestIdleCallback, setTimeout, or the scheduler.yield() API. Prioritize input-handling code to run before non-critical updates.

Reduce JavaScript bundle size by auditing dependencies. Tools like Bundle Analyzer for webpack and rollup-plugin-visualizer show which modules consume the most space. Replace heavy libraries with lighter alternatives: date-fns instead of moment.js, preact instead of react for simple applications, or native fetch instead of axios. A 100KB reduction in JavaScript bundle size typically improves Time to Interactive by 200-400ms on mobile devices.

Minimize layout shifts by defining explicit dimensions for images, videos, and ads. Use CSS aspect-ratio or width and height attributes so the browser reserves space before the resource loads. Font loading causes layout shifts when the rendered text changes from a fallback font to the web font. Use font-display: swap with size-adjusted fallback fonts to minimize the visual shift. Google Fonts now provides CSS that includes these optimizations by default.

Performance Monitoring and Budgets

Set performance budgets that define acceptable thresholds for key metrics: maximum JavaScript bundle size, maximum LCP, minimum INP. Build performance budget checks into the CI/CD pipeline using tools like Lighthouse CI, bundlesize, or webpack performance hints. A failed performance budget should block deployment just like a failed test, preventing performance regressions from reaching production.

Monitor performance continuously in production. Set alerts for when Core Web Vitals degrade beyond acceptable thresholds. Track performance by page type, device type, and geographic region. A degradation that affects only users in a specific region might indicate a CDN configuration issue. A degradation on a specific page might indicate a new third-party script or an unoptimized image added in a recent deployment.

Review performance metrics monthly in the engineering team meeting. Treat performance regressions with the same urgency as bugs. Create a performance dashboard visible to the entire team showing current Core Web Vitals, trends over time, and comparison against targets. Etsy's engineering team credits their monthly performance review practice with maintaining consistently fast page loads despite continuous feature development.