cache control vs expires headers & if modified since
cache control newer version of expires header.
expires max;
set expiration date to 1984
max expiry date 1 year 365 days 3153600 seconds
Cache-Control: max-age=31536000
304 Not Modified if modified since
(Browser requests to validate the browser cache with server this will done by 304 not modified)
Cache-Control: max-age: 31536000, immutable
immutable not to check server on refresh. een with etag or last modified hash key.
chrome don’t support it, but firefox. Introduced it.
expires header; for older browsers for fallback mechanism.
if modified since helps to provide 304 not modified request when browser requests the server to validate cached resources.
also the googlebot uses it to determine crawl frequency. To reduce load on server by Google bot. example: GoDaddy blocks Googlebot by limiting frequency /rate limiting.
you could see errors in search console.
Cache control headers directives Meaning
Cache-Control: s-maxage=31536000, max-age=86400
s-maxage for CDN & proxies
max-age Remaining for browser.
public stored by proxy and browser
Private stores only by browser, not cdns/proxy.
no-cache: revalidate cache every time
no-store: don’t store cache browser proxy
no-transform: don’t rewrite css ex: chrome lite pages
must-revalidate: once cace become stale, has to verify from server.
immutable: explicitly saying don’t need to check server only firefox supports.
max-age=0 equals to no store
http cache-control header examples Best practices for html & js Css
Html
cache-control no-cache no-store
nginx
Add_header cache-control “no-cache, no-store”;
add_header Cache-Control “s-maxage=864000, max-age=0”;
CDN Server ache validity and browser cache validity 0 seconds means no store.
for html it needs sere from the server. (because no user can read same html page with same content multiple times, even if you updated browser or proxy /cdn seres old page because its expiry set to high.)
2nd reason: browser cache storage space & its validity on users local hard disk. ( most browsers overrides the data if cache limits the space / storage).
Firefox has option to maximum browser cache space, 1GB. chrome it automatically uses available space.
for CSS .JS. Image you can set upto maximum 1 year.
Add cache control header htaccess apache
<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>
Header set Cache-Control “max-age=31536000, public”
</filesMatch>
Header set Cache-Control “max-age=31536000, public”
</filesMatch>
Add cache control header in Nginx
location block for static
add_header Cache-Control: s-maxage=31536000, max-age=31536000;
location block html/text
add_header Cache-Control “s-maxage=31536000, max-age=86400”;
//1 hour
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$
{ expires 15d;
add_header Cache-Control max-age=31536000, “public, no-transform”;}
location ~* \.(text|css|html)$
{ expires 4h;
add_header Cache-Control: s-maxage=31536000, max-age=86400;
}
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires max;
}
Cache control header for html files
wordpress content type html text not ends with .html
add_header Cache-Control “s-maxage=31536000, max-age=86400”;
location ~ /wp-content/cache/.*html$ {
etag on;
add_header Vary “Accept-Encoding, Cookie”;
add_header Cache-Control “no-cache, no-store, must-revalidate”;}
etag on;
add_header Vary “Accept-Encoding, Cookie”;
add_header Cache-Control “no-cache, no-store, must-revalidate”;}
1 hour for browser 10 hours for proxy /cdn
add_header Cache-Control “s-maxage=864000, max-age=86400”;
cloudflare respects cache control headers
1 year maximum supported date by protocol.
Last-Modified header
automatically generated by servers like nginx, You can disable by empty add headers. it’s up stream server responsibility to provide last modified time.
like $upstream_cache_status.
use php to add last modified header. through fastcgi.
for files from it will adds last modified time. Ex: css.js
Remove Expires: Thu, 19 Nov 1981 PHP Header Nginx, Apache, Whatever with root Access
1 year = 525600 minutes
session.cache_limiter = public, max-age=nocache
session.cache_expire = 180
replace with below
session.cache_limiter = public, max-age = 525600
session.cache_expire = 525600
session.cache_expire = 525600
Why it’s important to add cache control header?
to save bandwidth, cpu resources, Faster loading from user local storage.
to indicate proxy servers like cdn.
to communicate with proxy servers load balancing.
tools to check server /website performance.
gtmetrix, pagespeed insights, lighthouse, webpagespeedtest.org.
request headers
if modified since, if none match