Making
websites
fast



Refresh Austin

Who am I?



Chris Ruppel

frontend dev @ Four Kitchens

twitter.com/rupl

github.com/rupl

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?


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


Tools:
How do I pull this stuff off?


Load times


How do I make pages load faster?

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

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.



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


Perception


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="http://example.com">

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="http://example.com/faq">


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.

Source: http://alexsexton.com/blog/2013/03/deploying-javascript-applications/

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

WEB PAGES: Y U SO SLOW??

Load time testing

YSlow

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


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



Tools


How do I pull this stuff off?

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


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

Questions?


Contact me:

drupal.org/user/411999

github.com/rupl

twitter.com/rupl

chris ❀ fourkitchens.com