HTTP & Network Caching

How to Serve Static Assets with an Efficient Cache Policy (Cache-Control & ETags)

A complete HTTP header configuration guide to pass the Lighthouse caching audit and achieve instant repeat-visit load times.

By: ZeroTheShift Infrastructure Team • Published: September 2, 2026 • Read Time: 6 min read

1. Why HTTP Caching Matters for PageSpeed

When a visitor returns to your site or navigates across multiple pages, their browser should never re-download static resources (images, icons, fonts, CSS stylesheets, or JavaScript bundles).

If your web server or CDN omits Cache-Control response headers or sets an expiration time under 30 days, Google Lighthouse triggers the Serve static assets with an efficient cache policy audit.

HTTP Cache-Control Lifecycle - Browser Disk Cache Flow & stale-while-revalidate — Figure 1: HTTP Cache-Control header lifecycle and stale-while-revalidate resolution.

2. The Ideal Cache-Control Strategy

Different asset types require specific caching policies:

1. Fingerprinted / Content-Hashed Assets (CSS, JS, Fonts)

Assets with hashes in their filenames (e.g., app.8f3a1b.js) can be cached forever:

Cache-Control: public, max-age=31536000, immutable

2. Unhashed Static Assets (Images, Favicons, SVGs)

Cache-Control: public, max-age=2592000, stale-while-revalidate=86400

3. Dynamic HTML Documents (index.html)

HTML documents should always check the origin for updates while using ETags:

Cache-Control: no-cache ETag: "65f8a2-3f1"

3. Cloudflare Worker & Server Header Implementation

// Cloudflare Worker custom asset header modifier export default { async fetch(request, env) { const response = await env.ASSETS.fetch(request); const url = new URL(request.url); const newHeaders = new Headers(response.headers); if (url.pathname.match(/\.(svg|png|jpg|webp|avif|woff2|css|js)$/)) { newHeaders.set('Cache-Control', 'public, max-age=31536000, immutable'); } else if (url.pathname.endsWith('.html') || url.pathname === '/') { newHeaders.set('Cache-Control', 'no-cache'); } return new Response(response.body, { status: response.status, headers: newHeaders }); } };

Ready to Eliminate Layout Shifts on Your Website?

Run our free diagnostic engine to detect shifting DOM elements, simulate font metric discrepancies, and generate 1-click CSS patches.

Test Your Website CLS Now

Frequently Asked Questions

What does the immutable directive do in Cache-Control?

immutable tells the browser that the response body will never change over its lifetime, preventing the browser from sending conditional revalidation requests (304 Not Modified) even when the user clicks browser refresh.

What is stale-while-revalidate?

stale-while-revalidate allows the browser to instantly display cached content from local storage while quietly updating the cache in the background for subsequent requests.

Explore More Web Performance & PageSpeed Guides

Read in-depth technical guides written by performance architects to optimize your SEO and Core Web Vitals.

Core Web Vitals Engineering

How to Fix Cumulative Layout Shift (CLS): Complete Diagnostic Guide

A comprehensive engineering guide to diagnosing, benchmarking, and eliminating layout instability to achieve a 100 PageSpeed Insights score.

General Web Performance

The Complete Website Speed Optimization Guide for Beginners & Pros

A comprehensive, accessible roadmap to website speed: why it matters, how browsers load pages, and the top high-impact improvements anyone can make.

Business & SEO Strategy

How Website Speed Directly Impacts Google SEO, Bounce Rates & Conversions

The business and revenue case for web performance: analyzing real-world conversion benchmarks, visitor abandonment psychology, and Google ranking signals.

Beginner Guides & Tooling

How to Read and Understand Google PageSpeed Insights Scores

Demystifying Google PageSpeed Insights: Understanding the difference between Lab Data and Field Data (CrUX), and what your 0-100 score actually means.

General Web Performance

The Ultimate Website Performance Audit Checklist (Step-by-Step)

A practical, non-technical audit checklist to test your hosting, images, scripts, fonts, and plugins before launching or redesigning your site.

Typography & Font Engineering

Fixing Font Metric Mismatch & FOUT with CSS size-adjust & ascent-override

How to calculate exact font metric overrides to eliminate Flash of Unstyled Text layout shifts during custom web font loading.

Responsive CSS Architecture

Why Responsive Units (rem, em, vw, clamp) Trigger Mobile Layout Shifts

How viewport recalculations, fluid clamp() formulas, and OS accessibility font scaling cause downstream layout instability.

Media & Asset Performance

Eliminating Layout Shifts from Unsized Images, Responsive Videos & Dynamic Ads

How to properly reserve DOM container geometry using CSS aspect-ratio, min-height slots, and skeleton placeholders.

Core Web Vitals Strategy

Mastering Core Web Vitals: Optimizing LCP, INP & CLS for Google Rankings

A complete technical roadmap to achieving a 100 PageSpeed score and passing Chrome UX Report (CrUX) field assessments.

PageSpeed Insights Optimization

How to Eliminate Render-Blocking Resources on Google PageSpeed Insights

A step-by-step technical guide to inlining critical CSS, deferring non-critical scripts, and optimizing the browser Critical Rendering Path.

Server & Infrastructure Performance

How to Reduce Server Response Times (TTFB) on Google PageSpeed Insights

A technical blueprint for achieving sub-200ms Time to First Byte with edge compute, HTTP/3, Redis caching, and optimized database queries.

Image & Media Optimization

Serving Next-Gen Images: WebP & AVIF Compression Guide for PageSpeed 100

How to fix the "Serve images in next-gen formats" and "Properly size images" audits with modern responsive markup and automated compression.

JavaScript & CSS Optimization

