Improving the functionality and speed of your website is always a priority at Flying Change. One of the easiest ways to accomplish this is to leverage browser caching.
What is browser caching?
Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, javascript and images.
Some pages might only consist of a few files and be small in size – maybe a couple of kilobytes. For others however there may be a lot of files, and these may add up to be several megabytes large. This create two (2) potential problems.
- These large files take longer to load and can be especially painful if you’re on a slow internet connection (or a mobile device).
- Each file makes a separate request to the server. The more requests your server gets simultaneously the more work it needs to do, only further reducing your page speed.
How does browser caching help?
Browser caching can help by storing some of these files locally in the user’s browser. Their first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally. This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server.
The result? Decreased page load times.
How does it work?
Browser caching works by marking certain pages, or parts of pages, as being needed to be updated at different intervals. Your logo on your website, for instance, is not likely to change very often. By caching this logo image, we can tell the user’s browser to only download this image once a week. Every visit that a user makes within a week would not require another download of the logo image.
By the web server telling the browser to store these files and not download them when you come back saves your users time and your web server bandwidth.
Why is it important?
The main reason why browser caching is important is because it reduces the load on the web server, which ultimately reducing the load time for your users.
How to leverage browser caching
In order to do this, we will need to modify the .htaccess file and add in the appropriate directives (code). Flying Change does this for you using your website’s control panel (cpanel).
Open up your .htaccess file and add the following bit of code:
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule> ## EXPIRES CACHING ##
Depending on your websites files, different expire dates can be set. If some file types are updated more frequently, you can set an earlier time.
Be cautious!
You want to be careful when enabling browser caching as if you set the parameters too long, users might not be getting the fresh version of your website after updates.
Thanks to GTmetrix the “website health” tools they provide.
Leave a Reply