Minify CSS, JavaScript, and HTML files to shrink their sizes before delivery. Tools such as UglifyJS, CSSNano, and HTMLMinifier remove whitespace, comments, and redundant code while preserving functionality. This process cuts file sizes by 30 to 70 percent, directly lowering the bytes transferred over the network and accelerating parse times in browsers. Combine minification with build pipelines in Webpack or Vite so every deployment ships optimized assets without manual intervention.
Enable Gzip or Brotli compression on the server. Brotli typically delivers 15 to 25 percent better compression ratios than Gzip for text-based resources. Configure Nginx or Apache to serve pre-compressed .br or .gz files, and verify results with the Network tab in Chrome DevTools. Smaller payloads mean faster downloads, especially on mobile networks where latency dominates total load time.
Convert images to modern formats such as WebP or AVIF. These codecs reduce file sizes by 25 to 50 percent compared with JPEG or PNG at equivalent visual quality. Generate multiple resolutions using srcset attributes so devices receive appropriately sized files. Automate conversion with ImageMagick or Cloudinary during upload workflows to maintain consistency across the site.
Implement lazy loading for images and iframes positioned below the fold. Add the loading=”lazy” attribute or use Intersection Observer in JavaScript to defer loading until the element enters the viewport. This technique prevents unnecessary bandwidth consumption on initial page views and improves Largest Contentful Paint scores. Test across viewports to ensure above-the-fold images still load immediately.
Serve JavaScript with async or defer attributes. Async downloads scripts in parallel and executes them as soon as they finish, while defer guarantees execution order after HTML parsing completes. Identify non-critical scripts such as analytics or chat widgets and mark them accordingly. This prevents render-blocking and keeps the main thread responsive during the critical rendering path.
Bundle and tree-shake modules to eliminate unused code. Modern bundlers analyze import statements and remove dead code, often shrinking JavaScript payloads by 40 percent or more. Split bundles by route using dynamic imports so users download only the code required for the current page. Monitor bundle sizes with source-map-explorer to catch regressions early.
Leverage a Content Delivery Network to cache static assets at edge locations worldwide. CDNs reduce round-trip times by serving files from servers geographically close to visitors. Configure cache headers with long TTLs for immutable resources and shorter ones for HTML. Combine CDN caching with service workers for offline-first experiences that further boost perceived performance.
Apply browser caching through Cache-Control and ETag headers. Set max-age values of one year for versioned assets and use cache-busting filenames when updates occur. This ensures repeat visitors avoid re-downloading unchanged files, cutting subsequent page loads to sub-second times. Validate cache effectiveness with tools such as WebPageTest.
Extract and inline critical CSS for above-the-fold content. Analyze the initial viewport with tools like Critical or Penthouse, then insert only the necessary styles directly into the HTML head. Load the remaining stylesheet asynchronously. This approach eliminates render-blocking CSS and delivers meaningful content within the first 14 kilobytes, satisfying mobile network constraints.
Preload key resources using link rel=”preload” tags for fonts, hero images, and primary scripts. Specify as=”font” or as=”image” to hint at resource type and enable early fetching. Combine preload with prefetch for likely next-page navigation assets. Overuse can waste bandwidth, so prioritize only the highest-impact files identified through performance budgets.
Adopt HTTP/2 or HTTP/3 to enable multiplexing and header compression. These protocols allow multiple requests over a single connection without head-of-line blocking. Upgrade servers and ensure TLS is enabled, as HTTP/2 requires encryption. The reduced overhead accelerates sites with dozens of small assets that previously suffered from connection limits.
Monitor performance continuously with Lighthouse, Web Vitals, and Real User Monitoring. Track metrics such as Time to Interactive and Total Blocking Time after each optimization. Set automated alerts when thresholds are exceeded and iterate based on field data rather than lab tests alone. Regular audits reveal new bottlenecks introduced by third-party scripts or content updates.
Prioritize resource hints such as dns-prefetch and preconnect for external domains. These hints establish early connections to CDNs, fonts, or APIs, trimming hundreds of milliseconds from the waterfall. Limit the number of unique domains to reduce DNS lookup overhead and connection setup costs. Audit third-party scripts regularly and replace heavy libraries with lighter alternatives whenever possible.