678-807-9676 hi@yazminmedia.com

1-hour-wordpress-leverage-browser-caching

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!

The issue of slowness stems from the multitude of elements on your website. All those things… images, CSS files, JavaScript, etc… must be downloaded FIRST before the actual page is loaded in the browser. The kicker with this problem? It needs to happen ever time your website is loaded.

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:

leverage-browser-caching-gtmetrix-before

 

Step 2: Open your .htaccess file

Add the following code to the top of the file:

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:

leverage-browser-caching-gtmetrix-after

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?