This week I decided to see if I could compare templates from different providers, as people often ask me whether certain templates are better for SEO or performance. While for SEO it is not that easy to create a comparison test, for performance this is not that hard, it just takes some time...

So, I chose templates from the large template providers, plus some smaller ones, set-up a test environment, and went ahead. And the results are quite interesting, with a clear winner!

Disclaimer: Let me start with a disclaimer. This is just a very basic test, and also I just tested the basic features of the actual template. Some providers, like Rockettheme, provide a separate performance plugin, and this was not tested. Also note: with the use of my performance tips, almost any template can be made to perform pretty good.

How was the test performed?

First of all I created an installation to start with: A clean Joomla install with some sample data, hosted on a shared hosting account with Siteground, located in Amsterdam. (Note that if you are on a host with less performance, the differences will probably be bigger). Then I created a large article with a lot of text plus some images to give the site some body. Then I configured a few modules, plus the main menu of course. Once I created this set-up, I saved it with Akeeba Backup. This allowed me to go back to this basic installation after every tested template so that they encountered the same conditions. The only thing I changed were the module positions, to make sure the default options were loaded, plus I made sure a google font was loaded, as this is pretty standard, and some templates even force you to use them.

Then I installed the template I wanted to test, and ran performance tests using 4 on-line testing tools: Pingdom Tools, GT-Metrix, Google Pagespeed and Webpagetest. These tools usually provided the same trends, so in this blogpost I will only show the GT-Metrix results (test-location based in Canada), plus the Pingdom data regarding number of HTTP-requests + page-size in kB. Since GT-Metrix usually gave a rather consistent measurement of seconds needed to load the site, I used that one, and then I also ran the test 5 times, to get an average. Some template providers offer performance options within the template, and when they did, a separate test with these options switched on was performed.

Which templates were tested?

I chose the latest published templates from the large providers (except for Joomlart, as I did not have a subscription, so I used their free template JA-Purity III), plus a Shape5 template (since I simply have a subscription), and then also 2 templates from providers that claim to have fast and clean templates without any framework bloat, Joostrap and OneWeb (actually not a 'provider', but a free project). Also wanted to test Joomla Bamboo, with their new framework, which was added one week after the others.

General conclusions

Let me start by giving away my main findings: hardly any template is as efficient as the Joomla core Protostar template, except for Yootheme, which I see as the clear winner of this test, together with the Oneweb template (though this is only meant as a very basic started kit). Also Joomlart and JoomlaBamboo are pretty efficient (with performance options on), and the rest follows. One thing that often struck me is how inefficient the Google fonts are often loaded, making separate calls for different Google fonts, while it is quite possible to do so in one call. Also in many cases templates load an awfull lot of CSS and Javascript files, sometimes almost tripling the size in kB's for the site.

