High Performance Theming

DrupalCon Munich 2012

Presented by Chris Ruppel

Who am I?

Chris Ruppel

frontend developer

Four Kitchens: we make BIG websites

I do Drupal stuff sometimes:

What is this about?

Hint: not theming :)

Frontend performance

flashy effects < lean and fast

Users want performance over cool effects.

(Even when they don't realize it.)

Mobile devices increase these problems.

Topics covered

Frontend development: How can I build/debug faster?

Web Performance: How do I make pages load faster?

Drupal-specific tools: It is DrupalCon after all..

Frontend development

How can I build/debug faster?

Browser Development Tools



In the early days you downloaded extensions

Now it's included and browsers share features.

Why? They all want the Open Web to win.

Browser Makers

want to hear from YOU

Chrome devtools protips

(Similar features available in all browsers)

Easily check the media query that supplies each style

Media queries are displayed within the 'Styles' section of the Chrome element inspector

Spoof user-agent and dimensions

Browsers can spoof their user-agent string and screen dimensions. Settings are under 'User-agent' tab.

Disable all caching

(while the devtools are open)

Chrome can disable all caching while its devtools are open. Settings are under 'General' tab.

Great for testing network waterfalls!

Network waterfalls

The first step to debug load-time issues

Chrome's network waterfall tools.
Waterfalls show the sequence and timing of your browser's network activity as it assembles a web page.

Chrome's network waterfall tools: total number of requests
Total number of requests required to assemble web page.

Chrome's network waterfall tools: total page weight.
Total amount of data transferred to assemble web page (page weight).

Chrome's network waterfall tools: total time required.
Total amount of time required to assemble web page.

Chrome's network waterfall tools: time to DOMContentLoaded.
Total amount of time before the DOM is ready.
Users start to "feel" like the webpage has loaded.
jQuery does not execute until this event has occurred.

More info

…about Frontend tooling @ jQuery UK 2012

…about using waterfall charts to interpret webperf data

Web Performance

How do I make pages load faster?


Not everything is universal

Applying optimization where none is needed can actually slow your site down in some cases

Act on problems that you discover on
each site that you test
not according to "best practices"

Having said that…

Universal stuff

  • Reduce HTTP requests
  • Minify/concatenate CSS and JS
  • Combine images into sprites
  • Move scripts to the bottom

The real fun starts once you've got these under control.

JavaScript Tools

♥.¸¸.•°*☆ (づ◕‿◕。)づ <(^_^<)=- ☆*°•.¸¸.♥

  JS                         me


by Filament Group


Problem: CSS is loaded when it is not needed.

Sometimes it will never be used. It's just dead weight.

Example: mobile phone downloading CSS with
@media (min-width: 1400px)
then it downloads your big background images

Solution: eCSSential will only load CSS that is needed immediately. It lazy-loads CSS that might be used.

Code: https://github.com/scottjehl/eCSSential


Problem: we need different images for different device contexts. Affects usability and page weight.

Picturefill was developed to explore responsive images before a native browser implementation emerges.

Code: https://github.com/scottjehl/picturefill/


Problem: user-agent sniffing is error-prone;
unable to scale as more devices are created

Solution: Detect individual features on each browser

Bonus: load additional files depending on the
test results (conditional loading)

Code: http://www.modernizr.com

Drupal Tools

What has Drupal solved?


Problem: most JS within Drupal core is not minified.

Read: How does minifying JS help performance?

Solution: Minify files to make them smaller and decrease download time.

Code: http://drupal.org/project/speedy

Adding scripts-at-the-bottom feature

Modernizr 7.x-3.0

Problem: sometimes it's hard to keep track of what Modernizr tests your Drupal site needs.

Modernizr.load() API
Available to all themes and modules.

  • Drush commands
  • Libraries integration
  • Speedy integration

Code: http://drupal.org/project/modernizr

Disclosure: I maintain this Drupal module.



D7 - Module available at http://drupal.org/project/resp_img

D8 - Core implementation WIP http://drupal.org/node/1170478

Drupal 8 efforts are helping influence the formation of this web standard



Web performance testing



Grades your web pages and makes suggestions to improve your frontend performance

Available as a browser extension

Also available as a JS-based bookmarklet for use on mobile



It won't grade your site, but it gives you the raw data that you can get from a waterfall.

Run tests from many locations worldwide
Many browsers (IE6+, FF, Chrome)

What does it test?

  • Intial load-time
  • Repeat load-times (caching)
  • Waterfalls and connections
  • Headers for every request

Akamai Blaze


Mobile performance testing

  • Similar data as webpagetest.org
  • Pick which device to test
  • Number of repeat loads
  • Location to test from


Contact me:




chris ❀ fourkitchens.com

Rate this session!

Visit the session pageto leave feedback.
It means a lot to me ❤ Thanks!

Short link: http://j.mp/dcmunich-hpt

Select "Provide feedback on this session"