Page speed is both a ranking factor and a business metric. Google has confirmed that page experience signals, including Core Web Vitals, influence rankings. But the impact of speed extends far beyond SEO. Studies consistently show that slower pages have higher bounce rates, lower conversion rates, and reduced user engagement. Every second of load time matters.
This guide takes a developer-focused approach to page speed optimization, covering the technical strategies that produce measurable improvements. Google’s performance documentation on web.dev provides the technical depth this article complements with practical implementation guidance.
Image Optimization: The Biggest Win
Images typically account for the largest portion of a web page’s total weight. Optimizing images is almost always the single most impactful performance improvement you can make.
Use modern image formats. WebP offers 25 to 35 percent smaller file sizes compared to JPEG at equivalent quality, with broad browser support. AVIF provides even better compression, roughly 50 percent smaller than JPEG, though browser support is slightly narrower. Use the <picture> element or content negotiation to serve the best format each browser supports.
Serve appropriately sized images. Never serve a 3000-pixel-wide image that displays at 600 pixels. Use responsive images with the srcset attribute to provide multiple sizes, letting the browser choose the appropriate one based on the device’s viewport and display density. Generate these size variants during your build process.
Compress aggressively. Most images can tolerate more compression than you might expect without visible quality loss. For photographic images, a quality setting of 75 to 85 percent in WebP typically produces excellent results at significantly reduced file sizes. Test compression levels visually rather than relying on arbitrary numbers.
Implement lazy loading. Images below the fold should not load until the user scrolls near them. Native lazy loading with loading="lazy" on image elements is supported by all modern browsers and requires no JavaScript. However, do not lazy load images that are above the fold or part of the Largest Contentful Paint element, as this will delay your LCP metric. Understanding how Google’s algorithm evaluates performance helps prioritize optimization efforts.
Specify dimensions. Always include width and height attributes on image elements. This allows the browser to reserve the correct space before the image loads, preventing layout shifts that degrade your CLS score. Use the CSS aspect-ratio property for responsive containers that maintain proportions.
Code Splitting and JavaScript Optimization
Excessive JavaScript is the most common cause of poor interactivity metrics. Every kilobyte of JavaScript must be downloaded, parsed, compiled, and executed before it can do anything useful.
Split your code by route. Users should not download JavaScript for pages they have not visited. Modern bundlers like Vite support dynamic imports that load code on demand. Each page should only load the JavaScript it needs.
Defer non-critical JavaScript. Use the defer attribute on script tags for scripts that do not need to execute during initial page rendering. This allows the browser to continue parsing HTML while downloading the script, executing it only after the document is parsed.
Audit third-party scripts ruthlessly. Analytics, chat widgets, social media embeds, advertising scripts, and other third-party code often contribute more to page weight and main thread blocking than your own application code. Evaluate each third-party script’s business value against its performance cost. Load non-essential third-party scripts after the page has become interactive.
Remove unused code. Tree shaking eliminates dead code during the build process, but it only works for ES module imports. Audit your bundles with tools like webpack-bundle-analyzer or Vite’s built-in analysis to identify large dependencies that may have lighter alternatives.
Minimize main thread work. Long tasks that block the main thread for more than 50 milliseconds degrade INP scores. Break expensive operations into smaller chunks, use web workers for computation-heavy tasks, and use requestIdleCallback to schedule non-urgent work during idle periods.
Caching Strategies
Effective caching ensures that returning visitors and subsequent page navigations are near-instant by avoiding redundant downloads.
Set appropriate cache headers. Static assets like images, CSS, and JavaScript files that are versioned through their filenames (using content hashes) should be cached aggressively with Cache-Control: max-age=31536000, immutable. The immutable directive tells the browser not to even check for updates, since the filename itself changes when the content changes.
Use service workers for advanced caching. Service workers can cache critical resources on first visit and serve them from the cache on subsequent visits, even when the network is slow or unavailable. Implement a cache-first strategy for static assets and a network-first strategy for dynamic content.
Leverage browser caching for HTML. While HTML pages should not be cached as aggressively as static assets, short cache durations of a few minutes combined with stale-while-revalidate can dramatically improve the experience for users navigating between pages.
Implement server-side caching. Cache database queries, API responses, and rendered HTML at the server level to reduce response times. A properly cached server can respond in single-digit milliseconds rather than hundreds of milliseconds. Server optimization is a key component of technical SEO.
CDN Implementation
A Content Delivery Network stores copies of your content on servers distributed globally, serving each user from the nearest location. CDN implementation reduces latency and improves load times for users far from your origin server.
Serve all static assets through a CDN. Images, CSS, JavaScript, fonts, and videos should all be served from CDN edge servers. Most CDN providers make this as simple as changing your DNS configuration or adding a CDN domain prefix to your asset URLs.
Consider edge computing for dynamic content. Modern CDN platforms offer edge functions that can run server-side logic at edge locations, eliminating round trips to your origin server for dynamic requests. This is particularly effective for personalization, A/B testing, and API responses.
Enable HTTP/2 or HTTP/3. Modern HTTP protocols dramatically improve performance through multiplexed connections, header compression, and reduced round trips. Most CDN providers support these protocols automatically.
Configure proper cache invalidation. When you deploy new content or update assets, your CDN cache needs to be updated. Implement automated cache invalidation as part of your deployment pipeline to ensure users receive the latest content without waiting for cache expiration.
Rendering Strategy
How your pages are rendered has a profound impact on loading performance, particularly Largest Contentful Paint.
Use server-side rendering or static generation for content pages. When HTML arrives from the server fully rendered, the browser can display content immediately without waiting for JavaScript to execute. This produces the fastest possible LCP for content-heavy pages.
Inline critical CSS. The CSS needed to render the above-the-fold content should be inlined in the HTML document to eliminate the render-blocking effect of external stylesheets. Extract critical CSS automatically during your build process and load the remaining CSS asynchronously.
Preload critical resources. Use <link rel="preload"> to tell the browser to fetch important resources early. Preload your LCP image, critical fonts, and any resources the browser would not discover until later in the parsing process.
Optimize font loading. Web fonts can delay text rendering. Use font-display: swap to show text immediately with a fallback font while the web font loads. Preload your most important font files. Consider using size-adjust on fallback fonts to minimize layout shifts during the swap.
Page speed optimization is iterative. Measure your current performance, implement improvements, measure again, and repeat. Use real user monitoring alongside lab tools to understand how your optimizations translate to actual user experience. The fastest sites are the ones that treat performance as an ongoing practice rather than a one-time project.
