LeadGen+ : Unboxing a fast WordPress theme

by Kean Richmond
Bronco - Digital Marketing Agency

Recently LeadGen+, a premium WordPress theme, from WP Juice launched claiming, amongst other things, unrivalled speed. Within the sales blurb of their website they profess to score 100 out of 100 on Pagespeed Insights and Pingdom Tools; a task we’ve attempted on some of our own websites and always come up a little short.

To create a fast WordPress theme isn’t an easy task and at Bronco we know a theme alone does not ensure a fast website. So as both a learning exercise and to put the theme through it’s paces we’re going to dig around a little to see what we can find.

Checking the figures

Prior to buying and testing the theme ourselves it seems prudent to test the demo theme and confirm the 100/100 scores are genuine.

With the URL http://leadgen.wpjuice.co.uk/, I’ve tested the two services (Pingdom Tools and PageSpeed Insights) that WP Juice have specifically mentioned on their website.

leadgen-pingdom
A load time less than 0.5 seconds. Impressive

While the result from Pingdom Tools does confirm what WP Juice are saying about the speed of the theme, unfortunately, they’ve come one point short (99 out of 100) in Google’s eyes. In this instance Google has decided to call them out for not minifying their HTML; something that when we inspect the source code appears to have been done without issue*.

* We’ll find out later in this post that PageSpeed Insights isn’t hugely consistent.

leadgen-pagespeed
An issue with PageSpeed Insights?

To help verify the results above we also tested the Automotive version of the theme where the scores reversed with Pingdom returning 99/100 and PageSpeed Insights 100/100.

The theme is only part of the speed puzzle

What WP Juice have tried to deliver is a theme that is versatile enough that a user won’t require any additional, speed sapping plugins whilst not being overburdened with features that only a small percentage of people use any contribute to slowing down a website. For example, they’ve baked sliders, forms and social sharing right into the theme.

Having worked with WordPress for a number of years we understand that it’s not always possible to achieve the website you want without additional plugins. Nor is the speed of the site solely influenced by a theme and plugins; server speed and image compression are both contributing factors.

Using the theme

Once we confirmed that the demo version of LeadGen+ indeed scored so highly it was time to buy and install the theme so we could see what scores are possible in more real world setup.

In doing this we tested the theme a few times in the following states and gaining the following scores…

  • Clean install, no plugin, 3 text only posts (View image)
    Pingdom Tools 93/100 | PageSpeed Insights 92/100 | Loading Time 1.85 secs
  • Single Post page
    Pingdom Tools 90/100 | PageSpeed Insights 92/100 | Loading Time 3.27 secs
  • Single Post page with addition of uncompressed image (View image)
    Pingdom Tools 89/100 | PageSpeed Insights 62/100
  • Home (post list) with real posts exported from the Bronco blog (View image)
    Pingdom Tools 88/100 | PageSpeed Insights 93/100
  • Single Post page of a real Bronco post with images, Twitter and YouTube embeds
    Pingdom Tools 88/100 | PageSpeed Insights 87/100
  • Custom Home page (similar to LeadGen+ demo)
    Pingdom Tools 89/100 | PageSpeed Insights 80/100
  • With Yoast SEO plugin installed
    Pingdom Tools 88/100 | PageSpeed Insights 90/100
  • With NextGen galery plugin installed
    Pingdom Tools 86/100 | PageSpeed Insights 56/100

Observations

In running through the above tests we observed a number of issues and changes the theme was making to deliver a good speed score.

You need to be running a newer version of PHP

When first installing the theme the result was a white screen; something had errored. After a little digging we found the issue and tweaked the theme to solve it. I believe our server running PHP 5.3 was the culprit and the theme requires a newer version. Something which is consistent with WordPress’ recommendations. While many hosting companies will be keeping their PHP versions up to date it’s something to note when purchasing LeadGen+.

Server speed is everything

Instantly moving the theme to another server loses us a number of points mostly due to server response time. While the scores are a good indication of speed they don’t always align with the actual loading time which took a big hit increasing by 400% even though our implementation was in a far more simple state.

While the Pingdom and PageSpeed Insights can give you an indication of what to fix to improve the speed of your site the benefits of many of these fixes on the perceived speed of the site for a user will always be less impactful than just having a damn quick server. Clearly our test server isn’t quick so a 100/100 score is pretty much impossible for us without either upgrading or moving servers.

A good Pingdom score relies on caching images

Our Pingdom score always took a nose dive the more images included on the page. This was due to us not specifying a cache validator or leveraging browser caching. For developers these issues are easy enough to solve through modifications to the .htaccess file. But for non-developers using the theme these fixes would be beyond their capabilities. While we could implement these fixes, we’re refraining from replicating any of the custom modifications that WP Juice have implemented outside the theme.

Responsive images, sorta

Though we uploaded an uncompressed image that was 1MB in size and stated that WordPress output this large version, LeadGen+ had other ideas.

Instead LeadGen+ implements custom code to display only the image required for a given screen size. Essentially mimicking the developing responsive images spec. In my view it’d be much better for them to adopt the proper srcset and sizes specification so that as browser support increases the theme can retire this functionality or use it only to support older browsers. Below is the code LeadGen+ actually outputs for an image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<img 
src="http://www.example.com/wp-content/uploads/2015/10/photo-1439902315629-cd882022cea0-768x768.jpg" 
data-src="http://www.example.com/wp-content/uploads/2015/10/photo-1439902315629-cd882022cea0.jpg" 
data-tab-src="http://www.example.com/wp-content/uploads/2015/10/photo-1439902315629-cd882022cea0-768x768.jpg" 
data-mob-src="http://www.example.com/wp-content/uploads/2015/10/photo-1439902315629-cd882022cea0-480x480.jpg" 
data-width="3000" 
data-height="3000" 
data-tab-width="768" 
data-tab-height="768" 
data-mob-width="480" 
data-mob-height="480" 
alt="photo-1439902315629-cd882022cea0" 
class="wpj-lazy alignnone size-full wp-image-4043 wpj-loaded" 
height="768" 
width="768">

At the moment I’m not sure if the image compression is being handled solely by WordPress or if the theme is adding something extra but it does seem that the resized images are well compressed, even if they don’t reach Google’s exacting standards. Unfortunately Google thinks there’s more that could be done which means in the real world a website running this theme is never likely to get a 100/100 score. Given WordPress doesn’t compress images to the degree PageSpeed Insights expects I’ll presume WP Juice may once again have done some manual tweaking to ensure a 100/100 score.

PageSpeed Insights is a pain

In one test Google’s PageSpeed Insights scored us 62 returning warnings that included render-blocking CSS and JS which it didn’t on other pages, even pages using the same template. There appeared to be nothing amiss in the code of that page so after running the test a number of times I decided it’s a fault with the tool. We also noted that we’d see fluctuations in the server response time leading to our score here to also fluctuating making side by side comparisons more difficult.

However the low score seen when testing with the NextGen Gallery plugin is valid as the introduction of this plugin did result in extra render-blocking CSS and JS files being included on the page. This is annoying especially as the plugin failed to work properly (I figure out why later on).

If this service isn’t entirely consistent, and does contain faults, then it puts a question mark over any warnings regarding site speed and mobile friendliness in Webmaster Tools Search Console.

Customisable theme options

As I got to grips with the theme I found that a number of the speed optimisations the theme performs are actually customisable by the user.

themeoptions
Customisable features

I think the use cases for deactivating these options are limited but providing this level of control to the user is always beneficial.

Digging into the code

I’ve done as much as I think I can do playing with the theme. Now I need to dig into the code and see if there’s anything the code will reveal. I already know the theme is manipulating and lazy-loading the images. It’s also minifying the HTML, inlining CSS and removing querystrings from files to improve browser caching. But it’s worth trying to see if there’s anything special to how this is being done or if there’s anything else I’ve not yet noticed.

FYI: I’ll not be showing any code examples here. I’ve not read the license but can guess WP Juice wouldn’t be happy with me giving away their code here freely. You’ll just have to spend £50 if you want to play code thief.

CSS

Making CSS speed friendly is always a little more challenging as you’ll want to ensure that it is still easy to edit even though this is less of a concern when packaged up into a WordPress theme.

While the core style.css file of LeadGen+ is compressed, it’s not fully minified. This is done at the point where all the HTML is minified. There’s a whole file dedicated to the minification of the HTML that seems to take specific sections of code based on a regex pattern and loop the matches to determine what should and should not have whitespace removed.

By not minifying the CSS this ensures it remains (mostly) readable even if though it’s not formatted perfectly for frequent updating. In addition to the style.css file a PHP file adds to this by taking any settings defined in the theme options of the WordPress admin and concatenating these to the CSS prior to inlining this into the HTML. It certainly keeps the CSS as lightweight as possible, which is further evidenced by only three media queries which also indicate the simplicity of the core design.

JavaScript

Unsurprisingly the theme deals with jQuery properly and cues up the version they want to use using wp_register_script. This means any plugins conforming to the right standards won’t try and load in extra copies of jQuery that can really slow a site down. Why WP Juice has used version 1.8.1 of jQuery rather than a more up to date version is a bit of a mystery but I imagine they’ve got an eye on compatibility.

