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.

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

  1. Dean Clatworthy

    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
    1. frank Post author

      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. Hamish

    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
    1. frank Post author

      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. Giuliana Ferran

    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. Sarkari Naukri

    Ha frank , i think you should now upload it to wordpress repository so everyone could taste this theme :D 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. masterwoo

    I’m getting error cannot re-declare the functions which are already there in the parent theme. How to get rid of these errors.

    Reply
    1. frank Post author

      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?

      Reply
  6. masterwoo

    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
  7. masterwoo

    Thanks it was the malicious code which was creating problem…Thanks its fixed now…Also thanks for excellent child theme…

    Reply
    1. frank Post author

      I’m not really a design- & CSS gifted person i’m afraid MasterWoo, my entry into themes with 2012.FFWD is purely performance-related :-)

      Reply
  8. Pingback: Nouveau reboot, one more time | Donemat!

  9. Simone

    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
      1. Simone

        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

  10. Simone

    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
  11. Pingback: Best Top Free and Paid WordPress Twenty Twelve child themes - Judith Knight Digital Web Designer User Experience UX Developer illustrator Macclesfield

    1. frank Post author

      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
  12. Pingback: Google Pagespeed Results | Techish.net

    1. frank Post author

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

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

    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
    1. frank Post author

      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
  15. Anton

    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
  16. Chris Harris

    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
  17. Pingback: Guide till en snabbare WordPress-sida » FS Data

  18. Rudra

    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
  19. Rudra

    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
    1. Rudra

      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
  20. Rudra

    Just out of curiosity… Do you have any plans of updating this child theme in the near future..??? :)

    Reply
    1. frank Post author

      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
  21. Emily

    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
    1. frank Post author

      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
  22. Val

    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
      1. Ridha

        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.

Leave a Reply

Your email address will not be published. Required fields are marked *