Well, so now I spoiled it. Let me first show the overview table with my results, then I will discuss the different templates one by one. Note: Templates with optimization parameters switched on are marker with an (o). This is only listed if it makes a difference. Results are from Pingdom (size + # HTTP-requests) and GT-Metrix (Pagespeed Grade, Yslow grade and time to load):

Template Size (kB) # Requests Pagespeed Y-Slow Time (s)
Protostar (core-Joomla) 508 16 51 78 2.41
Beez3 (core Joomla) 741 29 40 71 3.48
One Web template 527 17 54 76 2.28
One Web template (o) 431 14 59 79 2.14
Joomlart Purity III 917 18 46 70 2.68
Joomlart Purity III (o) 647 15 58 77 2.89
Rockettheme Ricochet 1200 35 41 72 3.65
Gavick WriterGavick Writer 1000 52 70 67 4.84
Shape5 GCK Store 1300 54 37 67 3.16
Shape5 GCK Store (o) 1300 39 41 71 4.42
Joostrap Portfolio 1200 59 48 67 3.31
Joostrap Base template 715 29 48 70 2.84
Yootheme Peak 878 27 40 72 2.80
Yootheme Peak (o) 358 18 82 83 2.34
Joomlabamboo Xero 464 15 58 77 2.61
Joomlabamboo Xero (o) 381 14 71 78 2.50
 

Benchmark: Protostar (core-Joomla)

The first template tested was the default template, Protostar. This turned out a very efficient template relatively. It had pretty good grades and loaded in 2.4 seconds on average (keep in in mind that this is just a relative number, as the server is in Amsterdam and the GT-Metrix measurements are done from Canada). So, if the display of the template appeals to you, use it.

Beez3 (core Joomla)

Just for comparison I also tested the Beez3 template, which is also a core Joola template. It loads quite a bit more resources, is heavier, and loads quite a bit slower.

Oneweb template

The Oneweb template is a more a boilerplate or starting project then a real "template", and is provided by Seth Warburton from InternetInspired. It is a free project, meant to create mean and lean templates. This is pretty much what is provided. The template is indeed lightweight and loads fast. This is partly due to the fact that by default, Bootstrap is not loaded. Using the performance parameters of the template, you can switch it on if you want, though you can also choose to exclude even more resources. Wheter this is always practible is the question, but it makes the template even faster. 

By the way, the provider of Oneweb recently started creating commercial templates: Joomlanauts.com

Joomlart Purity III

As I do not have a Joomlart subscription, I chose to test their free Purity III template, which is still pretty recent. It also requires the T3-plugin, to be installed separately. Out of the box the template did perform sufficient, not really spectacular, but with CSS and JS compression switched on, the template performed pretty good, being one of the faster templates in the test. Compression brought both size and number of resources loaded down, reducing size.

Rockettheme Ricochet

Rockettheme is one of the largest template providers around, and it uses the Gantry 4 framework. Personally I have been using quite a few of their templates. In this test, performance is not spectacular. With a size of 1200 kB, the template is heavy, and also the number of HTTP-requests is quite high, leading to a rather slow site (in this test). Gantry does not offer any significant performance options within the template, only CSS compression from the LESS compiler. Rockettheme offers a separate plugin though, RokBooster, which should improve performance quite significantly. 

Note however that Rockettheme is working hard on Gantry 5, which will be built with a stron focus on performance, see their blog. Their claim is: 

Gantry5 will be our fastest, most reliable version to date.

I'll make sure to test it once published.

Gavick Writer

The Gavick template scored relatively good in the GT-Metrix points, but it turned out to be the slowest in the test. Probably, this is because the template is relatively heavy in resources (1 mB, 52 HTTP-requests). The template offers quite a few performance options, but in the test, some of the options broke the site, so I could only activate 2 of the 6 options, which did not make any difference. Note that it may very well be that with some tuning and checking the performance options can be made to work, but this limited test did not allow for extensive trouble-shooting.

Shape5 GCK Store

Shape5 is a relatively small provider with some nice templates. Actually the previous version of this site was a Shape5 template. I managed to make it perform pretty decent then, but it took me quite some tuning then. In this comparison test, it performed relatively poor. It was the heaviest template in the test, with 1.3 mB (compared to 508 kB of the initial site), which is probably partly due to the full-screen background-image. Though not the slowest, performance was definitely affected by this. Also the high number of resources counted. With performance options turned on, number of resources went down, without making the site a lot faster though.

Joostrap Portfolio

 I was very curious about the Joostrap template, as it claims to be very fast, as it does not require any framework bloat. Unfortunately, the template did not fully deliver this promise. The number of reources loaded was the highest of all, while it's size was only exceeed by the Shape5 template. What was also striking that, even setting "Use Google fonts" to no, it still loaded many: Multiple fonts in multiple weights in 3 separate calls, as the source code reveals:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700italic,700,900,900italic,300italic,300,100italic,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100' rel='stylesheet' type='text/css'>

Not what you would expect from a template claiming performance... However, Joostrap informed me it will soon be updated with improved code. This is already implemented in the Base template, so I decided to test this one too.

Joostrap Base template

This time, Joostrap delivered. Especially number of resources loaded and combined size of the page are much lower, while also Google fonts implementation is much cleaner. This was also reflected in number of seconds to load the site. This makes the base template perform among the better ones in the test. There are some options to of-load scripts like Jquery and Bootrap to CDN, or even don't load them at all, but the scripts are pretty crucial to the template, so not loading them does not really seem an option. Anyhow, performance is decent enough as it is now. The Portfolio should soon be updated too.

Joomlabamboo Xero

Two weeks after the test, Joomlabamboo their Zen Grid Framework Version 4 (all their recent templates are on the T3 framework), which has been completely redesigned, very much with performance in mind. Their first template on the framework is the Xero, a nice template with a minimalistic look and feel.

Within the template parameters, you can see that a lot of attention has been paid to performance: CSS and Javascript compression are switched on by default, as well as lazy loading for images (selectors need to be specified). You may even squeeze out some more by Gzipping the template's files and loading a basic version of Fontawesome instead of the full version. Also very nice is the implementation of a mobile-detect library, which allows you to not load (instead of hide) content for mobile devices.

Most of the options are switched on by default, so the additional options only made a slight further improvement. These results are impressive enough. The template is lightweight, one of the fastests in the tests, with good GT-Metrix results and with only 15 resources.

It would be interesting to see more of their templates on this framework to see if they bring similar performance. I guess this should be fine, the team definitely had performance in mind when they built this template.

Yootheme Peak

So, let's end with the winner of the test. This template offers the same performance as Protostar and Oneweb, while offering all the functionality of a commercial template provider. Resources are low, the template is quite lightweight, and loads fast. Especially with performance options switched on, it is almost the fastests in the test, with the best scores in GT-Metrix. The performance options allow for compression and G-zip, while you can also choose to disable loading Bootstrap. The core Joomla features are styled by Yootheme's own Uikit, and do not require Boostrap. Your extensions might need it though, so check this:

 

Yootheme uses the Warp 7 framework, and currently, they are working on Warp version 8, so let's see if it brings any more improvements....