3 Simple Tweaks to Speed up WordPress

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.

Since that announcement, several studies have tried to show a correlation between page speed and rankings (See here and here).

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.

Page Load Speed effect on conversions

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
  • Minify JavaScript
  • 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.
External font optimization step 1

Step 2) Click the “Critical CSS” tab.
External font optimization step 2

Step 3) Click the “Add Conditional Critical CSS” button.
External font optimization step 3

Step 4) Add a name and “Save”.
External font optimization step 4

Step 5) On the next screen, click the new CSS container (It will have the name you gave it in the previous step).
External font optimization step 5

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.
External font optimization step 6

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.
External font optimization step 7

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).

Video Transcript
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.

And then you could see that the overall page load timing was about 768 milliseconds, almost eight tenths of a second. You can see the top two improvements here were, number one, to minify the CSS, and number two, minimize render blocking resources. What that means is, to get rid of JavaScript or CSS or whatever it is that is in the way of the actual page loading. So you want to have the html, the main structure of the page loading first, so that people can actually see something. And then you can load JavaScript and all the other resources that the page needs to run.

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.

All right, I said this was going to be easy and that is because we're going to be using plugins. The first one is going to be Autoptimize, don't know how you would pronounce that, but what this does basically is it optimizes your code, it optimizes your JavaScript, CSS, and html. It makes it minified, which means removes all the spacing, extra line breaks. It also moves a few things down. It moves the CSS kind of down a little bit so that the html can load first. It also has some caching features. Basically tells the browsers that it can cache JavaScript, CSS, and different types of files. We're not really looking at that, because we're just looking at the first not cached visit. Either way though, those are good features to have.

The next plugin that we're going to be using is called WP Deferred JavaScripts. What this plugin does is it makes it so that if a theme developer has not optimized the way that JavaScript loads, this plugin basically does that for it. It will make it so that the html, the page structure loads first, and then the JavaScript and other files can start to load. The final plugin that we're going to use is called Above The Fold Optimization. Now, this plugin actually does a lot of different things, but we are going to use it for one purpose, and that is to optimize fonts. Now, a lot of WordPress themes will include external fonts, which can slow your site down, and this plugin is going to fix that. It's going to make it so that the fonts load after everything else, and it won't slow things down.

Okay, so I'm in my WordPress installations plugin area, and you can see I've got these three plugins installed. Now let's look at the setup for each plugin. Okay, so let's just go ahead and take a look at the settings. I've got optimize html code checked, optimize JavaScript code, and optimize CSS. I've also got aggregate inline CSS. And inline all CSS is a really cool one, what it does is basically takes the CSS out of files and sticks it into the page. And that might look a little bit sloppy, but it actually makes things load a whole lot faster. I've also got checked, save aggregated script CSS as static files. Okay, so make sure you've got those settings that way. Now let's look at Deferred JavaScript. For WP Deferred JavaScript there's not really anything to do. If you've got something that you don't want it to affect, because there is a chance that this could break something on your site, not permanently of course, if it does break something you could always turn this off. But it does give you the option to exclude certain things.

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.

Let's go ahead and activate these plugins. We're going to do Autoptimize and we're going to do WP Deferred JavaScript and see what happens. Okay, so we started at 75 and 89. Look, it's still 75. What's going on here? Let's see what's happening. It's telling me that there is a render blocking JavaScript and CSS and I'm checking to see what that is, and it's showing Google Fonts. So let's go ahead and install this Above The Fold Optimization plugin. We'll activate it, and let's go to the setting, make sure everything is set up correctly. Okay, everything looks good here. We've got optimize web fonts enabled, and we've got disable remove all fonts, so let's test again.

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.

Share This: