Repeat visitors shouldn't re-download your logo: Cache-Control headers for small-business sites in 10 minutes
Every time someone opens your site a second time, their browser asks: "do I still have a good copy of this logo, this CSS, this font?" If your server never answers that question, the browser plays safe and downloads everything again. On a small-business site with a big hero photo and a couple of web fonts, that's often 1–3 MB per visit wasted, and it's the people on slow mobile data who feel it…
When visitors return to your site, their browser checks if it still has the latest version of your logo, CSS, and fonts. Without a response from your server, the browser downloads everything again, wasting up to 1-3 MB of bandwidth per visit, especially for those on slow mobile connections. The solution is a single HTTP header: Cache-Control.
1. Inspect your current settings by opening your site in a browser, then using DevTools' Network panel to reload the page, select your logo or main CSS file, and view the Response Headers. Alternatively, use the command "curl -sI https://yoursite.com/images/logo.png | grep -i -E cache-control|expires|etag" in a terminal. If there's no Cache-Control or it's set to max-age=0 for images and fonts, repeat visitors will re-download them.
2. Set the following rules for different file types:
- HTML pages: use "Cache-Control: no-cache" to ensure updates are immediately reflected.
- Images, fonts, CSS, and JS that rarely change: use "Cache-Control: public, max-age=31536000, immutable" only if the file name changes when the file updates (e.g., style.3f9a1c.css).
- Static files without versioned names (e.g., logo.png): use "Cache-Control: public, max-age=604800" (7 days).
3. Implement the configurations in your web server:
- Apache (.htaccess): Configure rules for image extensions and HTML files as specified.
- Nginx: Use the "location ~ * .(png|jpe?g|webp|svg|woff2|ico) $" directive to set Cache-Control headers.
- Netlify: Add a _headers file in your publish folder with the appropriate Cache-Control settings.
- Vercel: Define the headers in your vercel.json file as shown.
- WordPress: Use a caching plugin that automatically generates the necessary Apache rules.
4. Verify the changes by reloading the page twice. On the second load, you should see (memory cache) or (disk cache) for images and fonts in DevTools, instead of download sizes.
Avoid setting an immutable cache of one year on files that you'll later overwrite with the same name, as this will prevent visitors from receiving the updated version. With this 10-minute configuration, repeat visitors will experience faster load times on your site.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
