We ran a small survey about which form factors developers support vs prioritize.

We have more form factors than ever before, and it's accelerating.

It’s not the desktop web, nor the mobile web...

We can assess every device (known and unknown) in the same way:

• Check out The Breakpoint
• Watch Chrome DevTools Revolutions 2013
• Hit the DevTools docs

Source: Strangeloop

• Every request has a latency, bandwidth and financial cost
• Obsolete your requests: do you need that file?
• Reduce your requests: concatenate and minify

• 60% of web traffic is images^[1]
• Change formats: WebP saved the Chrome Web Store several TB of transfer^[2]
• Request images at the size you need - let the server do the work!
• Do you even need images? SVG may be better a better match!

• Automatically speeds up your site and reduces page load time
• Available for Apache and in beta for nginx

• Pop your site in, hit "Analyze"
• Get free network performance advice!

• High-fidelity timing information per resources
• Track performance and provide an adaptive experience

• Chrome synchronizes to the refresh rate of the device
• At 60Hz all of Chrome's work has ~16.7ms to complete (frame budget)
• Users notice missed frames and they don't like it!

• Limit style changes to the DOM
• Don't change the body when you should change child elements directly

var target = document.getElementById('target');

// set each element to have the same width as the target
for (var e = 0; e < elements.length; e++)
  elements[e].style.width = target.offsetWidth + 'px';

• We get offsetWidth (causes a layout)
• We set style.width (invalidates the layout)
• We repeat that process

var target = document.getElementById('target');

// get the width and cache it
var targetWidth = target.offsetWidth;

// now set each element's width with the cached value
for (var e = 0; e < elements.length; e++)
  elements[e].style.width = targetWidth + 'px';

Layout Thrashing Demo

• Don't do in JS that which can be done in CSS: animations & transitions
• position:fixed is your friend
• position:sticky is upcoming
• Keep your event listener code to a minimum, they can run several times per frame

• When you scroll or interact parts of the page get painted
• Painting is expensive
• Keep painting to a minimum

• You are subject to many constraints
• Don’t pass them on to users
• You should not offer reduced functionality

• Big screens = room for content
• That doesn't work for small screens
• Give them the same content, but refactor for the constraint

• Clarify your constraints before you start
• Set limits (number of requests, GCs, paint time, layout, style calculations)
• Track it during the lifetime of the project
• Don't ship until you hit your targets

http://jankfree.org/ - some must-see resources

Also watch Jank Free: Chrome Rendering Performance

• It’s not about devices, it’s about content
• Every device is likely to have at least one constraint
• Let the browser do the work
• Above all, deliver the content to your users quickly