Leverage Browser Caching

A cache mechanism operates between the server and the visitor's browser, either on the end of the server or on the computer of the visitor. It can store copies of files (like html/php/css/js files, images, etc.) or strings of code for faster access instead of having to constantly request it from the server. For websites, the most effective way to cache files is to leverage browser caching. But there are other ways to use caching to your advantage as well. Using one or multiple cache mechanisms for your website can greatly improve the performance of your web pages.

Test Your URL

Check how well your web files are cached with the website speed test or the browser caching test.

What Do We Mean With Leverage Browser Caching?

The most important cache mechanism for page speed is browser caching. Most of the static files that are used on web pages can be saved on the computer of your visitor for future access. Every time the visitor accesses a new page on your website these files will then be accessed from the visitor's computer instead of your server, which will greatly speed up page load times.

Leverage Browser Caching for Apache via the .htaccess file

You can leverage browser caching for Apache servers by adding a small snippet to the .htaccess file. Below are the two recommended ways of doing this:

Mod_Expires (most commonly used option)

Add the following code to the .htaccess file and edit the access time and file types to your liking: <IfModule mod_expires.c> ExpiresActive On AddType application/vnd.ms-fontobject .eot AddType application/x-font-ttf .ttf AddType application/x-font-opentype .otf AddType application/x-font-woff .woff AddType image/svg+xml .svg ExpiresByType application/vnd.ms-fontobject "access 1 year" ExpiresByType application/x-font-ttf "access 1 year" ExpiresByType application/x-font-opentype "access 1 year" ExpiresByType application/x-font-woff "access 1 year" ExpiresByType image/svg+xml "access 1 year" ExpiresByType text/html "access 1 hour" ExpiresByType text/css "access 14 days" ExpiresByType text/x-javascript "access 3 weeks" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType image/gif "access 2 months" ExpiresByType image/png "access 2 months" ExpiresByType image/jpg "access 2 months" ExpiresByType image/jpeg "access 2 months" ExpiresByType image/gif "access 2 months" ExpiresByType application/pdf "access 1 year" ExpiresByType application/x-shockwave-flash "access 1 year" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule>

Not Working?
Make sure the mod_expires module is enabled on your server by running the following command via SSH access (or ask your host about this): sudo a2enmod expires

Mod_Headers (works just as well)

Add the following code to the .htaccess file. You can edit the filetypes and cache access time to your liking. Right now the access time is set to 2592000 seconds, which is 30 days. <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=2592000, public" </FilesMatch>

Examples of various access times: # 1 YEAR Header set Cache-Control "max-age=29030400, public" # 1 MONTH Header set Cache-Control "max-age=2592000, public" # 1 WEEK Header set Cache-Control "max-age=604800, public" # 1 HOUR Header set Cache-Control "max-age=3600, public" # DON'T CACHE ANY FILE Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"

Not Working?
Make sure the mod_headers module is enabled on your server by running the following command via SSH access (or ask your host about this): sudo a2enmod headers

Leverage Browser Caching for Windows Servers

You can leverage browser caching for Microsoft (Windows/ASP.NET) servers by either configuring it in the IIS Manager or adding a small snippet to the web.config file. Read more below:

Add a snippet to the web.config file (most commonly used option)
Add the below snippet to the web.config file. The web.config file should be placed in the document root of your website. <system.webServer> <staticContent> <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" /> </staticContent> </system.webServer>

The above snippet will cache all the static resources that your web pages load. You can control the cache period via the cacheControlMaxAge setting. Right now the setting is set to 30 days.

Via the IIS Manager
Follow the below steps:

  • Navigate to Start menu >> Administrative Tools >> Internet Information Services (IIS) Manager.
  • Find your app in the list on the left side.
  • Right-click on the app and select Output Caching in the menu.
  • Now click on Add. You can now add caching rules for any web file type you wish.

Speed Up Your Website Even More?

Even though browser caching is the most powerful form of caching when it comes to page speed, there are a few other forms of caching that could speed your website up even more. You'll find a few of the best ones below.

Caching for WordPress sites
You can make WordPress a lot faster when you use caching for your WordPress database. By using caching WordPress doesn’t have to access the database every time a visitor requests certain data because this data will be cached. The easiest way to implement caching for a WordPress site is using a cache plugin. It is recommended to use WP Super Cache as, after testing, it seems to be the best plugin out there. Lots of people also use other plugins like W3 Total Cache. You have several other options as well.

Joomla caching
Joomla (second most used CMS) has a built-in caching system for your Joomla website(s). Go here for more information on how to use it.

Drupal cache
Drupal (the third most popular CMS) also has a built-in caching option which you can control in the control panel. However, there’s a little more to it as just simply enabling the cache and enjoying the fruits of it. Read this to make full use of caching for Drupal.

Use PHP script caching
You can cache the output of PHP scripts to speed up the delivery to your visitors and decrease server load. Among the best PHP cachers is Zend OPcache which is automatically installed with PHP 5.5.0 and later. Go here for more information about how to use it and make it work. If you do not have access to a server, you could ask your host if they can install it (which most usually already have). APC is also a popular PHP accelerator which you could use as well (but hasn’t been updated for some time now).

Use caching for your Java applications
Next to treating JavaScript the right way you can use the Java Caching System to speed it up by dynamic caching when you run a Java application.

Tune the MySQL cache performance
MySQL has a built-in caching system which almost always requires you to edit the MySQL config file settings to make optimal use of it. When you have SSH access to your system, you can use the MYSQLTuner.pl script to see how well your MySQL cache performs and which of the MySQL config settings you need to change for better performance. After you know which settings to change you edit these settings in the MySQL config file.

Use a server caching application
If you have SSH access to a server you can install a caching application which caches frequently accessed files and content. One of the best is Varnish Cache which is a free application which is compatible with all the major operating systems and can be installed from the command line. Go here to learn how to use it. Varnish can be used with multiple systems (like Apache and others). Another great application used by many is Squid.

Use Memcached for multiple servers
Memcached comes in handy when you run multiple servers for a single operation. Memcached is a server application which can combine the unused memory of several servers and use it in places where you don’t have enough. This way you make maximum use of the amount of RAM your servers have available. Go here for more information how to install and how to use Memcached.

Want To Have The Maximum Page Speed Possible For Your Website?

We can help with that! We have professionally optimized the speed of thousands of websites. Because of this we know how to get the best results quickly while keeping our prices low. Get an instant price quote for our services now.