Are you receiving complaints about the performance of your website? If so, it’s essential to the success of your business that you take the necessary steps to improve your website performance.
If your website is slow and loading times are preventing users from purchasing products or contacting you, there’s a high possibility that you are losing customers faster than you’re gaining them. It’s also important to understand that once you lose a customer due to a poor user experience, it’s very difficult to get them back (investing in customer retention is much more cost-effective than attempting to acquire new business).
Perhaps you’re looking to improve your on page SEO and bring in new business through organic search. In this case, you may have recently run a page speed audit with Google PageSpeed Insights or GT Metrix and have found poor performance due to a ‘failure to leverage browser caching‘.
Studies show that the average visitor will wait no longer than 3 seconds for a page to load before they bounce off page and visit a competitors website, which is a problem that can be avoided with a thorough audit of your website. Utilizing the browser cache to the fullest is essential, and there are several ways that you can accomplish this.
You may have high quality products and services to offer your customers, but your brand will falter against the competition if your website performs poorly. Don’t lose business and start leveraging browser caching to speed up your website!
What is Browser Caching?
Every time that an internet browser loads a web page, such as the home page of your website, it automatically downloads all of the files that are displayed on that specific page, including all of the JavaScript, images, HTML, and CSS located on the page (code and resources). Although certain pages can be smaller in size and be comprised of only a few files that are the size of a couple of kilobytes, there are many pages that call for the download of several megabytes worth of files, which is a substantial amount of space that quickly adds up for the user and can bog down their experience as they browse through multiple pages of your website.
The issues created by the downloading of these files are numerous, such as the fact that larger files take a lengthy time to load and can be particularly bothersome to people with a slower internet connection, such as a 3G/4G connection on a mobile device. Each file on the page must also make a separate request to the server that’s in use before they are downloaded to the customer. As your server gets more and more simultaneous requests, it will need to do more work in order for the page to load properly for every customer accessing it, but this can also cause a reduction in page speed for the customer, which is especially true if your page consists of a large amount of multimedia, as these files are typically much larger than text files.
With the utilization of browser caching, files are downloaded directly to the browser that’s being used by the customer, such as Mozilla Firefox or Google Chrome. Although the pages will need to load the first time that they are accessed, the browser will remember much of this information for any subsequent visits, making the website content immediately available, reducing the chance that the user will experience slow page speeds. By making use of this technology, less requests will need to be made to the server, which will keep content from needing to be downloaded again whenever the customer refreshes a page or goes back to one that they were previously on, which helps to reduce the amount of load placed on your server and keeps page speeds quick for the customers that are using your website.
In today’s world, customers expect a pleasant user experience including fast page speeds at all times, even when using a mobile device. A fast and fluid browsing experience provides you with the means of keeping customers on your website long enough for conversions (from a “visitor” to a “sale”). You can leverage browser caching through a number of methods, either by utilizing easy-to-install WordPress plugins that are free-of-charge, or, for the more advanced, by editing core server and website files to enable caching features directly.
Server side browser caching is rather simple to implement and will save your customers a lot of frustration as they browse your website.
Leverage Browser Caching with WordPress plugins (easiest)
W3 Total Cache (our favorite)
The easiest method to leverage browser caching is with the W3 Total Cache plugin, which is one of our preferred WordPress plugins. This WordPress caching plugin is very easy to get up and running while also providing advanced features for advanced users. This plugin is among the most popular caching plugins around, as it has received well over a million active installs and has a current user rating of 4.3 out of 5 stars. With this plugin, you will be able to increase the performance of your website, reduce load times, and save up to 80 percent in bandwidth through the (gzip) compression of the files that the user needs to download. In fact, when fully configured, your website it’s stated that you should expect to see an overall increase in website performance of 10x!
A selection of the features provided with the W3 Total Cache plugin include:
* Compatibility with shared hosting, virtual private, and dedicated servers
* An easy to manage and integrate CDN (content delivery network)
* Support for mobile devices and AMP (Accelerated Mobile Pages)
* The caching of fragments, objects, database objects, search results, feeds, CSS, JavaScript, and compressed pages on memory, disk, or the CDN
* Numerous security features
Here is a quick-start guide to setting up W3 Total Cache
WP Super Cache & WP Fastest Cache
Some additional caching plugins you may want to consider include WP Super Cache and WP Fastest Cache, both of which will provide you with everything you need to keep your customers happy with the speed and performance of your website.
WP Super Cache is actively installed on more than one million websites, while WP Fastest Cache is actively installed on over 400,000 websites, the first of which has a rating of 4.3 out of 5 stars and the latter a rating of 4.8 out of 5 stars. These plugins provide much of the same benefits as W3 Total Cache and a similar feature-set.
WP Super Cache provides you with the means of generating static HTML files from your dynamic WordPress blog or website, which means that the PHP scripts that tend to be heavier than HTML will be automatically converted into HTML and will be provided to the majority of users who access your website, allowing the customer to download small files and access your website with minimal slowdown. This plugin also allows you to edit the PHP scripts yourself or use the included “simple mode” to handle this for you. The “garbage collection” feature included with this plugin also gets rid of old cache files after a certain amount of time so as to ensure customers aren’t provided with out-of-date content.
As for WP Fastest Cache, this plugin also helps with the creation of static HTML files as opposed to PHP and mysql, which often cause heavier loads. Setup of this plugin is simple and doesn’t require the modification of the .htaccess file (a core, and very fragile, configuration file for your server) for your website. One fantastic feature with this plugin is that all cache files are automatically deleted whenever you publish a new page or post, allowing your customers to be kept up-to-date with the content on your website.
Leverage Browser Caching via FTP (for experienced devs)
Depending on the type of server that you use, you’ll need to include specific code to enable browser caching on your server. This should be used by experienced devs only, but will allow you to obtain many of the same benefits as provided by the WordPress plugins even when you use a server that doesn’t include specific code (and without the bloat of unused features of a plugin). You will first need to locate the .htaccess file within the root of your domain, which can be edited via any type of text editor, such as notepad. Within this specific file, you can leverage browser caching by setting your caching parameters, which will tell the browser the exact types of files that will need to be cached. Whenever you are finished editing, always save the file “as is” instead of doing so as a .txt file. In order to properly leverage browser caching via FTP, there are three steps that you should take, which include the addition of expires headers, the addition of cache-control headers, and turning off ETags.
How to edit/access your .htaccess file in WordPress
How to edit/access your .htaccess file via FTP or cPanel
Add Expires Headers (Apache & NGINX)
One useful step you can take when leveraging browser caching in WordPress is to add expires headers, which can be done if you host your website on Apache and NGINX, although the code used with each is slightly different. These headers allow you to get rid of out-of-date and stale cache files and will tell the browser when the content expires and must be refreshed, which allows the browser to store static content and refresh periodically in order to stay current and up-to-date. When setting the expiration for each image type and text type, it’s recommended that you avoid setting this expiration date to anything less than a month or more than a year. If you wait too long for this cached content to expire, some of your users might be provided with an out-of-date website when they access it, which can be particularly bothersome if you update your website on a regular basis (as any business should). You should also focus on adding different expiration dates for different files. For instance, you might update the text on your website more often than the images, which means that you could set text expiration dates to around one month.
Add Expires Headers in your .htaccess file (Apache)
# START EXPIRES CACHING #
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
# END EXPIRES CACHING #
Add Expires Headers in your server config (Nginx)
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Add Cache-Control Headers (Apache & NGINX)
By adding cache-control headers, these headers will be able to tell the server how to manage caching directives in both requests and responses to and from the server.
For instance, the header of “public” indicates that the response made by your server can be cached by any cache, while the header of “private” tells the browser that the request is only intended for a single user and can’t be stored by a shared cache. Headers such as “must-revalidate” mean that the cache will have to verify the status of resources before using them and cannot use any that have expired. With this type of management, you can have direct control over how the caching on your website works, which also helps you avoid running into any slowdown issues that you’re not aware of.
Add Expires Headers in your .htaccess file (Apache)
# BEGIN Cache-Control Headers <ifModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header set Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header set Cache-Control "private, must-revalidate" </filesMatch> </ifModule> # END Cache-Control Headers
Add Expires Headers in your server config (Nginx)
location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Turn ETags Off (Apache)
ETags are HTTP headers used for the validation of web cache requests from browsers for specific resources. By turning ETags off, your browser is forced to rely on the caching rules that you have set with the expires headers and cache-control in order to maintain content, allowing you to have complete control over how browser caching is done on your website.
Turn ETags Off in your .htaccess file (Apache)
# TN - BEGIN Turn ETags Off FileETag None # TN - END Turn ETags Off
That’s it!
Need Help Leveraging Browser Caching for Your Website?
If you need assistance in leveraging browser caching for your website, get in touch and our team of devs will help you take control of your website, speed up your website page load time, and ultimately improve the experience and performance of your website. Th all of which will help you keep customers on your site, generate more sales, acquire new business, and improve customer retention!
