HTTP Cache & Service Workers: Strategies for an Ultra-Fast Website

Why Caching Is the Single Biggest Performance Win

If your website takes more than 3 seconds to load, you lose roughly 53% of mobile visitors (Google data). The fastest way to fix that isn’t a bigger server — it’s smarter caching.

Two technologies sit at the core of modern caching strategy: HTTP cache headers and Service Workers. Used independently, each is powerful. Combined, they can make your site feel almost instant — even on flaky connections.

HTTP Cache: The Foundation

HTTP caching is handled entirely through response headers. When configured correctly, the browser stores assets locally and skips network requests altogether on repeat visits.

Key Headers You Need to Know

• Cache-Control — The master directive. Example: Cache-Control: public, max-age=31536000, immutable tells the browser to cache the file for one year and never revalidate.
• ETag — A fingerprint of the resource. The browser sends it back on the next request; if the file hasn’t changed, the server responds with a 304 Not Modified — saving bandwidth.
• Vary — Tells caches which request headers affect the response (e.g., Vary: Accept-Encoding).

A Practical Header Strategy

Asset Type	Cache-Control	Why
Versioned JS/CSS (e.g., app.3f8a2c.js)	public, max-age=31536000, immutable	Filename changes on every build, so long TTL is safe
HTML pages	no-cache	Always revalidate to serve fresh content
Images & fonts	public, max-age=604800	One-week cache; good balance of speed and freshness
API responses	private, max-age=0, must-revalidate	Prevent shared caches from storing user-specific data

With this setup alone, repeat-visit load times typically drop by 60–80%.

Service Workers: The Programmable Layer

A Service Worker is a JavaScript file that sits between your page and the network. It intercepts every fetch request, giving you full control over what gets cached, when, and for how long.

Common Caching Strategies

• Cache-First — Check the cache before hitting the network. Ideal for static assets. Result: near-zero latency.
• Network-First — Try the network, fall back to cache. Perfect for API calls and dynamic HTML.
• Stale-While-Revalidate — Serve from cache immediately, then update the cache in the background. The best of both worlds for content that changes moderately.

Quick Code Example (Stale-While-Revalidate)

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open('dynamic-v1').then((cache) => {
      return cache.match(event.request).then((cachedResponse) => {
        const networkFetch = fetch(event.request).then((networkResponse) => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return cachedResponse || networkFetch;
      });
    })
  );
});

This pattern is what makes sites feel app-like — content appears instantly while fresh data loads silently behind the scenes.

Combining Both Layers: The Optimal Architecture

Here’s where the real magic happens. Think of it as a three-tier waterfall:

1. HTTP cache intercepts the request first. If a valid cached response exists, the browser never even wakes the Service Worker.
2. Service Worker cache handles requests that bypass HTTP cache (e.g., no-cache HTML pages) and applies custom logic.
3. Network is the last resort.

Pitfalls to Avoid

• Double caching with conflicting TTLs. If your HTTP cache stores a file for 1 year but your Service Worker always fetches from the network, you waste the programmatic layer. Align the two.
• Forgetting cache busting. Without versioned filenames, immutable headers will serve outdated code. Use content hashes in your build pipeline.
• Caching too aggressively in development. Always use Clear-Site-Data headers or a kill-switch route to purge caches during QA.

At Lueur Externe, our team routinely implements this layered approach for e-commerce clients on Prestashop and WordPress — reducing Time to Interactive by 40–60% on average.

Measuring the Impact

After deploying both layers, verify your results:

• Lighthouse Performance score — Aim for 90+.
• Cache Hit Ratio — Check via your CDN dashboard or chrome://net-internals. Target above 85%.
• Time to First Byte (TTFB) — With cache hits, this should be under 50 ms.

Conclusion: Speed Is a Strategy, Not an Accident

HTTP caching lays the groundwork. Service Workers add intelligence. Together, they deliver the kind of speed that improves Core Web Vitals, boosts SEO rankings, and — most importantly — keeps visitors engaged.

Getting the configuration right requires understanding both the browser’s caching model and your specific content architecture. If you’d rather have experts handle it, Lueur Externe has been optimizing web performance since 2003 — from fine-tuned cache policies to full AWS infrastructure. Let’s talk about making your site faster →