Testing the Fixes: 5 Plugins to Help You Leverage Browser Caching

We are an impatient, fast forward nation. Are you young enough to remember when you had to actually get up to change the channel on your tv?

Frustrating.

Now I'm so impatient that I can't even be bothered to wait through 30-second commercials. I want my show and I want it now. This is exactly why I watch most of my tv shows on Netflix. (I'm not necessarily proud of this, by the way.)

I recently had a Page Speed Fail because of the jquery code I had on my home page. As a result, Andi and I redesigned all of ITB. Ain’t nobody got time to wait for every click to take 10 seconds to load, or even five seconds. Or even three seconds. Seriously - they don't take the time, and my bounce rates proved it. No love! You may be seeing some of the same. Thankfully, there are plenty of resources to find your page load score, and tools to help speed it up. It's always a balance between updating your blog and fixing your blog performance, isn't it. Frustrating.

The good news is that this is a "one-and-done" fix.

I will walk you through 5 different tests that I did to see which one solved my caching issue best; feel free to try these on your blog. In a hurry? Click on one of the links below to skip directly to a specific test that you are interested in trying.

Use one of these 5 methods to speed up your #blog now. Leverage Browser Caching Click to tweet

 

What is leverage browser caching?

The GTmetrix definition below, says it best:

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.Some pages might only consist of a few files and be small in size - maybe a couple of kilobytes. For others however there may be a lot of files, and these may add up to be several megabytes large. Twitter.com for example is 2mb+.

Why does this matter?

According to KISSmetrics: 40% of people abandon a website that takes more than 3 seconds to load.

This matters because people want a RIGHT-NOW browsing experience. We need to consider that our readers may have slow internet connections. We need to do everything that we can to help them load our blogs as quickly as possible. This is why leveraging browser caching is an important step in increasing page speed.

Test your blog to see if this an issue for you.

The good news is that there are plenty of free options to use for page speed testing. The two that we are going to focus on today are Pingdom and Google Page Analysis. When you run your blog through the analyzer tools below, it's possible that you will not get a message about browser caching. If that is the case then that means your blog has already been improved in this area but it will still be good to review your overall results.

1. Pingdom

The screenshot below shows the results for my blog before I did any optimization at all. My site speed is 2.57s and the first recommendation is that I leverage browser caching.

The speed is under 3 seconds, so I am already in a great place for starting out but my goal is to get the blog under 2 seconds.

47% of consumers expect a web page to load in 2 seconds or less. ~KISSmetrics

Save

2. Google Page Analysis

In the image below, Google says that I should consider fixing my leverage browser caching. My desktop score from Google is 78 and while it would be great to get a score of 100, it is not likely. My goal with Google is to have a green checkmark instead of the yellow exclamation.

Save

You have options

Thankfully there are several free options that can improve browser caching. I ran tests using the list of options below. I will show you the results from each option and which one I finally settled on.

• WordPress Plugins
• W3 Total Cache
• Cpanel httaccess
• Yoast httaccess

WordPress Plugins are easy to use and often serve a blog well. The downside to using plugins is that they can slow down a blog, which is the opposite of what we want here. Plugins also need to be monitored and updated.

In this case, adding a WordPress Plugin is far easier than logging into your cPanel and accessing a hidden file. This is why my first two attempts involved a plugin.

Test 1: Leverage Browser Caching Ninja

I was able to install this plugin directly from my WordPress dashboard and it required no setup, just activate and go.

Save

My page load time did decrease from 2.57 seconds to 2.13 seconds but my overall grade dropped significantly.

Save

I made the decision to not use this plugin, so I deactivated it and moved on the next test.

Test 2: Page Speed Plugin

I installed this plugin directly from my WordPress dashboard and it required no setup, just activate and go. This plugin has more advanced options that you can experiment with but they're not relevant to the browser caching.

Save

Here, my page load time decreased from 2.57 seconds to 2.00 seconds. This is a significant decrease and I could have stopped here and been happy with these results. However, one of my main goals with this blog is to use as few plugins as possible.

Save

I made the decision to not use this plugin, so I deactivated it and moved on to the next test.

Test 3: W3 Total Cache

W3 Total Cache is a wildly popular WordPress plugin and is currently active on over 900,000 WordPress blogs. It is important to note that some hosting companies do not allow you to use this plugin. This is generally because they run their own caching software and don't want interference.

Save

W3 Total Cache is a robust plugin that has many options, as you can see in the image below. This makes this plugin extremely useful and complex at the same time.

Save

This plugin offers so many options that it's a bit overwhelming. But after install, I did re-run the page speed test and got the results below. My page speed tested at 1.99 seconds ...I was thrilled!

Save

W3 Total Cache is one of the most popular plugins in the WordPress Plugin Directory for good reason and it's free. Most likely, I'll eventually go back and explore this plugin in depth. However, for the sake of these tests, I deactivated the plugin and moved on to the next test.

Test 4: Adding GTmetrix Code to .htaccess with Yoast SEO Plugins

To be honest with you, that did not help me at all. Sometimes I do not fully understand how or why certain things work. I just know that if I do this thing, that thing happens. No matter how many times someone explains to me how television works, I still don't understand it but I sure love watching it.

Step 1: Make sure that you have the Yoast (WordPress SEO Plugin Installed).

A. Click on Plugins.
B. Click on Installed Plugins.
C. Look for WordPress SEO by Yoast.

[su_note note_color="#f1f1eb" radius="8"]Note: If you do not have Yoast plugin installed then you will want to skip ahead to how to add code to .htaccess thru cPanel. [/su_note]

Step 2: Hover your mouse over SEO.

A. Click on Edit Files.

Save

Step 3: Enter the code listed below into the white box under .htaccess file.

[su_accordion][su_spoiler title="Click for: Expire Caching Code" style="fancy"]

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

Step 4: Hit Save.

Save

I deleted the code out of the .htaccess so that I could try a different set as you will see in Test 5.

Save

Test 5: Adding WP Thesis Skin Code to .htaccess with Yoast SEO Plugins

My blog is built on WordPress with installed Thesis Theme and Charm Skin on top of that. Newbie Note: Confusing, right? If you are using WordPress, you are using a Theme. For example, every year WordPress releases a new Theme. If you just installed WordPress without doing anything else at all, it would come pre-installed with the 2015 Theme. The Charm Skin adds a design element that I like, but it has to be installed over Thesis Theme. There are other "skins" that be installed on top of the 2015 Theme, just not Charm skin. Clear as mud?

Sakthi Kumaran, the WP Thesis Skins developer, cares a great deal about site speed and if you purchase his skins, he provides a tutorial on how to make sure your site runs well. In this tutorial, he provides the Expire Caching Code in the accordian box below.

Step 1: Insert Code below in the Yoast .htaccess area (as noted in the steps in Test 4)

<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>

This is the code that stuck with me. I got good test results for speed and the leverage browser caching notice is now gone.

Save

As you will see in the image below, I increased my Google score to an 82 and I am quite pleased with these results.

Save

How to add code using the cPanel

If you aren't using the Yoast plugin and you still want to use code instead of a plugin, you can access your .htaccess using your hosting cPanel. I am hosting this blog on SiteGround (aff), so that is the cPanel that you will see. However, most cPanel's look generally the same, so if you scroll up and down in your cPanel, you should find what you need.

Step 1: Log in to your cPanel.

Step 2: Click on the File Manager.

Step 3: Make sure that "Show Hidden Files" is checked.

Step 4: Click on Go.

Save

Step 5: Select .htaccess.

Step 6: Click on Edit.

Save

Step 7: Click on Edit again at bottom right.

Save

Step 8: Add code in the white area after # End WordPress.

Step 9: Click on Save Changes.

Save

Conclusion

Speeding up your blog is an important way to signal the search engines that your blog is a good one. This is one SEO tip that can go a long way in growing your blog.

And we are done. If you followed along, then your blog should be running just a bit smoother and you have made your readers happy, as well as Google. Don't forget to test your blog once more using one of the methods that we mentioned in this post.

“And please do me a little favor and share this guide with others, for there’s a good chance that it will help them with their blogs.”