How to Reduce Unused JavaScript and CSS for Google Lighthouse Audits

Practical techniques to tree-shake bundles, dynamically import ES modules, and purge dead CSS rules to pass PageSpeed checks.

JavaScript Runtime Performance

Minimizing Main-Thread Work and Total Blocking Time (TBT)

How to break up long JavaScript tasks, optimize DOM query selectors, and achieve 0ms Total Blocking Time on mobile devices.

HTTP & Network Caching

How to Serve Static Assets with an Efficient Cache Policy (Cache-Control & ETags)

A complete HTTP header configuration guide to pass the Lighthouse caching audit and achieve instant repeat-visit load times.

SEO & Search Architecture

Google Page Experience & Core Web Vitals: The Official SEO Ranking Signal Breakdown

An exhaustive analysis of how Google evaluates real-world Chrome User Experience Report (CrUX) metrics in search ranking algorithms.

CMS & Platform Optimization

How to Pass Core Web Vitals on WordPress, Shopify & Next.js

Platform-specific optimization strategies to eliminate plugin bloat, optimize Liquid storefronts, and achieve 100 PageSpeed on popular CMS platforms.

DOM & Rendering Engine

How to Fix "Avoid an Excessive DOM Size" on Google PageSpeed Insights

Techniques to flatten deep HTML tree nesting, virtualize large lists, and leverage CSS content-visibility to eliminate memory and style recalc lag.

Core Web Vitals Strategy

How to Optimize Interaction to Next Paint (INP): The Complete 2026 Guide

A masterclass on debugging user interaction latency, eliminating long JavaScript callbacks, and achieving sub-50ms responsiveness.

Typography & Font Engineering

CSS font-display Guide: swap vs optional vs block for Zero CLS & Fast FCP

How to choose the ideal font-display strategy to eliminate Flash of Invisible Text (FOIT) without introducing Cumulative Layout Shift.

Media & Asset Performance

Native Lazy Loading for Images & iFrames: Best Practices for PageSpeed 100

How to properly configure loading="lazy" without breaking Largest Contentful Paint (LCP) or causing below-the-fold layout reflows.

JavaScript Runtime Performance

How to Reduce the Impact of Third-Party Code (Tag Manager, Analytics, Ads)

Proven strategies to isolate third-party trackers, run analytics in Web Workers, and prevent third-party scripts from destroying your INP and TBT scores.

Core Web Vitals Strategy

How to Fix Largest Contentful Paint (LCP): 8 Actionable Strategies for 2026

Diagnose and optimize TTFB, resource load delay, download duration, and element render delay to achieve a sub-1.5s LCP score.

HTTP & Network Caching

Brotli vs Gzip Compression: How Text Compression Boosts PageSpeed

Why modern web servers and CDNs must default to Brotli (br) content encoding to shrink HTML, JavaScript, and CSS by an additional 20%.

HTTP & Network Caching

Resource Hints Masterclass: rel=preload vs preconnect vs dns-prefetch

How to pre-warm DNS, establish early TLS tunnels, and instruct the browser preload scanner to fetch critical assets before the DOM parser arrives.

DOM & Rendering Engine

High-Performance CSS Animations: GPU Compositing with transform & opacity

How to build silky-smooth 60fps and 120fps animations without triggering layout recalculations, main-thread jank, or Cumulative Layout Shift.

JavaScript Runtime Performance

Service Workers & PWA Offline Caching: The Ultimate Speed Architecture

How to intercept network requests, serve instant 0ms cached responses, and achieve 100/100 Progressive Web App performance.

DOM & Rendering Engine

Speculation Rules API: Instant Navigation with 0ms Pre-rendering

How Chrome and modern browsers use speculative prerendering to download, parse, and render subsequent pages in background sandboxes before the user even clicks.

SEO & Search Architecture

Structured Data & Schema.org: How Rich Snippets Drive Organic Click-Through Rates

A practical JSON-LD structured data guide to win Google SERP rich results, FAQ accordions, star ratings, and increase organic CTR by 200%.

HTTP & Network Caching

HTTP/3 & QUIC Protocol: The Future of Zero-RTT Web Performance

How UDP-based QUIC eliminates TCP Head-of-Line blocking, enables 0-RTT handshakes, and dramatically improves mobile Core Web Vitals.

DOM & Rendering Engine

Optimizing the Critical Rendering Path: Critical CSS Extraction & Zero-FCP Latency

How to extract above-the-fold CSS styles, inline them into the initial 14KB TCP window, and achieve instant First Contentful Paint.

SEO & Search Architecture

Mobile-First Indexing & Core Web Vitals: Why Google Tests on 4G Moto G4

Understanding Googlebot smartphone crawling, 4x CPU throttling, and why passing desktop audits is not enough to rank in search results.

JavaScript Runtime Performance

Web Workers Masterclass: Offloading Heavy JavaScript from the Main Thread

How to move CPU-intensive tasks (data parsing, cryptography, sorting, and image processing) to background worker threads for sub-30ms INP.

Media & Asset Performance

HTML Responsive Images Guide: Mastering srcset, sizes & picture Elements

How to construct modern responsive markup that serves the smallest possible image variant to every mobile, tablet, and 4K desktop display.

Core Web Vitals Strategy

How to Eliminate Layout Shifts from Google AdSense & Dynamic Banner Ads

Proven CSS container bounding techniques to prevent dynamic programmatic ads from shifting editorial content and failing Core Web Vitals.

SEO & Search Architecture

Canonical Tags & Duplicate Content: The Complete Technical SEO Blueprint

How to consolidate URL parameters, preserve crawl budget, and focus 100% of link equity on your primary ranking pages.