Best practices for cache control settings for your website


How does the cache work behind the scenes?

Your browser, on each request to the website/resource, tries to load as little data as possible by reading cached information from local memory. This is only possible we provide enough instructions for the browser, to explain what resources it needs to keep and for how long.

Requests flow with no cache settings

Requests flow with Etag — 1st load
Requests flow with Etag — 2nd load

Requests flow with Last-Modified — 1st load
Requests flow with Last-Modified — 2nd load (Perfect Scenario)
Requests flow with Last-Modified — 2nd load (Common case)



Final settings

  • Use Gulp, Webpack, or similar to add unique hash digits to your css, js, and image files (like app-67ce7f3483.css);
  • For js,css, and image files, set Cache-Control: public, max-age=31536000, no Etag, no Last-Modified settings.
  • For html files, use Cache-Control: no-cache, and Etag.

Pixel Point

Get your own full-time, dedicated team of professionals for your startup. Save your budget, time, and nerves by launching your project with Pixel Point

Alex Barashkov

Written by

Co-Founder, Product Strategy and Developer at Pixel Point

Pixel Point

Get your own full-time, dedicated team of professionals for your startup. Save your budget, time, and nerves by launching your project with Pixel Point