Who am I?

Chris Ruppel

frontend developer

I do Drupal stuff sometimes:

• http://drupal.org/project/modernizr
• http://drupal.org/project/respondjs
• D8 HTML5 Initative
• D8 Mobile Initiative
• COD 7
• http://drushmake.me

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

Browser Development Tools

(devtools)

History

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

• @ChromiumDev
• @ODevRel
• @mozhacks
• @IE

Chrome devtools protips

(Similar features available in all browsers)

Easily check the media query that supplies each style

Spoof user-agent and dimensions

Disable all caching

(while the devtools are open)

Great for testing network waterfalls!

Network waterfalls

The first step to debug load-time issues

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

Total number of requests required to assemble web page.

Total amount of data transferred to assemble web page (page weight).

Total amount of time required to assemble web page.

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

Warning:

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.

SouthStreet

by Filament Group

eCSSential

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

Picturefill

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/

Modernizr

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

Speedy

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.

Picturefill

(again)

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

Testing

Web performance testing

YSlow

http://developer.yahoo.com/yslow/

WebPageTest.org

http://www.webpagetest.org/

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

http://mobitest.akamai.com/

Mobile performance testing

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