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
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
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.
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
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
$ gem install har
$ phantomjs examples/netsniff.js http://www.refreshaustin.com/ > ra.har
$ har ra.har
$ 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.
