Chris Ruppel

frontend dev @ Four Kitchens

twitter.com/rupl

github.com/rupl

(we're hiring!)

I contribute to open source stuff:

• Modernizr Drupal module
• Modernizr
• jekyll-schedule
• Drupal 8 HTML5 Initative
• Drupal 8 Mobile Initiative

What is frontend performance about?

Users want performance
over cool effects.

(Even when they don't realize it.)

Mobile devices suffer even worse

Topics covered

Load times:
How do I make pages load faster?

Perception:
How do I make pages seem to load even faster?

Tools:
How do I pull this stuff off?

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.

Your goal:

Strive to deliver the best experience everywhere

NOT the same experience. The best experience.

Further reading:
Tiered Adaptive Frontend Experiences (TAFEE) Modernizr 3 workflow

before we get crackin'

let's talk about conditional loading

Load things based on tests

• Browser properties
• Browser features
• User actions or preferences

Making these decisions in the browser is the core mechanism for tiered experiences.

Modernizr

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

Solution: Detect individual features on each browser

Bonus: includes a conditional loader called yepnope.js

Code: http://www.modernizr.com

If you need HTML5 audio or video, test for them.

If you need download blobs, test for them.

If you need CSS transitions, test for them.

If you need drag and drop, test for it.

If you need web sockets, test for it.

If you need inline SVG, test for it.

Conditional loading examples

Conditional CSS

Yes, your huge bg is so purty on a 30-inch display.
But it destroys my phone.

Make sure you need huge CSS/images before loading.

One less JPG

async load "below the fold"

Anchor-include pattern

Conditionally load modular content,
provided it exists at its own self-contained URI

Code: https://gist.github.com/983328

Third-party libraries

Consider deferred loading for optional widgets.

Let the browser render your content, then the slow,
monolithic social buttons can take their sweet time.

Examples: Social widgets, sharing tools

You can't change the
speed of the network :(

You might be able to predict user actions

Preempting the user makes things
feel instant even if they aren't.

DNS Prefetching

Allows you to do DNS lookups in the
background before they're needed.

Since the prefetch is initiated before any critical requests, DNS lookup is completed beforehand and does not hold up the requests that actually build the page (CSS/JS/images)

Examples: CDNs, separate shopping cart domains, affiliate sites, domain-based language switching

DNS Prefetch example

Read the HTML spec

Prerender Pages
(currently in Chrome and IE11)

Prefetching taken to its extreme.
Tested extensively by users of Google Instant.

Browsers render entire pages in the background (CSS/JS too), which appear instantly when user clicks.

Chrome offers a JavaScript API so you can check the status of prerendered pages or destroy them if needed.

Prerender example

More info:
Prerender in Chrome for instant page loads
Web Developer's Guide to Prerendering in Chrome

Third-party libraries (again)

Conditional loads can be action-based, instead of technology based.

Examples from Alex Sexton, all-around cool dude.

Quick user feedback

Easy win: remove the 300ms click event delay in iOS/Android. It's there by default to allow for scrolling without triggering links but it basically sucks.

FastClick is a slim JS library that dynamically replaces all click event handlers with touchstart.

Example: Browse DrupalCamp Austin on a touchthing

Testing

Load time testing

YSlow

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

Automating YSlow

    # install waterfall viewer (ruby)
    $ gem install har

    # capture a HAR file from the CLI
    $ phantomjs examples/netsniff.js http://www.refreshaustin.com/ > ra.har

    # view results in browser
    $ har ra.har

    # run YSlow on the waterfall
    $ npm install yslow -g
    $ yslow --info basic --format plain ra.har
            

Webhooks + Jenkins + this = per-commit Yslow scores!

Code compliments of Ilya Grigorik (or grab yslow for phantomjs)

Google PageSpeed Insights

Automatically profiles your site
for both "mobile" and "desktop"

Similar grading system with colors instead of letters. This also has the benefit of informing you how their search algo will think of your site.

Google PageSpeed Insights

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?

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

Navigation Timing

A JavaScript API that accurately measures page loads.

• W3 Spec
• Intro / tutorial

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
• @Apple

Links 'n' Resources

Secrets of DevTools (all)

Wait, DevTools can do THAT? (Chrome)

Discover DevTools from CodeSchool (Chrome)

Frontend tooling @ jQuery UK 2012

Using waterfall charts to interpret webperf data

Browser Versions are Dead

Workflow tools

JavaScript debugging

JSHint - a JavaScript Code Quality Tool

(or jslint.com if you need more Crockford)

Automation

grunt - task-based command line
build tool for JavaScript

Automates grunt work for you

• Compile your Sass on filesave
• Trigger LiveReload/Guard on filesave
• Run JSHint on filesave
• Minify files with UglifyJS
• Concat files and create builds
  of libraries or aggregates
• Tons of plugins with an
  active community

JS Testing

JSperf

JavaScript performance playground

• Runs JS code and tests how many ops/sec
• Integration with BrowserScope
• Social integration; people can discuss issues

Browse some example tests