Skip to main content

Starter Theme Performance Metrics

Post to Twitter

When we think about factors determining our choice of Starter theme how often do we think of performance? I’d hazard a guess very few consider factors such as database queries and memory usage, whereas we are more inclined to be interested in ease of theming, documentation and support.

These tests compare 6 Drupal starter themes—Stark, Framework, Ninesixty, Zen and both Genesis starter subthemes (6.x-2.x-dev). For these tests each theme was in “live production mode”, meaning that any registry rebuild features were disabled and for Ninesixty the debug stylesheet was unset.

I have been performance testing my themes for quite some time. I thought it might be interesting to see how they stacked up against some of the other starter themes, at least to show the differences by comparison. However that is not the focus of this report. There is no intention of stating which is the best starter theme, nor are these tests exhaustive. Indeed there are some glaring ommissions, such as size of JavaScript files and the comment.tpl.php is not factored into total page weight.

Those things aside this is at least an interesting comparison and I hope to encourage you to factor in performance when making your starter theme selection.

Page weight

Page size, Code size, Text size, Code to text ratio
Theme Page size (bytes) Code size (bytes) Text size (bytes) Code to text ratio (%)
Genesis LITE 23332 16700 6632 28.42
Ninesixty 23527 16916 6611 28.1
Stark 23892 17281 6611 27.67
Framework 25033 18485 6548 26.16
Genesis SUBTHEME 25829 19197 6632 25.68
Zen STARTERKIT 26248 19624 6624 25.24

This test was performed on the home page of the starter themes test site and measures the HTML output only (CSS is not included). I selected the homepage because it includes a fair representation of the HTML output of each theme’s templates—page, node & block.

The tool used was http://www.rankquest.com/tools/Text-Ratio.php. This was selected because it does not require a CAPTCHA to be filled out for every test.

I think we need to take the actual results with a grain of salt, other tools returned different values however the best to worst order remained consistent no matter what tool was used.

Genesis LITE has the smallest Page size and the best Code to text ratio. This was surprising for me, I fully expected Stark to be at the top.

Zen STARTERKIT has the largest Page size and worst Code to content ratio.

The differences here are minimal. The spread from smallest to largest is a mere 2.9kb in file size and a shave over 3% in code to content ratio. These are not dramatic differences and would only be a factor for sites demanding optimum performance and code/content ratios.

CSS

Size of CSS (kb), compressed (all Drupal + theme CSS files aggregated)
Stark Framework Zen STARTERKIT Ninesixty Genesis LITE Genesis Subtheme
Default 13 18 19 23 30 31
CSS Tidy* 11 16 16 21 21 22

The size of the CSS files reflects in the most part the methodology of the starter theme.

Stark has the smallest CSS file, however it only has one stylesheet (layout.css) and the themer is expected to add all required stylesheets, selectors and declarations. In short Stark is a bottom-up approach to theming.

Genesis on the other extreme has the largest CSS file. This reflects the Genesis top-down theming approach, where there are many selectors with empty declaration blocks included in the starter theme—which you would either use or delete.

The CSS Tidy file size shows that with all empty selectors removed the files can be significantly smaller - this is true of the Zen STARTERKIT also, although not as dramatic.

Ninesixty loads the entire layout framework by default, however in production sites you would remove the unused layout selectors and thus the file is likely to be significantly smaller.

* CSS Tidy: http://floele.flyspray.org/csstidy//css_optimiser.php, Compression: Highest, Compress colors, Compress font weight, Lower case selectors, Remove unnecessary backslashes, Remove unnecessary semi-colons.

Performance logging

Performance logging Summary
Framework Stark Ninesixty Genesis LITE Genesis Subtheme Zen STARTERKIT
Average memory per page (mb) 12.0 12.1 12.1 12.1 12.1 12.1
milliseconds per page 382.71 377.29 388.71 392.00 393.57 399.14

