Is your website loading slower than honey dripping off a spoon? It can happen with the many plugin options available with WordPress. However, today, you’re going to learn how to leverage browser caching to speed up the loading of your website… without a plugin!
What happens when you leverage browser caching?
When you leverage browser caching, basically what you are doing is telling the browsers to not download all these files if they have visited the site before. Most of the time, we don’t make a ton of changes to the layout of our site, just the content. Therefore, we’re safe to simply tell a browser to not re-download a page element for a set period of time.
So, what you are doing is telling the browser: don’t re-download until X date.
How to leverage browser caching
Technically, this isn’t strictly a WordPress only tutorial. This would work for any website that is looking for a bit of a speed up.
My solution involves a quick edit to your website’s .htaccess file. Why not a plugin, you ask? Well, as I mentioned before, one of the things that might be slowing down your website is the number of plugins you are running with your WordPress installation. There are solutions out there that can help with your page speed if you’re afraid to get under the hood of your WordPress installation, but if you don’t mind getting a little greasy, just a few lines of code can help speed up your website greatly!
Please note: This only works for the Apache server environment with the mod_expires module turned on.
Step 1: Check your sites performance
If you’re going to make speed changes on your website, it’s always good to get a starting point. This helps you see if the improvements are working for your website or if you need to undo any changes you’ve made.
I recently discovered a page analysis tool I really like. It’s called GTMetrix. I like it, because you only have to visit one website to test with both the Google and the Yahoo page speed tools. Not to mention, if you make a change, you can update your result report to immediately see how the change affected your score.
I’ll be making the changes for this tutorial on a test website. Here is the score of the website – pre-change:
Step 2: Open your .htaccess file
Add the following code to the top of the file:
# Enable expirations
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year”
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 text/css "access 1 month”
This will take care of improving the load speed of your website, improving your “Leverage Browser Caching” score in Google’s Page Speed tool and the “Add Expires headers” score for Yahoo’s YSlow tool for all assets served from your domain.
Just so you can see the results on my test site:
It’s not a drastic improvement, but it is an improvement none-the-less… and the name of this game is “every little bit counts!”
So, did this work for you? What improvements did you see in your Page Speed and YSlow grades?