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.

The point of using browser caching and expiry headers is to shrink the number of HTTP requests, which improves the performance for your returning visitors.

The first time someone visits your site, their browser will fetch all your images, css files, javascript files, etc. Normally that happens every time the same visitor comes back to your site.

With Expires headers you tell your website visitor’s browser that the files you stipulate are not changing until after a certain time, for example a month.

This means that the browser doesn\’t have to to re-fetch images, css, javascript etc every time your visitor comes back to your site.

Finding and Modifying .htaccess

You can access your .htaccess file through cPanel by clicking on the File Manager. When the popup box appears, click on the Web Root option and make sure that the “Show hidden files” option is checked. If you are using any FTP software, go to /public_html if the site hosted in root.

The code below tells browsers what to cache and how long to “remember” it. It should be added to the top of your .htaccess file.

Pasting in the Directives to Leverage Browser Caching

Open up your .htaccess file and paste in the following directives at the top of the file:[/vc_column_text][vc_column_text][gist id=773e8a954b56ccedada4][/vc_column_text][vc_column_text]

Save the .htaccess file and then refresh your webpage.

How to set different caching times for different file types

You can see in the above code that there are time periods like “1 year” or “1 month”. These are related with file types, as an example the above code states that a .jpg file (image) should be cached for a year. If you want to change that and say you want them only cached for a month you would simply replace “1 year” with “1 month”. The values above are pretty optimized for most web pages and blogs build on top of wordpress.

Recommendations

Be aggressive with your caching for all static resources

Expiry at a minimum of one month (recommended: access plus 1 year)

Don\’t set your caching more than a year in advance!

You want to be cautious when enabling browser caching as if you set the parameters too long on certain files, users might not be getting the fresh version of your website after updates.

[/vc_column_text][vc_message color=”alert-warning” style=”rounded”]You want to be cautious when enabling browser caching as if you set the parameters too long on certain files, users might not be getting the fresh version of your website after updates.[/vc_message][/vc_column][/vc_row]