2012.FFWD; high performance Twenty Twelve child theme

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.

61 thoughts on “2012.FFWD; high performance Twenty Twelve child theme”

  1. 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 ๐Ÿ™‚

    Reply
    • 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 ๐Ÿ™‚

      Reply
  2. 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

    Reply
    • Hi Harnish;
      Download the archive and look at the source (mainly style.css and functions.php), it’s pretty straightforward really;

      1. create a directory in wp-content/themes and put style.css in there which contains the referral to the “parent theme” (cfr. this WordPress Codex page
      2. run the stylesheet through one of the many online CSS minimizing tools to reduce its size
      3. in the child theme directory create functions.php and in there dequeue the fonts (wp_dequeue_style) and the navigation javascript (with wp_dequeue_script)
      4. in functions.php create a function to add the (minimized) javascript inline and have the wp_footer-action call that function to add the JS to the footer

      Hope this helps,
      frank

      Reply
  3. 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.

    Reply
  4. 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

    Reply
  5. 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

    Reply
  6. 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.

    Reply
  7. 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!

    Reply
    • 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?

      Reply
    • 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

      Reply
  8. 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)

    Reply
  9. 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

    Reply
    • 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 … ๐Ÿ˜‰

      Reply
  10. 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

    Reply
  11. 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

    Reply
  12. 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.

    Reply
  13. 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.

    Reply
    • 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…

      Reply
    • 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 … ๐Ÿ™‚

      Reply
  14. 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

    Reply
    • 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

      Reply
  15. 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!

    Reply
      • 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!

        Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.