Browser Caching

From wiki.mikejung.biz
Jump to: navigation, search

Liquidweb 728x90.jpg

Browser Caching Overview

Browser caching is one of the best things you can do to help improve the performance of your website and server. Apache is able to add / modify headers for files and set the amount of time that the file should be cached for in the end user's browser. If you visit a website that utilizes browser caching then your browser will store content that is marked with headers that tell it to cache the object.

Chrome, FireFox, and Internet Explorer all support caching, and it's a very common thing to do in this day and age. I strongly suggest caching images, movies, css, html, and javascript whenever possible. Doing this not only saves bandwidth, it also reduces the amount of round trips that the browser and server take to send all their data to one another.

If you don't enable browser caching and you have say, 10 x 1MB images on your website, every time that page gets loaded your server is going to send out 10MB of images, even if the same person viewed the page 10 times in a row. This is a huge waste of bandwidth and resources. If you were to enable browser caching, the initial page view would be 10MB in size, but if that same person and same browser re-visits the site 1 minute later, all 10MB of those images should still be cached in the browser, so the next 9 page views cost your server almost nothing in terms of bandwidth.

.htaccess Configuration

mod_expires

If you are using Apache 2.2 or newer, you can enable browser caching for most common file types by dropping this block of code into your website's .htaccess file. This mod_expires configuration should work just fine for WordPress, Joomla, Drupal, even MediaWiki should work ok with these types and cache duration. You can enable mod_expires for a single website, or use different settings for multiple websites by adding a .htaccess file under each user's www/. Additionally, you can enable this server wide by adding this to the main httpd.conf file. Doing this will ensure that browser caching is enabled for every site on the server, even if a new account is made without a .htaccess file, expires should still be working if it's enabled in the main httpd.conf.

vim /$path/to/your/.htaccess
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

You can also add this ifmodule to your website's vhost configuration file instead of adding it to .htaccess. Either way is fine, but some people prefer not to use .htaccess and just throw all the configuration options inside the main httpd.conf file, or vhost.

By using these settings you should get an "A" for browser caching if you test your site with WebPageTest or with GTmetrix

For further reading about this specific mod_expires configuration -- http://www.feedthebot.com/pagespeed/leverage-browser-caching.html

cPanel Server Wide Browser Caching using Include Editor

If you want to enable Browser Caching for every cPanel account in a server you can do so by adding mod_expires directives to a single includes file which Apache will use for every website it serves requests for. This method makes it a lot easier to ensure that Browser Caching is enforced by all current sites, as well as new ones in the future.

To enable Browser Caching in WHM, login as root, then go to Apache Configuration which is located on the left hand side of WHM, under the "Service Configuration" group. Once you are at the Apache Configuration page there should be a blue link called Include Editor. Click on Include Editor.

How to use cpanel include editor whm.png

There are three main sections where you can place directives. Make sure that you select the correct version of Apache, if you choose the wrong version then your edits may not be saved correctly. I'm using Apache 2.4.12 so that is what I selected.

  • Pre Main Include: This section is located at the "top" httpd.conf. If you want to add directives that get processed first, add them to this section.
  • Pre VirtualHost Include: This section is "below" the pre main includes file. Anything here gets processed after the "pre main" and before the first virtual host. We are adding mod_expires directives to this section.

Click on the drop down box under the "Pre VirtualHost Include" section, select Apache 2.4.12, then paste in this block of code into the box:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

Click on the blue "Update" button to save the configuration, at this point there should be a message saying the edits have been saved.

How to use cpanel include editor browser caching whm.png

If you use WHM to add configuration options via the Include Editor, WHM will write the changes to pre_virtualhost_2.conf

/usr/local/apache/conf/includes/pre_virtualhost_2.conf

If you would rather make modifications via command line, you can simply using Vim to open the file and make the changes.

vim /usr/local/apache/conf/includes/pre_virtualhost_2.conf