4 simple reasons to invest in custom WordPress website development
Installing cheap plugins on your site can slow things down -- invest in plugin development to keep your WordPress site working well!Read More
We love to build high-performing WordPress themes for our clients, but sometimes the project’s business needs or budget means that’s not possible. In those cases, an off-the-shelf theme can be a great fit.
The WordPress ecosystem is chock-full of themes! There are free themes, paid themes, premium themes; magazine themes, blog themes, catalogue themes, portfolio themes; then there’s social network themes, job board themes, project management themes and e-commerce themes. There’s no shortage of community- and company-built products out there.
With so many options, there’s a wide range of quality indicators. Some high-quality themes also come with good support at a fair price. And then there’s a long tail of others. So how do you know you’re not getting a lemon?
As a development team, we look for a few key, critical issues that we know will make a theme blow up under load. If we find that a theme has one or more of these issues, we’re more likely to discard that theme as an option and move on to the next one on our shortlist!
These issues are easy to check for, using a couple of tools that are available to everyone.
I’ll assume you’ve found some themes you like based on look and feel, so once you’ve got your shortlist together, get hold of the theme demo and run these quick checks.
Note: we want to test the theme demo, not the sales page for the theme! Where possible, open up the theme demo, and then remove any additional navigation bars generated by the theme store. This will give you a reasonably ‘pure’ idea of what the theme will do on your site.
In the tests below, we’ve used “http://example.com”. Replace this with the link to your demo.
No matter what caching system you’re using, it will always be bypassed if a theme (or plugin) uses php-session based cookies. No cache, no scale! Your site will become either slow, expensive, or both. We can test for the presence of php-session based cookies by heading to the MacOS Terminal, Window’s Putty, or the Linux command line (if you don’t know how to find this on your computer, do a quick Google search).
Once you’re in, type this command:
curl -IkL http://example.com
This will return all the ‘headers’ for the site — the information that is sent to the browser, but not displayed. You’re looking for a line that looks like this:
Set-Cookie: PHPSESSID=0074aef042020ba0cbe98343784a44ca; path=/
If you see Set-Cookie, it’s likely that this theme will not be cachable. However, a plugin on the demo could also set this; so if it’s the only check that fails here, it might still be worth testing it on your site.
Set-Cookie is built into the theme, you don’t want to touch it. Discard and move on.
Ajax is a great technology that allows user interaction without leaving the page. WordPress has a tool called admin-ajax.php that is used to power a lot of back-end interactions; and it’s been used by theme and plugin authors to power front-end interactions too.
The problem is that it’s pretty inefficient. While that’s fine for a small team working on the back-end, it’s not fine for thousands of visitors on the front end. For the last few years, developers have been able to use the Rest API instead. The Rest API is much more efficient, but some developers are slow to update to this newer technology. (In some cases, there isn’t feature parity yet; in other cases, it’s in the ‘too hard’ basket.)
In any case, using admin-ajax on the front end is a sign that your site won’t scale well. The less that it gets used, the more your site will scale before it slows down or needs more hardware.
We can test for the presence of admin-ajax by using a slightly different command:
curl http://example.com | grep admin-ajax
Now, I assume that most of your content goes to a page or post type of content rather than the homepage. It can be worth testing these for admin-ajax too:
curl http://example.com/2014/10/01/featured-post/ | grep admin-ajax
What are we looking for? Anything! If there are no calls to admin-ajax on the page, the response will look like this:
$ curl http://example.com/ | grep admin-ajax % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 68256 0 68256 0 0 59692 0 --:--:-- 0:00:01 --:--:-- 59716
If you see any lines after that, you’ll see the term admin-ajax in the output. Remember, admin-ajax isn’t the devil! But it’s one of the most-common design flaws we see in WordPress themes: as sites get more traffic, they have no choice but to add more resources as this technique just doesn’t scale.
Now that we have our fundamentals in place, there’s one performance test that we trust above all others: Dareboost.
Head to the homepage and put in your demo url. Within a few moments, you’ll have a very complete idea of front-end performance. Here’s an example score from a demo I was evaluating recently:
The top-level scores look pretty average for a WordPress theme — but as we’ll see, some of these are due to the server, not the theme, so we’ll take it with a pinch of salt.
The total Requests and Weight are within normal ranges, which is a good thing! While I like to see it lower, I don’t start to worry until we’re over 100 resources or 2MB.
The time to First Byte and Start Render are worrying though! These are due to the server speed; and this is a bit of a black box. Is the server slow because the back-end code is inefficient, or because it’s under-resourced? It’s impossible to tell without technical detective work. I’d leave this aside until you see it on your own server.
The time difference between Start Render and Fully Completed is two seconds: this is a good result and bodes well. The smaller all these speeds are, the better; ideally you want Fully Completed to be under four seconds. Note that Dareboost’s default setting is a 10Mb/s connection from Washington DC, but you can change this.
There are 0 browser warnings, which is good. Anything here would be a concern to you, as you’d be importing broken code onto your site! The http/2 rating is only for https resources, and since our example is not on https, it’s going to score poorly: once again, this is a problem with the server, not the theme. Your site should be https, and should have 90%+ https/2 utilisation, but this depends on your hosting, not your theme.
Lastly is the Speed Index: 5370 when we want it to be less than 1000. D’oh! But a lot of that will be based on the very slow server. We can’t take anything from that.
Next, I want to get an overview of where those 9 issues and 13 warnings are targeted: by clicking on the “All Categories” header, I can see a colour-coded set of categories.
I’m worried that “Quality”, “SEO”, “Number of Requests” and “Browser Rendering” all have issues in the red. I may be able to fix SEO with a plugin, but it’s very hard to improve code quality or browser rendering time; and reducing the number of requests is also very tricky. (If you use http/2, you’re less likely to want to reduce number of requests, so this can be a red herring.)
Jumping to the “Quality” section, I see three things that point to bad code:
None of these things point to high-quality design, and each will be time consuming and buggy to fix. At this point, I’d walk away from the theme and go to the next one in my shortlist.
Did you know you can artificially slow down your browser? If you’re happy with everything else, it’s worth thinking about how well your site will load on a slow 3G connection. Since there’s such a wide variety of browser versions, search “How to limit bandwidth for ‘browser'” to find the best process for you to follow.
You can also shortcut that work and set up Dareboost to run on a slower connection. Using the FilmStrip and Video tab gives you a good idea of what your site will look like on a bad day!
There are lots of reasons why we choose a theme. Appearance is an obvious one, and considering how the theme looks is a great first step in building your shortlist of candidates.
Hopefully the recommendations above give you some hard, quantitative data to help you pare down the options available. While they may be technical, they’re easy to find — and Dareboost does a good job of supplying tools, as well as tips and advice to help you understand the issues they’re highlighting.
Here’s to you finding a great-looking, great-performing theme for your next project!