frontend dev @ Four Kitchens
(Even when they don't realize it.)
How do I make pages load faster?
How do I make pages seem to load even faster?
How do I pull this stuff off?
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"
The real fun starts once you've got these under control.
Strive to deliver the best experience everywhere
NOT the same experience. The best experience.
♥.¸¸.•°*☆ (づ◕‿◕｡)づ <(^_^<)=- ☆*°•.¸¸.♥
let's talk about conditional loading
Load things based on tests
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.
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.
Conditionally load modular content,
provided it exists at its own self-contained URI
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 might be able to predict user actions
Preempting the user makes things
feel instant even if they aren't.
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
<link rel="prefetch" href="http://example.com">
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.
<link rel="prerender" href="http://example.com/faq">
Conditional loads can be action-based, instead of technology based.
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
Grades your web pages and makes suggestions to improve your frontend performance
Available as a browser extension
# 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
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.
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?
Mobile performance testing
In the early days you downloaded extensions
Now it's included and browsers share features.
Why? They all want the Open Web to win.
want to hear from YOU
Secrets of DevTools (all)
Wait, DevTools can do THAT? (Chrome)
Discover DevTools from CodeSchool (Chrome)
(or jslint.com if you need more Crockford)
grunt - task-based command line
Automates grunt work for you
chris ❀ fourkitchens.com