How to Improve Page Speed in 2026: Practical Guide

Understanding Page Speed Metrics

Page speed measures how quickly content loads and becomes interactive. Core Web Vitals focus on three key metrics: LCP measures loading performance (target: under 2.5 seconds), FID measures interactivity (target: under 100ms), and CLS measures visual stability (target: under 0.1).

Use Chrome DevTools Lighthouse, PageSpeed Insights, or WebPageTest to measure baseline performance before making changes. Record LCP, FID, CLS, Time to First Byte (TTFB), and total page weight. These metrics provide a benchmark for measuring improvement.

Enable Compression and Minification

Compression reduces file sizes by encoding data more efficiently. Gzip compression typically reduces text-based files by 60-70%, while Brotli can achieve 70-80% reduction. Most modern web servers and CDNs support both formats.

For Apache servers, enable mod_deflate or mod_brotli in your .htaccess file. For Nginx, add gzip or brotli directives to your server configuration. Test compression by checking response headers for 'Content-Encoding: gzip' or 'Content-Encoding: br'.

Minification removes whitespace, comments, and unnecessary characters from CSS, JavaScript, and HTML. Use build tools like Terser for JavaScript, cssnano for CSS, or html-minifier for HTML. Many hosting platforms and CDNs offer automatic minification as a configuration option.

• Enable Gzip or Brotli compression in your web server configuration
• Minify CSS and JavaScript files using build tools or automated services
• Verify compression with browser DevTools Network tab (check Content-Encoding header)
• Keep unminified source files for debugging; serve minified versions in production

Implement Lazy Loading and Resource Prioritization

Lazy loading defers loading of off-screen images and iframes until users scroll near them. This reduces initial page weight and improves LCP by prioritizing above-the-fold content. Modern browsers support native lazy loading with the loading='lazy' attribute.

Add loading='lazy' to img and iframe tags for content below the fold. Keep above-the-fold images without the attribute to ensure immediate loading. Use the fetchpriority='high' attribute on your LCP element (typically the hero image) to prioritize its loading.

Defer non-critical JavaScript by adding the defer or async attribute to script tags. The defer attribute loads scripts in order after HTML parsing, while async loads scripts independently. Move inline scripts that block rendering to external files with defer attributes.

• Add loading='lazy' to images and iframes below the fold
• Use fetchpriority='high' on your LCP image element
• Add defer attribute to non-critical JavaScript files
• Inline critical CSS (above-the-fold styles) and defer the rest
• Test on real devices to confirm visible content loads immediately

Configure CDN and Edge Caching

A Content Delivery Network (CDN) distributes static assets across geographically distributed servers, reducing latency by serving content from the nearest edge location. CDNs can reduce load times by 40-70% for international visitors and reduce origin server load.

Popular CDN providers include Cloudflare, Fastly, Amazon CloudFront, and BunnyCDN. Configure your DNS to route traffic through the CDN, then enable caching for static assets (images, CSS, JavaScript, fonts). Set appropriate cache durations: long cache times (1 year) for versioned assets, shorter times (1 hour to 1 day) for frequently updated content.

Use cache-control headers to control browser and CDN caching behavior. Set 'Cache-Control: public, max-age=31536000, immutable' for versioned static assets. For dynamic content, use 'Cache-Control: public, max-age=3600, must-revalidate' to balance freshness and performance.

• Choose a CDN provider and configure DNS to route traffic through their network
• Enable caching for static assets with appropriate cache durations
• Use versioned filenames (e.g., style.v2.css) for long-term caching
• Configure cache-control headers to control browser and CDN behavior
• Test edge caching by checking X-Cache or similar response headers

Optimize Images and Media

Images typically account for 50-70% of total page weight. Optimize images by choosing the right format, compressing without visible quality loss, and serving responsive sizes. Use WebP or AVIF formats for better compression than JPEG or PNG—WebP reduces file sizes by 25-35% compared to JPEG.

Compress images using tools like Squoosh, ImageOptim, or automated services like Cloudinary or Imgix. Target 80-85 quality for JPEG and WebP to balance file size and visual quality. For PNG, use tools like pngquant to reduce color palettes without visible degradation.

Implement responsive images with the srcset attribute to serve appropriately sized images based on device screen size. Use the picture element for art direction (different crops for mobile vs desktop). Specify width and height attributes on img tags to prevent layout shift.

• Convert images to WebP or AVIF format for better compression
• Compress images to 80-85 quality using optimization tools
• Use srcset and sizes attributes to serve responsive image sizes
• Specify width and height attributes to prevent layout shift
• Remove image metadata (EXIF data) to reduce file size

Database and Server-Side Optimization

Slow database queries increase Time to First Byte (TTFB) and delay content rendering. Optimize queries by adding indexes to frequently queried columns, avoiding SELECT * statements, and using query result caching. Monitor slow query logs to identify bottlenecks.

Enable query caching in your database configuration. For MySQL, set query_cache_type=1 and query_cache_size to an appropriate value (start with 64MB). For PostgreSQL, use shared_buffers and effective_cache_size settings. Monitor cache hit rates to verify effectiveness.

Implement application-level caching for database results, API responses, and rendered HTML fragments. Use caching systems like Redis or Memcached to store frequently accessed data in memory. Set appropriate expiration times based on data update frequency—cache static data for hours or days, dynamic data for minutes.

• Add database indexes to columns used in WHERE, JOIN, and ORDER BY clauses
• Enable query caching in database configuration
• Use Redis or Memcached for application-level caching
• Monitor database slow query logs to identify optimization opportunities
• Test changes on staging environments before applying to production

Browser Caching and HTTP Headers

Browser caching eliminates redundant requests on repeat visits by storing assets locally. Configure cache-control headers to specify how long browsers should cache different asset types. Use long cache durations for static assets and shorter durations for frequently updated content.

Set cache-control headers in your web server configuration. For Apache, use mod_expires and mod_headers. For Nginx, use the expires and add_header directives. Configure different cache durations by file type: 1 year for fonts and versioned assets, 1 month for images, 1 week for CSS and JavaScript.

Use ETags or Last-Modified headers to enable conditional requests. Browsers send If-None-Match or If-Modified-Since headers on subsequent requests, and the server responds with 304 Not Modified if the resource hasn't changed, saving bandwidth without sacrificing freshness.

• Configure cache-control headers with appropriate max-age values by file type
• Use immutable directive for versioned assets that never change
• Enable ETags or Last-Modified headers for conditional requests
• Test caching behavior using browser DevTools Network tab
• Clear cache and test to verify headers are correctly applied