This test used the Performance Logging module that comes with the Devel module. I used Summary logging. For the test I looked at the exact same pages in the exact same order for each theme. The cache was cleared between tests and the Performance summary table truncated. A total of 7 paths and 23 page accesses were recorded and averaged. This test was performed 3 times and the results were practically identical each time.

Clearly the themes are very similar across the board. Only the Framework theme reports slightly less memory usage, while the Stark theme was the quickest and Zen STARTERKIT the slowest.

Database Queries

Number of queries executed for the home page and a single blog node
Stark Framework Ninesixty Genesis LITE Genesis Subtheme Zen STARTERKIT
Home page 85 85 86 88 88 89
Blog node 76 76 77 79 79 80

These stats were collected with the Devel module. Again the differences are not overly dramatic.

Stark and Framework appear to add no additional database queries.

Zen STARTERKIT has 4 extra database queries for each page load. This does not seem overly significant.

Conclusion

Your choice of starter theme will depend on many factors beyond just performance. This brief summary of performance metrics at least shows us there are differences and that they could be a factor in determining starter theme selection.

So what are my picks? Not sure that would be fair, I am biased. However, based purely on the stats:

  1. For light page-weight and best code to content ratio: Genesis Lite - hands down, by far the pick of the bunch.
  2. For speed: Stark. Small footprint and no additional database queries.
  3. The Framework theme fairs well across most metrics.

Addendum

To make the point really clear so its not lost (I had assumed the data would speak for itself), the differences are very small and practically academic, which is the point I was trying to make. Of course you will pick your theme for many other reasons, however my point was to at least think about it, that the theme layer can effect performance, sometimes in a dramatic way, but here we see at least the base themes do not.

Comments

#1 Awesome break down

great info!

#2 Misleading

Obviously ZEN is going to be the largest because it contains a lot of empty CSS rules so people have a base to start with. You should remove all the empty styles and then rerun your test. Also, many themers do not use subthemes and remove the subtheme capability and just modify zen core (often for performance reasons), would you take that into account?

#3 Not misleading at all

@Kevin, CSS is not included in the page weight calculation, it measures HTML.

Furthermore…

The CSS Tidy file size shows that with all empty selectors removed the files can be significantly smaller…

FYI Genesis has the largest CSS files, which includes something in the region of 4 times as many empty CSS declaration blocks as Zen. You might want to familiarise yourself with some of the other starter themes first ;)

Hacking Zen core as opposed to building a subtheme would not alter the performance at all, the hit comes due to the weight of the HTML and the additional functions, theme settings and so on.

These figures are not misleading, they are what they are, a basic test of a raw install. You could build the exact same theme in all six starter themes and compare, but I bet you a dollar the metrics will be near exactly the same, except the CSS files will be either smaller or larger depending on the starter theme.

I think you’re missing the point of the article; to encourage thinking about performance when building a theme. As the article states the differences are mostly very small, perhaps even academic, and might only apply to large websites with very high traffic.

#4 Weighing your pick with any

Weighing your pick with any significance on these stats Is akin to measurebating. -Ever see digi-cam owners who marvel at the specs but never take a decent photo? I’m not pointing fingers at anyone, just trying to make a point.

Take a step back and look at the whole Drupal install. It can get very, very nasty. There are plenty of ways to optimize your site and looking at tiny performance differences from a starter theme is premature. You should look at how it helps you do your job instead then take it from there.

I’m all for optimizing but I think it’s being seen from the wrong angle. It’s them modules! Everything is in a silo and self contained. This can be good but it also repeats a lot of styles. There are little standards that can be shared across them all and module authors are not necessarily experts with css.

#5 @dvessel, he he, yes,

@dvessel, he he, yes, absolutely, t’is dem dam modules!

Look, the point of the article was 1) to show there are some differences and 2) to show that at best they are very small.

Frankly I get a pissy when “some people” slam Zen as being bloated, I’m not pointing fingers either, clearly the comparison shows us that, at least compared, its not. For fucks sake, against Genesis LITE (which has a lot of html ripped out, I mean take a look at it) Zen is only fractionally heavier, clearly the bulk is coming from modules.

