Who we are

Paul Lewis
Peter Beverloo

Who is your target?

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

Survey of ~200 developers, February 2013

If we prioritize a single form factor...

Along comes a new form factor...

Oh hello, mobile!

We ship inferior "mobile experiences"

Along comes a new form factor...

Oh hello... wait, what‽

It's not just desktop & mobile

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

It's just "the web"

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

Becoming Device Agnostic

Oh hello, everyone!

The Grand Unified Theory of Devices

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

Devices vs. Constraint

Desktop Good Good Good Large
Mobile Bad OK Bad Small
TV Good Bad Bad Large
Console Bad OK Bad Small
New Device ? ? ? ?

Devices vs. Constraint

Desktop Maybe Maybe Maybe Maybe
Mobile Maybe Maybe Maybe Maybe
TV Maybe Maybe Maybe Maybe
Console Maybe Maybe Maybe Maybe
New Device ? ? ? ?

Know your Chrome DevTools!

Solving for Network

Page Load Time (PLT)

Reduce your Requests

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

Reduce Image Overhead


PageSpeed Insights

Resource Timing API

Solving for Compute


  • 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 Recalculations

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

Avoid Layout Thrashing

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

Avoid Layout Thrashing

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

Remove Unnecessary JavaScript

  • 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

Solving for Render

Reduce Image Overhead... Again!

Reduce Paint Cost

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

First, reduce the size...

Then, reduce the complexity...

Solving for Your Users

The same content and functionality

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

Users come to you for content

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


Assign a Sheriff

  • 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

Check out jankfree.org!



  • 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

Thank You!

@aerotwist | google.com/+aerotwist
@beverloo | peter.sh/+