Leverage Browser Caching

Method Type: User
(This means that the method is handled by the user or by enabling the Apache mod_expires module in the .htaccess file)

Status: Must be applied/enabled by the user.

Introduction:

When a user accesses a webpage, he has to download all of the files on that page via his web browser in order to get a proper render of the page. This can be troublesome when you have a lot of elements on that page or some of the elements are oversized.

How browser caching works:

Browser caching lets the user's web browser to keep some of the information about the page for a predefined amount of time. The next instance when the user loads the same page, he will not have to load the elements that are already in his browser's cache. Of course you cannot make the user to cache everything on your website or to cache it forever. There are dynamic files that need very short or no caching at all. Static content like website background images or the website logo are files that will most likely not change more than a few times in the website's lifespan. You can configure those files to cache on the user's browser for a very long time (1 year).

Browser caching provides the following Advantages:

• Reduced page loading times
• Less bandwidth used if many users have cached your content

How to set Expires HTTP headers:

The mod_expires module controls the settings of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header when being called by HTTP requests. For example:

If you wish to set the caching time for the file extensions (|jpeg|png|gif|js|css|swf|ico|woff|mp3) to 10 days after they have been accessed you will need to add to your .htaccess file the following code block:

<ifmodule mod_expires.c>
<Filesmatch "\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$">
    ExpiresActive on
    ExpiresDefault "access plus 10 days"
</Filesmatch>
</ifmodule>

If you want to change only 1 type of files, let us say the images on your website to cache for exactly 4 months and 2 days after being accessed you will need to add to your .htaccess file:

<ifmodule mod_expires.c>
ExpiresByType image/png "access plus 4 months 2 days"
</ifmodule>

You can use these parameters when setting up the Expires header:

• y - years
• mo - months
• w - weeks
• d - days
• h - hours
• mi - minutes
• s - second