In addition the theme has a custom.js file which at the start was a bit of a mystery as the source code showed no reference to it. The solution was as simple as deactivating the NextGen plugin from earlier as this theme and plugin clearly don’t play nice together. NextGen Gallery actually stopping the theme from loading any JavaScript files, including jQuery, which would be why the plugin failed to work properly.

Intriguingly the custom.js file while compressed in a similar way to the CSS file isn’t fully minified (nor inlined then minified). It seems that WP Juice did enough to appease Pingdom and PageSpeed Insights without having to fully minify the file. However a quick test does show a file size difference of 0.5KB between compressed and fully minified versions of the file so there would be some small benefit in minifying it but WP Juice may have deemed this benefit too small when weighed up other considerations.

Images

We’ve already seen that the theme is outputting different images for different screen sizes. Then there’s lazy loading for images that initially appear below the fold (featured images seem to be ignored here) which then appear by using the JavaScript onscroll event. Unfortunately the use of JavaScript here means Progressive Enhancement is ignored and users with JavaScript disabled won’t get to see any of this imagery.

For deciding if a mobile or desktop version of an image is displayed the wp_is_mobile function is used, which in turn relies on the browser user agent. Relying on the user agent is a bit nasty but I can see why WP Juice have gone down this route as it’s the only way to ensure all browsers download only the smallest image needed rather than loading the largest/smallest and relying on JavaScript to swap them out. Doing it only with JavaScript potentially increases load times by loading unnecessary images before swapping them for the correct alternative.

It also seemed that my earlier question mark over the compression of images is that compression is left entirely to WordPress with nothing obvious in the code to suggest any additional compression being enacted by the theme. So while WordPress appears to have done well to compress the thumbnail images a compression plugin may help in getting the original images which WordPress doesn’t compress as well as the thumbnails to a size even PageSpeed Insights is happy with.

Clean Up

It’s rather impressive the detail the theme goes to in cleaning up some of the rubbish that gets pushed out by WordPress. Not only does the theme clean up all the useless stuff added to the <head> of the document such as wp_generator but throws in filters such as one that strips out repeated ID’s in WordPress menus.

A winner?

I’m in two minds about the LeadGen+ theme. When looking through the optimisations the theme is performing there’s nothing particularly revolutionary or complex about them. Yet they’re things that many WordPress developers don’t consider or ignore. Many focus instead on cramming in more features or on a quick turnaround because in this industry you have to have either something that can be moulded to what a user requires or be able to flood the market with a number of themes that appeal to different people in order to see a good ROI.

I’m also a little annoyed that they don’t expand on these 100/100 scores listed on their website as these can’t be achieved through the theme alone. It’s a bit of false advertising. But with that said if you compared this theme and another on our slow server, crammed with images, then LeadGen+ will perform much better than many of its unoptimised rivals. They’ve certainly built one of the speediest themes (without the need of plugins) around but I’d like to see them possible explain these scores in a little more details and, with examples, explain the other enhancements required to reach a perfect score with a nippy loading time. Of course not all of their customers will be able to follow this kind of stuff but it’s provides a helpful resource for developers using the theme.

In terms of design, usability and conversion I’ve not really spent much time considering these factors. Probably an oversight given the name of the theme. But with that said the design is clear if not eye-catching and while optimised to help conversion the content and imagery will obviously play as much a factor in generating leads as the theme does.

I think if speed is your primary consideration and you’re buying a WordPress theme rather than going bespoke you’re not going to find much better than this. They’ve certainly spent a lot of time considering what optimisations they can implement and what features they should provide to reduce the dependency of plugins. However if you are going to use this theme then getting a developer to look over your hosting setup and .htaccess file is a must to get the very best out of it.

A disclaimer, just in case

At no point have WP Juice approached us to review or endorse their theme, nor were we gifted the theme. Basically we’ve not been paid to do this, we actually spent money to buy the theme, and this is genuinely us exercising professional interest.

Bronco - Digital Marketing Agency
Making your inbox more interesting
Looking to keep up to date, or find out those things we can’t mention on the blog? Then sign up to our semi-regular newsletter. Don’t worry, we won’t spam you.

4 Comments

Get in Touch

Things are better when they’re made simpler. That’s why the David Naylor blog is now just that; a blog. No sales pages, no contact form - just interesting* info about SEO.

If you’d like to find out more about the Digital Marketing services we do provide then head over to Bronco (our main company website) to get in touch.

Get in Touch Today * Interestingness not guaranteed
Part of the Bronco family