Starter Theme Performance Metrics
- 13 Comments
- Latest Comment
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
| 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
| 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
| 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
| 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:
- For light page-weight and best code to content ratio: Genesis Lite - hands down, by far the pick of the bunch.
- For speed: Stark. Small footprint and no additional database queries.
- 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.
Drupal Version:
Drupal Development:
Drupal:
Comments
#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?
#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.
#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 :)
#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.
#13 Really nice and useful
Really nice and useful comparison.
Thanks.







#1 Awesome break down
great info!