After speed testing over 1000 WordPress themes last month, I thought it would be fun to choose a couple of them and try to make them even faster.
This experiment was a lot of fun. I was able to make some really impressive speed improvements with very little effort. The video showing the process is a little further down the page. Feel free to skip to that now, but first, I thought it would be a good idea to talk a little bit about why page load speed is so important.
Back in 2010, Google made an announcement on the Webmaster Central Blog.*
… today we're including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.
Even though they clearly stated here that site speed is a ranking factor, how much weight it is given in the overall ranking of a site isn't clear at all.
As far as I can tell, the corrections found were never all that convincing. The most recent research by SearchMetrics shows virtually no relationship.
So is site speed actually a ranking factor? Almost certainly, but I suspect the there are many other factors involved. To see what I mean, just look at the top Google search results for any query. You can almost always find really fast sites ranking lower than really slow sites.
So Why is Page Load Speed So Important?
Even if we completely forget about the question of search rankings, page speed is still extremely important. And here's why.
In a page speed study, Walmart.com found that when page load speed dropped from 1 second or less to 4 seconds or more, conversion rates suffered significantly.
According to another study by Kissmetrics
40% abandon websites that take more than 3 seconds to load
We've got clear results from a reputable company (walmart) as well as good survey results (Kissmetrics) that really illustrate exactly why we should strive for fast loading pages.
So let's start optimizing!
How to Speed Up Your Site
There are lots of factors involved in how fast a web page loads, including:
- Prioritize visible content
- Leverage browser caching
- Optimize images
- Minify HTML
- Minify CSS
- Main resource server response time
- Optimize database queries
- Minimize render blocking resources
Don't worry if a lot of these items don't make sense. Fortunately we're using WordPress, and we've got plugins!
Speeding up WordPress
When you think of WordPress, a blazing fast user experience might not be the first thing that comes to mind. But it's actually not WordPress's fault.
If you take away the beautiful, but very bloated theme (that's probably loaded with a zillion bells, whistles, and special features) and uninstall those 15 plugins that you probably don't need, you'll find that WordPress on it's own is actually pretty zippy.
Fortunately, we use WordPress and have access to thousands of amazing plugins. Including several great plugins for page load optimization.
Optimizing External Fonts (or Google fonts) for Speed
In the video tutorial I completely removed external fonts from the second theme example to improve speed. However, I said I'd add an explanation for how to optimize loading of fonts.
We'll be using the “Above the Fold Optimization” plugin for this part. Just follow the steps below.
Step 1) Go to the settings for the “Above the Fold Optimization” plugin.
Step 2) Click the “Critical CSS” tab.
Step 3) Click the “Add Conditional Critical CSS” button.
Step 4) Add a name and “Save”.
Step 5) On the next screen, click the new CSS container (It will have the name you gave it in the previous step).
Step 6) Upload your font files and paste your CSS into the text-area. Click “Save”.
For this step, you can use a tool like FontSquirrel.com or transfonter.org. In the example, I used a Google font. Just upload the font and they give you all the files and CSS you need.
If you saw the video tutorial, you'll see that adding the fonts reduced the PageSpeed Insights score from a 99 to a 90. But 90 isn't bad at all. The font is pretty nice looking as well.
See the Optimized Hiero Theme in the Wild
I recently published a new site, so I decided to try out this theme. The site is PartTimePreneur.com.
*In April of 2004, Google announced that site speed was a factor for ranking web pages (Official announcement).
The other day we went over the 200 plus fastest loading free responsive WordPress themes. Well, today we're going to take the fastest theme from that list and make it even faster. I'm going to show you three really easy changes you can make that will significantly improve the Google page speed insight score and make your pages load faster in the process. So, let's get ready to do some page speed optimization.
All right, for those of you who may have missed the last post, we tested over 1000 free WordPress themes to find the fastest responsive theme that we could find. That theme ended up being a theme called Generic Framework. This is what Generic Framework actually looks like live. You can see it's just pretty basic, and if I can get the mobile version to load here, take a look at that, so this is what it looks like as a mobile site. Again, pretty basic, but very clean looking. These are the metrics for the Generic Framework theme. You can see that there were 12 requests, the total size was pretty small, under 60 kilobytes, and you've got a pretty good desktop score for Google. The mobile score is low, but that's actually true of most of the themes that we tested. The usability score was pretty good.
All right, let's go ahead and get started. The first thing we're going to do is just get a couple of baseline measurements. The first one is just go ahead and get the Google page speed insights score. So if I go ahead and analyze it, it's running, and this just takes one minute to do. You can see, for mobile we've got 75 out of 100, and for desktop 91 out of 100. Okay, the next baseline we're going to get is the page load speed. That is going to be done using Sitespeed.io. The same tool that we used for the big test. And we're going to run it three times just like we did in the main test.
Okay, we got a speed of 906 millimeters. Now, that is a little bit slower than the speed that we got in the main test. Now, the main reason for the difference there is likely my internet service provider. There can be some differences depending on how fast your internet connection is. Internet speeds do tend to change for different times of the day. If I do this test on my laptop, which is on Wifi, it can be a little bit slower than my desktop, which is hardwired, so don't worry too much about the difference, let's just look at the 906 millisecond baseline. So, 906 milliseconds is the time to beat.
Finally, let's go over the setup for Above The Fold Optimization. If your theme does not use external fonts you don't need to install this plugin, okay? If your theme does have external fonts, then you're going to have a couple of options. The first is going to be to ignore the external fonts, don't use them, that's going to be by far your biggest speed gain, and it's also going to be the easiest way to do this. If you really feel like you need these external fonts, then your second option is going to be to basically load them locally, you're going to download the fonts and upload them to your WordPress theme and optimize the way that they load.
In this video I'm only going to go over the first option, but I will document how to do the second option clearly, I just don't want to do that in this video because it actually can get a little bit complicated. If you really want to do that, again, check the description for a link. Okay, the first thing you're going to want to do is click this CSS tab, make sure you've got optimized web fonts enabled, and the webfonts.js load method should be disabled, remove all fonts. Then just come down and click save, and that's it. Again, if you really want to use the external fonts, check the description for a link and I'll explain how to do that.
Okay, we've got our plugins ready to go, so let's go ahead and test again. Now, keep in mind that this theme, Generic Framework, does not use any external fonts. So we're not going to need that Above The Fold Optimization plugin. All right, so we're testing again. And look at that, we've got 100 of 100 for desktop. Got 100 of 100 for mobile. Look at that. Just from two plugins, a perfect score, that's pretty impressive. Okay, now let us test the actual page load speed. All right, so for page load this is what we had the first time, 906 milliseconds. The second time we got almost 300 milliseconds lower. That's a huge difference.
Here are the results again, I've just highlighted everything so you can see more clearly. We did this kind of as an initial test run, and we did the second run just to make sure that the times were about the same. So these were before the plugins. We had 906 milliseconds. And after adding the two plugins we've got 636 milliseconds, which is really … I mean, I'm pretty flawed by how big of a difference that is. And of course, the Google page speed insights scores are also pretty amazing, 100, I mean, I actually was not expecting to get 100, so I think that's pretty awesome.
All right, so Generic Framework was already pretty fast and it was pretty simple, so I thought it might be a good idea to test one more, and we'll do one that had a little bit more to it. This is one of the ones that I highlighted as being a really good layout. I thought the layout was really nice. So let's see what we can do with this one. We're going to take some initial page speed scores and then we'll go from there. Okay, here we are, let's go ahead and get a baseline for page speed insights. All right, so mobile we're getting 75 out of 100. And desktop we're getting 89. Now we're checking speeds for page load. This is an initial test. We got 1.32 seconds.
And there we go, we got 99 of 100 for mobile now and 96 of 100 for desktop. And of course, there are some more changes we could make, but again, much, much better grades. Let's take one more reading for the actual page load timing. Okay, we've actually decreased the page load time down to 1.23 seconds, not as big of a decrease as the previous, but still, not bad. I hope this has been helpful. I really think these are some pretty easy wins, some easy improvements you can make. I'd appreciate any comments, questions, or feedback you have. And thank you so much for watching. We'll talk to you next time.