Today we’re going to talk about two necessary settings in our Apache server which will make Google and other speed testers like GMetrix like us a bit more. I’m talking about implementing browser cache and enabling compression of sent content. These settings, besides improving performance on their own, are important for plugins such as W3 Total Cache to work properly.
This is how Google evaluates our server without these settings:
In order to take on this task we need to turn on the following modules within our Apache server:
mod_expires, mod_header y mod_deflate. Let’s get to it.
First we enable it from our SSH console:
sudo a2enmod headers expires deflate
We’ll be informed if any of them was enabled already and, if necessary, we’ll be given instructions to restart the server.
sudo service apache2 restart
Let’s briefly go over the functions of each module:
- mod_headers: This module allows the server to sent the necessary HTTP headers to configure content cache.
- mod_expires: This module allows defining for how long the browser stores downloaded content in its cache.
- mod_deflate: This module enables compression of sent content.
mod_expires configuration
- Globally for every file
Add the following lines to the .htaccess file
ExpiresActive on
ExpiresDefault "access plus 1 week" - Different storage times for each type of file
We’ve got two options: sort files by name, in which case the configuration would look something like this:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresActive On
ExpiresDefault "access plus 1 day 12 hours"
</filesMatch>The other optionois to specify the file type, in which case we’ll add the following lines:
ExpiresActive On
ExpiresByType images/jpeg "modification plus 30 days"
ExpiresByType images/jpg "modification plus 30 days"
In this case we’re ordering the storage deadline to start counting from the day of creation, rather than from the day of download.
As we can see in the examplese, the syntax is simple
<content> “<base> [plus] {<num> <type>}*”
Where:
- content ⇔ content type,
- base ⇔ can be now or access (if we count days since download date) or modification (if we count since the last file modification)
- [plus] {<num> <type>} ⇔ plus is optional, but it makes the expression easier to read, num is a whole number and type is one of the following: years, months, weeks, hours, minutes, seconds. We can link together as many as we need
Let’s look at an usual example of the use of these directories:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 week"
ExpiresByType text/cache-manifest "access plus 90 seconds"
ExpiresByType text/html "access plus 90 seconds"
ExpiresByType text/xml "access plus 90 seconds"
ExpiresByType application/xml "access plus 90 seconds"
ExpiresByType application/json "access plus 90 seconds"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType image/x-icon "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
Add these lines to our .htaccess and our server will send the correct headers to cache its contents.
mod_deflate configuration
Every modern browser accepts compressed content, so by enabling this setting we will reduce the size of the information sent, making our webpage load quicker. This setting is useful for texts, since images and other multimedia content use compressing formats which makes further compressing pointless. The lines we are to add are:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
If we analyse our webpage with PageSpeed, we’ll notice an increase to our overall score.
