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.
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.
Note: You do not need to create an account to use either of these testing sites
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
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.
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.
My page load time did decrease from 2.57 seconds to 2.13 seconds but my overall grade dropped significantly.
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.
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.
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.
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.
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!
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
If you are curious as to what an .htaccess file is, this is what Wikipedia has to say:
A .htaccess (hypertext access) file is a directory-level configuration file supported by several web servers, that allows for decentralized management of web server configuration. They are placed inside the web tree, and are able to override a subset of the server's global configuration for the directory that they are in, and all sub-directories.
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.
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.
Using the code recommended by Gtmetrix did not improve my page load results but I didn't have the leverage browser caching rules any longer. My load time actually increased to 2.38 seconds. Considering this load time increase, I will try one more test to see if I can get better results.
I deleted the code out of the .htaccess so that I could try a different set as you will see in Test 5.
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)
click here for htaccess code
This is the code that stuck with me. I got good test results for speed and the leverage browser caching notice is now gone.
As you will see in the image below, I increased my Google score to an 82 and I am quite pleased with these results.
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.
Step 5: Select .htaccess.
Step 6: Click on Edit.
Step 7: Click on Edit again at bottom right.
Step 8: Add code in the white area after # End WordPress.
Step 9: Click on Save Changes.
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.
What have you done to speed up your blog? If your blog is running like rockets, I want to know what you did. We are always looking for tips here.
“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.”
Wow. Lots of GREAT info – thanks for sharing it.
Thank you for sharing this: My speed score SUCKED!
Installed Leverage Browser Caching and it took my score from a 44 on Desktop to a 72/100! Thank you for the awesome free insights!!!
Thanks. A lot of information here! I too don’t like to use too many plugins.
Hi,
I’ve tried the code in .htaccess but my leverage browser caching grade is still not improving F(4). I wonder if there are other code that I could use to increase caching grade.
Any help would be greatly appreciated. Thanks!
~ Ledz
Ledz,
Hi. Did you try W3 total cache? Also, how did you use Yoast for the .htaccess?
Thanks,
-Renee’
Are you sure you modified the correct .htaccess file? Sometime there are more than 1 htaccess file on yoru server, so make sure you are modifying the correct one.
I use this code for almost all sites i work on:
# Leverage Browser Caching by setting HTTP header expires
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/javascript “access plus 1 month”
ExpiresByType text/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”
This is generic code that is not plugin dependent – which is the best option, in case your plugin goes crazy, your site wont.
See if that helps.
OK so I have not got .Htaccess capabilities as my site is on a windows box but have done the equivalent in web config.
My question is though do external resources have an impact on your site overall ranking if coming from highly rated sites.
I am creating a dance class site for my daughter as a new venture and pride myself on technical perfection. I have jumped through 99.9% of the hoops to improve the site in GTmetrics, Pingdom and pagespeed however I find it is mostly the external resources that are causing the issue.
I see that most want print friendly resources so added a plugin hoping it would help the street dance website but it says I must leverage browser caching on that file.
http://cdn.printfriendly.com/p…
Will this actually effect anything
My daughters website is http://www.dance107.co.uk and I really want to get the highest score possible, So far I am at 97/100 on a good day.
Hi,
First, having that high of a score is amazing. Way to go. So your site is a WordPress site. So install the Yoast Plugin and use that to access your .Htaccess file. It will work for you.
-Renee’
Thanks for this information. I have Yoast SEO installed but when I go to try and edit the .htaccess file it is not there in Yoast. I receive a message: “If you had a .htaccess file and it was editable, you could edit it from here.” I’ve gone into cpanel and the file is there so I’m stumped. I was not sure if the code generated to paste is specific to a Theme/Site?
My GTMetrix page load speed averages 5 seconds. I get an A and B in Performance Scores It’s a photography site with larger image files so trying different things to reduce that speed including a few different caching plugins. “Defer Parsing of Script” is the only recommendation I receive an F on.
The greatest difference was when I activated the “Compress All Content” in cPanels “Optimize Website” under the Software tab.
Thanks, David
David,
That is odd. I have done this many different sites with different themes and have not run across that issue. Now, if you can see the httaccess file in your cPanel you could just add the code there. If you do that, first copy and paste anything that is in the file into a notepad (don’t use Word). Then paste in your httaccess code. There is nothing wrong with doing it from the cPanel.
If you run a site with images you will need to fiddle with different options for sure. So the compress in cPanel made the site faster?
Blog on,
-Renee’
hi renee,
by reading this article i got gtmatrix’s score 90 by adding in c panel. it was very easy. early it was difficult for me. and i was little bit affraid. now i got a very decent score thanks for helping your readers…
regards..
That is so great to hear. Way to go! You did it.
Blog on,
-Renee’
I delete caches every time via WP SUPER CACHE, after deleting caches, will this codes work fine for regular visitors (maybe after deleting that, site start requesting HTTP from server again for regular visitors)?
yes, I believe so.
Thank you for the post. This tutorial helped me to fix leverage Browser Caching. Besides, I improved my site performance a lot. My current speed test result is 80.
Regards, Jyoti
Jyoti,
This is awesome news. Thank you so much for sharing that.
Keep Up The Good Work!
-Renee’
Thank you so much for your help. It helped me go from 76 to 84/100
In Pagespeed Tools it’s telling me Leverage browser caching for the following cacheable resources:
http://connect.facebook.net/en_GB/all.js (20 minutes)
http://maps.googleapis.com/…&dummy=.js&language=en®ion=IE&ver=3.0 (30 minutes)
http://public.oneallcdn.com/…i/socialize/themes/wordpress/default.css (2 hours)
http://public.oneallcdn.com/…css/api/themes/beveled_w35_h35_wc_v1.css (2 hours)
http://public.oneallcdn.com/…themes/iconsets/beveled_w35_h35_c_v1.png (2 hours)
http://www.google-analytics.com/analytics.js (2 hours)
http://….api.oneall.com/socialize/library.js (4 hours)
If you have any advice on how to fix these, that would be fantastic!
Thanks so much :)
Flipper,
That is a great increase! Way to go. I actually don’t know for sure in regards to these. It is my experience that not everything can truly be increased. It seems like you are on the right path though.
Blog On!
-Renee’
Really thanks. Read you article and step 5 really help. I had really problem with site speed, and cannot solve leverage browser caching by many others solutions … only this one helps … Really thanks.