Website Optimization - How To Leverage Browser Caching


Website Optimization - How To Leverage Browser Caching

August 12, 2013 9:00 AM

By: Rutledge Daugette


Whether you are using a Wordpress Site, or something else, if your site is running off of an Apache server, then the .htaccess file is incredibly important to the health and speed of your site. If you change the .htaccess cache timers, you will both speed up your site and increase your PageSpeed score with Google, increasing your ranking when searches are performed. Here's how to leverage browser caching:





Things to note before editing your .htaccess file


  • .htaccess has the ability to lock you out of your domain (including FTP and cPanel) so be careful of the changes you make.
  • When editing your .htaccess it is recommended to disable word wrap. This prevents odd behavior when the file is being read.
  • Avoid duplicate code (code doing the same thing twice), to prevent loops occurring that would affect your visitors!
  • Once you open your .htaccess file then there will be some code already present in it. Do not touch this part of code as it is the default that is required by permalink structures. Removal will cause major issues with your website.
Step 1: Run a PageSpeed Analysis on your site

You should first run a PageSpeed Analysis to make sure you don't have any other issues that you should resolve as well. (We'll be covering some of these in later posts) Make sure to pay attention to your score, scores higher than 85 will be indexed much higher than a 70 or below.

Step 2: Log into your website's cpanel

Whatever hosting provider you have (or if you do it yourself!), you need to log into your CPanel and go into your File Manager.


Step 3: Back up your .htaccess file

Any work you do with files within your CPanel should ALWAYS be backed up for security reasons. If something goes wrong, you don't want to have to start from scratch! Under your Manager, select your root folder, highlight your .htaccess file, and download it.

Step 4: Edit your .htaccess file

This might seem like the hard part, but it's actually incredibly simple and easy to do. Under your Manager, select your root folder, highlight your .htaccess file and "edit" it. Find a blank spot (usually at the bottom), and insert the following code:

<FilesMatch ".(ico|pdf|jpg|jpeg|png|gif|html|htm|xml|txt|xsl)$">
Header set Cache-Control "max-age=31536050"

 What that does: By inputting the code above, you have set all files (PDF, image, webpage, etc) to expire in peoples' browsers after 1 year and 50 seconds. If a file is updated, then that will reset the next someone views it on the site. Now, some places will give you code that is separated into files with one expiration and images with another. That's okay to do, but it is recommended to do it this way because the fewer lines of code in your .htaccess, the faster it is (and the more Google likes you!).



To see a video on how to edit your .htaccess file, view our YouTube video!

Step 5: Wait 15 minutes, then run another PageSpeed Analysis

Your second PageSpeed Analysis should yield a significantly higher score. In Tech Raptor's Case, the score jumped 9 points!


That's it for leveraging browser caching with your .htaccess file! Stay tuned for more website/Wordpress optimization techniques!