Make repeat visits instant — cache assets with Cache-Control, fingerprint files, use a CDN, and cache with a Service Worker.
Why: the fastest file is one the browser never has to download again. Caching stores files locally so repeat visits (and page-to-page navigation) are near-instant. Note: "caching" just means keeping a copy so you don’t fetch it twice.
Why: a Cache-Control header tells the browser how long it may reuse a file. Long-lived, unchanging files (your CSS/JS bundles, images) can be cached for a year. "immutable" promises the file will never change, so the browser won’t even re-check. Note: this is set on your server or CDN, not in your code.
# Static, fingerprinted assets — cache for a year, never re-check:
Cache-Control: public, max-age=31536000, immutable
# HTML that can change — always re-check before using:
Cache-Control: no-cacheWhy: a CDN (Content Delivery Network) stores copies of your files in data centers around the world and serves each user from the nearest one — so a file travels a short distance instead of across the planet. Note: most hosting platforms put your site on a CDN automatically.
Why: a Service Worker is a script that sits between your page and the network, letting you serve files from a cache you control — even offline. This is advanced; a basic "cache these files on install" is plenty to start. Note: it only runs on HTTPS (localhost counts).
// sw.js — cache key files when the worker installs
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) =>
cache.addAll(['/', '/styles.css', '/app.js'])
)
)
})
// Register it once from your page:
// navigator.serviceWorker.register('/sw.js')