This guide shows how to correctly configure the header expiration settings with Apache, optimizing the performance of the web server in serving static files, such as images, CSS or JavaScript files.
A lot of bandwidth on your server will be saved, by setting a minimum date for caching file. As a result, by using the client browser cache, hosted websites will load faster.
First, connect to your server via an SSH connection. If you haven’t done so yet, following our guide is recommended to connect securely with SSH. In case of a local server, go to the next step and open the terminal of your server.
Enabling the necessary modules
To enable the sending of the necessary Headers, first enable the related Apache module:
And then restart the service:
$ sudo service apache2 restart
Module configuration
The module configuration can be inserted in the following :
-
In Apache configuration: it will be inherited by all the sites controlled by Apache (virtual and non-virtual hosts)
-
In a virtual host container
-
Within the <Directory> directive or .htaccess file
In the following example, it is inserted in the default site configuration:
$ sudo vim /etc/apache2/sites-available/000-default.conf
Then add the following configuration:
<IfModule mod_expires.c>
<FilesMatch "\.(jpe?g|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 1 week"
</FilesMatch>
</IfModule>
Through the FilesMatch directive which files should be kept by the client browser (in this case css, jpg, png, gif and js) are being specified.hile, through ExpiresDefault, how long they should be kept (in this example, a week) for is being indicated.
To apply the changes, restart Apache:
$ sudo service apache2 restart
In addition to FilesMatch and ExpiresDefault method, ExpiresByType can be used to set the Header Expires for every type of file, for example:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpg "access plus 60 days"
ExpiresByType image/png "access plus 60 days"
ExpiresByType image/gif "access plus 60 days"
ExpiresByType image/jpeg "access plus 60 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/javascript "access plus 1 week"
</IfModule>
By using this method, a more granular control over the duration of the cache can be obtained and the caching of Ajax data, by not inserting the mime-type application/javascript can be obtained.
For both directives, the syntax for indicating the duration of the cache is the same, that is to say:
“[base] plus [valore] [tipo] [valore] [tipo] [valore] [tipo] …”
The base value can be:
While the type can have the following values:
-
years: years
-
months: months
-
weeks: weeks
-
days: days
-
hours: hours
-
minutes: minutes
-
seconds: seconds
Some examples of configuration are:
# One year cache expiry
ExpiresByType image/jpeg "access plus 1 year"
#Furthermore, more than one unit of measurement in sequence can be added. For example:
# Set 1-month, 15- day and 2-hour expiry
ExpiresByType text/html "access plus 1 month 15 days 2 hours"
# Cache expiry from the file modification date more than 5 hours and 3 minutes
ExpiresByType image/gif "modification plus 5 hours 3 minutes"
Please, remember that if you have to change the content of a cached file, the latter will not be downloaded by the clients until the caching time expires. This could cause malfunctions on your websites.
Although clients cannot be forced to ignore the previously saved cache, several techniques can be used to avoid this problem.
A method often used is to rename the just modified file (for example from style.css to style-v2.css) or change the links by adding a version number, for example from:
<script src="https://www.domain.com/js/myScript1.js"></script>
to the following:
<script src="https://www.domain.com/js/myScript1.js?v=3.1"></script>