WordPress 3.5 was released a couple of days ago, one of the new features being a completely new theme. Twenty Twelve, as it is called, is a responsive, html5-based theme which is just clear, simple and beautiful. I like it that much, actually, that after 5 years with Journalist, I’m considering switching to Twenty Twelve for my blog.
But as with all things web (images, social sharing widgets, fonts, themes and plugins/ modules) there’s a potential performance-cost. Some themes by default come with heavy background-images, jquery and jquery-plugins, and a handful of webfonts to download. So let’s look into Twenty Twelve’s performance, shall we?
My tweaked Journalist implementation on my testblog will serve as a baseline:
- loadtime: 0.940s
- requests: 6
- total download size: 12KB
- full testresults: http://www.webpagetest.org/result/121214_SA_F3D/
Switching to an out-of-the-box Twenty Twelve gives:
- loadtime: 2.457s
- requests: 9
- total download size: 142KB
- full testresults: http://www.webpagetest.org/result/121214_BT_ETN/
Wow, that’s pretty sad, no? The reason for this performance-hit; Twenty Twelve comes with Google webfonts, causing 5 downloads (1 CSS file and 4 font-files) totaling over 124KB of webfont-fatness. I’m not a big fan of webfonts, so I dove into the code to disable them and the results all of a sudden are a lot more pleasing:
- loadtime: 0.961s
- requests: 4
- total download size: 17KB
- full testresults: http://www.webpagetest.org/result/121214_RD_EJ5/
So I’ll probably look into the creation of a child theme which will be optimized for performance (there’s some CSS and JS minimizing to be done as well, for example) before switching to Twenty Twelve.
[UPDATE 20/12/2012; 2012.FFWD, a high performance Twenty Twelve child theme, is here]
