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!
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.
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)|
|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|
|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 Base template||715||29||48||70||2.84|
|Yootheme Peak (o)||358||18||82||83||2.34|
|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.
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 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.
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.
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.
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.
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.
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....