Refresh Austin

Who am I?

Chris Ruppel

frontend dev @ Four Kitchens

Four Kitchens

(we're hiring!)

I contribute to open source stuff:

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?

How do I make pages seem to load even faster?

How do I pull this stuff off?

Load times

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.

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

JavaScript Tools

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

  JS                         me

Conditional loading

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.


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


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


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


How do I make pages
seem to load even faster?

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

<link rel="prefetch" href="">

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

<link rel="prerender" href="">

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.

Animated screenshot of deferred script downloads. The script doesn't download until the user's mouse gets within 200px of the Review button.


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



Load time 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

Automating YSlow

    # install waterfall viewer (ruby)
    $ gem install har

    # capture a HAR file from the CLI
    $ phantomjs examples/netsniff.js > 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

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

Mobile performance testing

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

Navigation Timing

A JavaScript API that accurately measures page loads.


How do I pull this stuff off?

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

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 if you need more Crockford)


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


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


Contact me:

chris ❀