Twenty Twelve is beautiful but slow, so I created 2012.FFWD. This Twenty Twelve child theme looks pretty much the same as the original, but comes with the following performance-boosting changes under the hood:
- no webfont downloaded: loading fonts slow sites down, always. Fallback-fonts as defined in Twenty Twelve (Arial, Helvetica, Sans-Serif) are used instead.
- minimized style.css: the amount of CSS is staggering, even minimized we’re still at 28KB!
- minimized and inlined navigation.js: the overhead for doing a separate request for small javascript-files is bigger then the increase in filesize when inlining.
And these small changes indeed seem to have a pretty good impact on performance when comparing my previous test with Twenty Twelve with a new one for 2012.FFWD;
- from 9 to 3 requests
- from 142KB to 15KB downloaded size
- loadtime from 2.457s to 0.937s
You can download the child theme here for now, but I might upload it to wordpress.org’s theme repository later.
Before applying 2012.FFWD on my own blog, I had to do some emergency bugfixing in Autoptimize. Autoptimize is the plugin I use to aggregate and minify JS and CSS (including data-uri magic on background images), but it is currently unmaintained. It messed Twenty Twelve (and hence 2012.FFWD) up severely when viewed in IE7 and IE8, aggregating html5.js into a javascript-file loaded at the bottom of the HTML and loading the IE-specific CSS before the aggregated generic CSS. If anyone is interested in my bugfixed version of Autoptimize (there’s some other fixes in there as well), drop me a line.
Just wanted to say thanks for saving me the effort doing this. After upgrading from 2011 to 2012 this morning, I was disgusted to see the increase in the number of requests and page-size. I’ve experienced no issues so far, and added Clouldflare to sit in top of this. I’ve gone from an average of over 2s pageload with no optimisations to an average of under a second. I’d suggest you look into Clouldflare too if you get a chance ๐
You’re welcome Dean, glad this is useful.
Regarding Cloudflare; it’s a great service, but it can be pretty aggressive with regards to e.g. CSS & JS optimizations (i.e. breaking stuff). I prefer optimizing locally (wp super cache + autoptimize) and serving images + optimized js/ css via a normal CDN (MaxCDN) instead, which generally allows me to dip below the magical second as well ๐
Can you give some pointers on how you did these three things?
I’m impressed and would like to be able to apply the same to other themes.
Hints? Tutorials? Links?
Cheers,
Hamish
Hi Harnish;
Download the archive and look at the source (mainly style.css and functions.php), it’s pretty straightforward really;
Hope this helps,
frank
Before installing FFWD child theme , due to minify navigation js problems, my menu button was useless, now I have disabled minify js in W3 TC and enabled inline js minification. My Google page speed mobile score passed from 82/100 before FFWD to 99/100 now.
Thanks! This Child Theme deserves a wide audience.
Ha frank , i think you should now upload it to wordpress repository so everyone could taste this theme ๐ I am saying this because today itself i discovered your blog and if i haven’t found this i would have also not seen this great and updated theme. Using for one of my personal blog.
Regards
I’m getting error cannot re-declare the functions which are already there in the parent theme. How to get rid of these errors.
Evening MasterWoo; It should work out of the box, first time I read about such an issue. Can you copy/paste the exact error-message?
Getting this error when activating the child theme
Fatal error: Cannot redeclare _check_isactive_widget() (previously declared in C:\wamp\www\indiapricepoint\wp-content\themes\2012.ffwd\functions.php:21) in C:\wamp\www\indiapricepoint\wp-content\themes\twentytwelve\functions.php on line 473
That is very weird Masterwoo, as neither TwentyTwelve or 2012.FFWD contain that function. Can you open the files mentioned and check if that function indeed is in there? If so, I would suspect you’re encountering another problem altogether.
Thanks it was the malicious code which was creating problem…Thanks its fixed now…Also thanks for excellent child theme…
Frank could your please help me with a header similar to on http://designerfied.com/ and pagenavi like that
I’m not really a design- & CSS gifted person i’m afraid MasterWoo, my entry into themes with 2012.FFWD is purely performance-related ๐
Hello Frank and thanks for your work, i have a little problem with the style.
I edited the css because i want that table must have a certain width so here is the code i used
@media screen and (max-device-width: 480px) and (min-device-width: 320px) {
table {
width: 450px !important;
}
but it doesn’t work, surfing with my smartphone Android device to http://www.fxmypics.com/fx-library-black-and-white/ where i have a page with a table seems doesn’t apply it.
could it be you’re just missing a closing bracket?
Thanks for your reply Frank, this is the style applied http://www.fxmypics.com/wp-content/themes/2012.ffwd/style.css as you can see i added the lines regarding the tables just after the commented lines, but i see that it doesn’t effect this page http://www.fxmypics.com/fx-library-black-and-white/ where i have the table.
I use the plugin Any mobile theme switcher to show a theme for desktop visitors and your theme for mobile visitors.
I tried also setting your theme as default for all, but same results, the only style applied to the table in that page is an inline style which apply margin auto.
Where im wrong?
Thanks
I think your table is just too big; as it has 5 cells per row and each cell holds an image of 150px wide, you already have a minimum of 750px. add some margin/ spacing and you have a width of at least 800-ish pixels. No easy fix here, but maybe this article can put you in the right direction (although it focuses on data tables)?
Hello Frank and yes you are right the table is enough large as you said, thanks for the article suggestion, i will look for and see if can find a good solution!
I have just installed this theme on my site. I don’t know much about WordPress, so thanks so much!
Thanks, Frank. Your theme is really good.
Thanks, it is really a big improvement!
Hi Frank.
Do you plan to release an high performance child theme of the new WordPress 3.6 “Oscar” theme?
Thanks
Probably not Simone; instead of focusing on (a) theme(s) for WordPress-performance, my focus is on Autoptimize, a WordPress plugin that aims to improve performance of all WordPress installations, regardless of the theme used. Maybe that can solve some of your performance worries?
Hi How do you remove the big gap at the top of the page above the menu. It looks terrible i.e on here http://www.pinforprofit.net/
Thanks
That’s because you don’t have a site-title or site-description. You can hide the placeholders for those by adding
hgroup {display:none !important;}
to your CSS.
hope this helps,
frank
Ok Thanks Which sheet would i add that to and does it matter where?
I have the following in the editor on the riht hand side menu
Cheers
Stylesheet
(style.css)
Visual Editor RTL Stylesheet
(editor-style-rtl.css)
Visual Editor Stylesheet
(editor-style.css)
RTL Stylesheet
(rtl.css)
I would add it to style.css (but do take into account that it’ll get overwritten in case of a theme update).
many thanks Frank. I appreciate it
Hi Frank.
I tried your child theme but even though I compressed the CSS Google Pagespeed still says the stylesheet needs to be minified?
Minifying http://www.mysite.com/โฆent/themes/2012.ffwd/style.css?ver=3.8.1 could save 1KiB (4% reduction).
Is it maybe the comment section that need to be removed?
But the reference to the parent theme (twenty twelve) needs to be there..
Any idea?
err … try a js/css optimization plugin maybe? ๐
Eh I tried removing the top section in the CSS and it works now.
I thought it was needed to reference the parent theme but apparently it doesn’t?
btw I don’t see ANY Google Pagespeed improvement. My score is exactly the same as using without the childteam.
What I never understood is why TT uses loads jquery on every page though?
http://www.mywebsite.com/โฆ-includes/js/jquery/jquery.js?ver=1.10.2
http://www.mywebsite.com/โฆs/jquery/jquery-migrate.min.js?ver=1.2.1
weird, i thought the header in the CSS was needed for the child-mother relationship between the themes. but on the other hand if your pagespeed doesn’t improve, maybe things aren’t working as they should. any yeah, jquery, don’t get me started … ๐
Yeah I though so as well.. Don’t get it, removed the whole block and no problems.
Whoa I just found out a huge speed improvement.
in your twtwFFWD_queuing() function I used `wp_dequeue_script(‘jquery’); wp_deregister_script(‘jquery’);`
This load Jquery from Googles CDN and puts it in the footer instead of the head.
From 68 to 80 score on Mobile
From 81 to 89 score on Desktop
Is this based on the latest Twenty Twelve version 1.3? If not what version of Twenty Twelve was this based upon? Thanks so much for putting this out,
Thanks,
Chris
not sure really, but as this post is from december 2012 it’s bound to be one of the earlier versions?
Hi guys, yeah it’s TT v1.3.
Happy with the speed now,
thanks for this post Frank.
Nice post frank, now the new twenty twelve already launch, do you know how to make it load fast ?
You could use Autoptimize (or another CSS/JS aggergator+minifier plugin) and “Disable Google Fonts“? That should give you the same results (and will also optimize other plugin’s CSS/JS).
HI,
I have downloaded and installed the 2012:FFWD child theme. The page speed has increased tremendously. The current fonts look bad in terms of readability. I have hosted wordpress on a CentOS 6.5 machine. I have installed ubuntu fonts on my server. Just wanted to know how to make wordpress serve these fonts. I need Ubuntu Light and Ubuntu Light Italic.
Well, you would have to change the CSS, adding @font-face to point to your local fonts as documented here.
Wow..!!!!!
That was a quick response from you. Thanks for sparing your time and providing me that informative link. I will take this forward from here.
Hi Frank,
I need some more help from you (if I am not troubling you too much of late…. ๐ ) I have set up WP with twentytwelve theme. I have chosen to display my blog posts in my home page. But the issue is.. All the posts are appearing full length. The same is happening in category view as well. With some othes themes (like iconic one) the posts are displayed in small snippets with a Continue reading option. I am not able to achieve the same with twentytwelve. I do not want to leave twentytwelve as its simple and elegant. Any tweaks or plugins that you know which may do the trick for me…
https://wordpress.org/plugins/auto-excerpt-everywhere/ might work. If not, you could copy twentytwelve’s content.php to the 2012.ffwd-folder and put line 38 and 42-47 into comments in which case every post overview page will have excerpts just like on the search results.
frank
Just out of curiosity… Do you have any plans of updating this child theme in the near future..??? ๐
Not really Rudra, although I still use 2012.FFWD myself I’ve moved into the adventurous lands of Autoptimization since then and except for removing Google Fonts all other changes can be done with that instead of using a child-theme, so … ๐
Hi, Frank
I have download the theme, install and activate. I found the problem that the navigation on small screen not working. It does responsive but when click on the button, the menu doesn’t show. Seem that the button doesn’t work like on your website. Would be great if you help to fix. The site is as in the comment form.
Thank you.
Emily
Hi Emily;
It seems like 2012.ffwd isn’t aging nicely. I’ll look into updating it when I have some time to spare, but my main focus is on Autoptimize, a WordPress plugin to optimize every theme. A quick solution might be to switch back to twentytwelve and use Autoptimize to squeeze more performance out of it?
Kind regards,
frank
Hi Frank! Thanks for FFWD! My TT is fast now!
But i have the same problem as Emily – the menu doesnโt shown when i click on the button. Unfortunatly Autoptimize don’t helps me.
I hope on soon upgrade!
I’ll see if I can find time to push out one last update one of the following weeks ๐
Wow! It would be great! ๐
Have you update the new version?
I have try the child themes, but I still have problem in menu navigation. The menu still doesnโt show in mobile version.
Thank you very much.
no update yet, sorry.
I love 2012.FFWD!! =)
But the menu does not work in mobile?
I also use WP Fastest Cache*
Do you have JS optimization active in WPFC? you might have to tinker with that a bit?
Hello again, thanks for quick reply! I’ve installed your theme in many of my sites today and wow! I am really impressed how fast and good it is compared with other fast themes! You really know what you’re doing! =) But the menu of the mobile phone, I do not work though I uninstall all plugins? =) Then I wonder if you can take a look at this regarding H1 and H2: https://wordpress.org/support/topic/twenty-twelve-too-many-h1-tags It is perfect on the Twenty Ten. h1 heading on the home page and h2 on post and then it’s h2 on heading and h2 on single post. Google does not like so many h1 =)
Greetings from Sweden. Sorry for bad english. =) Thanks!
just updated 2012.ffwd to fix the mobile menu problem, but I’m not planning on any other improvements/ fixes Tommy, sorry.
I updated 2012.ffwd to fix the mobile menu problem, you can download the updated child theme here. Have fun! ๐