To take advantage of the browser cache, we essentially need to let the browser know when the files it has just collected expire, so that by that date it keeps them and will not collect new ones.
This information can be passed from the server to the browser in some ways. Below is an example using the file .htaccess
Apache, example using function header()
PHP and example using META
tag in HTML:
Apache
Creating a file with the name .htaccess
at the root of our project or in a folder and/or sub-folder where we have certain elements that we want to control, we can define the validity period of the files sent to the browser using the module mod_expires
(English):
Example
# enable expirations
ExpiresActive On
ExpiresDefault "access plus 3 months"
ExpiresByType image/gif "access plus 3 months"
ExpiresByType image/png "access plus 3 months"
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType image/pjpeg "access plus 3 months"
ExpiresByType text/javascript "modification plus 3 months"
ExpiresByType application/javascript "modification plus 3 months"
ExpiresByType text/css "modification plus 3 months"
In the example above we are indicating for each type of file what its validity is, IE, how long the browser should cache them.
access plus 3 months
From the access to the file, save for 3 months
modification plus 3 months
From the date of modification, keep for 3 months
PHP
Via PHP we can make use of the function header()
to make the browser aware of when to consider the file as expired:
// A partir das 5h da manhã do dia 20-07-2020 o navegador deve puxar nova cópia
header("Expires: Sat, 26 Jul 2020 05:00:00 GMT");
Or we can also:
// Ficheiro expira em 30 dias (60sec * 60min * 24horas * 30dias)
header("Cache-Control: max-age=2592000");
Anything sent to the browser via PHP should have appropriate headers for cache control in order to optimize the page download time when we talk about content that changes very sporadically.
HTML
With HTML we can also set a meta tag to tell the browser when the page expires, see specifications here (English):
<!-- Não fazer cache -->
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
The accepted values are:
- Public - can be stored in public cache
- Private - can only be cached in private
- no-Cache - cannot be cached
- no-Store - can be cached, but cannot be archived
Summary
Cache via Apache is useful for controlling when documents like images, PDF, CSS, JS, etc expire...
Caching via PHP and HTML is particularly useful for controlling when a page whose content is static for a given time, dynamic but only changed from X to X time expires or defining content that should never be cached.
Of course this can also be accomplished via Apache as explained above.
Note: This answer aims to shed light on the cache control and some ways at our disposal. There are too many topics and techniques about cache control that can be used for specific purposes, but here’s an introduction.
Note that it is not possible to control the cache of external files (e.g. https://platform.twitter.com/widgets.js)
– SandroMarques