Lets reiterate some points made in the article:

we need to take the actual results with a grain of salt… …The differences here are minimal… …These are not dramatic differences… …Clearly the themes are very similar… …the differences are not overly dramatic… …This does not seem overly significant… …Your choice of starter theme will depend on many factors…

Based on the stats, which are academic, I personally will choose the theme that does the job, which is why half the time I use your theme, because its great and suits me when I want grids ;)

There are little standards that can be shared across them all

Nice point and perhaps this is where the themer community can improve the situation, by helping module developers with their CSS.

#6 I hope I didn't come across

I hope I didn’t come across as if it’s all on the shoulders of module authors. In the end, it’s our responsibility. I meant to say that since we have little standards in place for markup and css, this was bound to happen. The solution is not so clear either. We want that separation in terms of functionality but optimizing is very difficult. Any attempts at optimizing in our current state will only lead to more maintenance. -Something I chose to do in my latest theme.

The work being done by Mark Boulton and Leisa Reichelt for d7 is a big opportunity to straighten this out. -Standardized widgets to conform to! I haven’t been involved much in their discussions but when it comes down to implementation, I’ll be sure to chime in.

Lets reiterate some points made in the article:

we need to take the actual results with a grain of salt… …The differences here are minimal… …These are not dramatic differences… …Clearly the themes are very similar… …the differences are not overly dramatic… …This does not seem overly significant… …Your choice of starter theme will depend on many factors…

Based on the stats, which are academic, I personally will choose the theme that does the job, which is why half the time I use your theme, because its great and suits me when I want grids ;)

I’m glad 960 works for you. :) Nathan Smith did a great job.

I was responding because it’s easy to confuse the message but your point is taken. Cheers!

#7 I hear dvessels argument but

I hear dvessels argument but I somewhat disagree, I’ve run similar tests on some other themes and found big differences in performance. From my pov, yes you can choose a theme that does the job, but lets face it, they all do pretty much the same thing. Once you’ve made the division between grids and conventional layout what have you - a bunch of classes and divisions, so what sets them apart, template.php? Extra features? Custom features? What impact have those?

How do we know that feature XYZ is not using 3mb of memory? We don’t unless we benchmark it. All the themes above used around 12.1mb memory, but what if one was using 15.1? Wouldn’t that be something to question? What if I build my theme and find this out later, only to realise its intrinsic to the operation of the theme? I’m screwed.

So yes, this can be a valuable tool and I am glad this was posted, at the very least it shows that none of themes is a runaway resource hog.

#8 Anonymous, I don't doubt that

Anonymous, I don’t doubt that but these are starter themes we’re talking about here and it’s not about what they do. Yes, they serve the same purpose but it’s more about how you go about it. Different paths for the same ends, to build killer themes.

#9 Great info, but you missed a big one

Good info, I would really like to see how it compares to blueprint theme http://drupal.org/project/blueprint .

It is one that is becoming more and more popular and I am considering using a lot more.

On a side note, how did you do your nice little tables? I know how to do it a normal way but I was just wondering if there is a sweet drupal way I’m missing :)

#10 @Peter, I wanted to compare

@Peter, I wanted to compare all the starter themes but unfortunately I just didn’t have time.

Tables are coded by hand originally, I have a few samples saved as snippets and just copy/paste them in. The styles are native to the theme.

#11 Any chance you could run the

Any chance you could run the Studio theme through these tests? http://drupal.org/project/studio

They use a particular method of executing templates which I think will have a big impact on performance.

#12 @8, wow thanks for the heads

@8, wow thanks for the heads up, just added the Studio suite of themes to the starter themes test site. The theme looks most interesting, hopefully I’ll have some time to review it and yes, I may well do a comparison as this looks quite different to the other themes.

#13 Really nice and useful

Really nice and useful comparison.
 Thanks.