Table of Contents
Last update on
Want a fast WordPress site? Not a developer? This makes your choice of theme even more important, otherwise the performance of your site will be severely impaired.
But how do you know, before you buy it, if your desired theme will be speedy?
It can definitely be tricky but here are some guidelines to help you out.
Only Buy What You Need
By the time you go theme shopping, you should have planned out the content of your site so that you know what you are looking for.
If you haven’t done this, STOP RIGHT NOW AND GO DO IT. That was my “I’m not kidding” voice.
Otherwise I guarantee you will end up buying a “multi purpose” theme that says it can do it all, because you don’t know actually know what your site needs. This will not be the fastest option!
Also remember that the theme is just the starting point of your site. You will undoubtedly add numerous plugins as well, some of which will add significantly to your load time. So you want your baseline to be as lean and fast as possible.
Speed Test The Theme Demo
Every theme has a demo site – that is, a site that is running the theme so that you can see how it works and looks. So the first thing to do is speed test the demo. And I mean SPEED testing, not just running it through Google PageSpeed Insights – which doesn’t even measure the speed!
Here at WP Rocket, we use Pingdom Tools for testing. It produces easy-to-read information and is more accurate than GTMetrix. Webpagetest is also a good option, albeit the presentation of information is a little less friendly. But just pick one and use it consistently, according to these guidelines
Remember that your website is more than your homepage, so you will need to test a few pages on the demo.
If you are building a basic informational or “brochure” style site then you might just need to test the homepage plus an internal page. If your site will have a blog, be sure to also test the main blog page and an individual post. And of course, if you’re building an e-commerce site, test a product page as well.
How fast should it be?
Well, it’s hard to say, but for a homepage loaded with content i.e. lots of sections, lots of images, probably 3 seconds or less. The speed can vary according to the location you use for testing, and where that demo site is being hosted, whether or not they are using a CDN, caching etc. So the rules aren’t set in stone, but if you do a few tests per theme and compare results, you will be able to see which of your choices have a significant speed advantage, or if they are all very similar.
A single blog post or a single product page should load faster than the homepage. A portfolio page could take longer because there will be lots of images.
Number of HTTP Requests
The number of requests means the number of times that your browser has to ask the server for files (images, CSS files etc). The more files it has to ask for, typically the longer it will take.
This rule isn’t hard and fast, because often what counts is the size of those requests (see below). But all else being pretty much equal, fewer requests should be faster.
To get an idea of how this works – imagine you’re at a bar, ordering drinks. If you order, let’s say, 2 beers, your bartender (the server) can be very efficient, grabbing those quickly and handing them to you both at the same time. You (the browser) won’t be waiting long and you can carry both at the same time (you probably have 2 hands, after all).
But what if you’re order 10 drinks, for all your friends? That’s going to take a lot longer because since you can only carry 2 drinks, you will have to go back and forth a few times to deliver them.
In reality, your web server can give you multiple “drinks” at a time, and the browser can “carry” multiple at a time, so around 60 or so requests wouldn’t take too long to process, but if your webpage is making, let’s say 80+ requests, it’s going to start get backlogged.
We recently examined some of our customers’ fast homepages and they all came in well under 60 requests.
In the future you won’t have to worry about this so much. A new type of “bar” is coming, called HTTP/2, which will be the equivalent of an “all-you-can drink” beer buffet! But until that is widely available, the number of HTTP requests is a factor.
Total Page Size
Simply put, the more data – information, images, files etc – that your page contains, the longer it takes to download to a visitor’s browser. So the smaller your page size is, the faster. The size of your page is measured in KBs and MBs, just like files on your computer.
As a point of reference, the fastest pages contain less than 1MB of data. If you’re up beyond 2MB then you will need to have really great hosting and caching to keep that feeling speedy.
Going back to our bartender scenario, if all you are ordering are bottles of beers, even if there’s a lot, your bartender can grab them pretty quickly and you can deliver them quickly because they’re light and easy to carry. But what if you were to order a keg, or even a few kegs? Those are much heavier and slower to move around, so you’ll be waiting quite a while to get them, and it will take you longer to deliver them.
I know what you’re thinking, who orders a keg at a bar?
But, creating a 4MB webpage is the equivalent of ordering a keg of beer, and unfortunately, a lot of people do that! A page that large is going to take a while to download and your visitor will start to get antsy waiting for that, especially if they are on a mobile device.
So while a magazine-style news theme might look awesome, with its giant homepage grid of thumbnails, showcasing 30 stories, each with an image… give some thought as to whether you need all that content there. Are you prepared to optimize all those thumbnails so that your homepage isn’t as slow as molasses?
A Real Life Example
As an example, let’s take a quick look at a couple of themes, Metro (a child theme for Genesis) and Avada (a multi-purpose theme) and compare a single blog post for each. I tested each multiple times and used the server location which gave the fastest result in each case.
Avada: 1.30s
Metro Child Theme for Genesis: 722ms
As you can see, Metro is about 100% faster. This example of the single post page is not a fluke, almost any page you test is faster. In this example, Avada looks to be the equivalent of a small beer keg, compared to the typical beer bottle size of Metro.
Why is Metro Faster?
Both the number of requests and the overall page size are significantly lower in Metro, so the page is bound to be faster.
The design of the Avada page is clearly more involved – for example, there’s a related posts slider at the bottom, lots of widgets in the side and in the footer etc. So from this point of view, you would expect it to take longer to load.
So, there are going to be trade-offs. If you want the super-slick design with all the bells and whistles, like Avada, the performance of your site will suffer a little. So you have to decide if the trade-off is worth it.
What Can You Control?
When looking at themes you have to see what you can control. For example, with Avada, you don’t have to load up the sidebar with widgets if you don’t want to. Most people want their sites to look just like the demos, but you could choose to make it more streamlined by making speed-conscious choices.
Looking at the Page Analysis in Pingdom can give a little more insight. Pay attention to the amount of JS and CSS that is loaded and also the number and overall size of the images.
You have more control over the images because you will be using your own images and can compress them as much as possible.
However, the JavaScript and CSS you will have less control over because that is more inherent to the theme. You hope that if you turn off a certain feature, like the related posts slider, that any JS files specific to that will no longer be loaded, thus making the page more efficient. But that’s hard to know ahead of time. So it’s safer to assume that the sizes you see for CSS and JS will be more constant, while knowing that you will have more control over images that are used.
Avada Page Analysis
Metro Page Analysis
In these two, compare the numbers for Script (i.e JavaScript). There’s 99.1kb worth on Metro and a whopping 524kb on Avada. This is to be expected because of all the fanciness that Avada has. Interactive elements, like sliders for example, typically require Javascript – that’s the cost you pay for being fancy.
The design for Avada calls for more images – 53 requests there compared to 7 for Metro. Even if all images were as compressed as they can be, the volume required by Avada carries am inherent weight.
You can see that there are a lot of variables at play but if you take some time to run some tests and really look at the results, you will be able to make a more informed decision about your theme choice 🙂
Once you’ve chosen a fast theme, then it’s up to you to also make smart choices about what plugins to use and what content and images to use on each page. Don’t load your fast theme down with clunky content!
