This talk brings the dirty, sexy money

What defines a great webapp experience?

  • Snappy, silky scrolling, smooth animations
  • Shit works.
  • Great performance on desktop and mobile
  • Typically means you’re hitting a good frame rate - what does this mean?

Jank & frame rate

  • Frame rate - rate at which a device produces consecutive images to the screen (aka frames)
  • A low fps (e.g < 15 a fps) means individual frames can be made out by the eye
  • Jank is a disruption in consistent frame rate that manifests itself visually
  • High FPS == responsive feel to users
  • Before and after demo

Why do you need to care about it?

  • Difference between a “native” feel and unpolished one
  • Frame rate can directly impact engagement, conversation rate
    • “In an A/B test, we slowed down scrolling from 60fps down to 30fps. Engagement collapsed”
    • This was on a native app, 60fps performed best, 30fps (locked) 2nd best
    • Frame rate matters if you want engaged users
    • Target 60fps or 30fps (constant) if possible

Why target 60fps?

  • Animations should try to match the refresh rate of the device they are being used on. Usually 60hz.
    • Phones: 55-60hz
    • Laptops: 58-60hz (50hz in low power mode)
    • Most monitors: 50-62hz
  • Chrome throttles frame rate at your device refresh rate

What do the numbers mean?

  • < 15fps a second, your users will perceive jerkiness and jitter
  • 30fps can provide a silky smooth 30fps as long as its a constant 30fps
  • At 60fps, we are able to hit smooth animations, transitions with no stutter.
  • Demo

Frame budget

  • At 60fps, each frame has 16.7ms of budget to do all of your logic processing, compute processing AND render
  • Anything over will slow you down
  • Because of browser, renderer and JS engine processes, more like 8-10ms
  • This margin is smaller for slower devices like mobiles
  • Many ops are 6x more expensive on mobile (e.g parsing HTML)
  • GPU is slower than desktop, but faster than doing all compositing on the CPU

What janky things slow down frame-rate?

More causes of jank

  • Long image-decodes (e.g decoding PNG/JPEG)
  • Unnecessary image resizes (remember to prescale your images!)
  • Heavy animation or data processing.
    • Where possible rely on rAF or where feasible Web Workers
    • Make sure there are also no other event handlers causing issues with your rAF callbacks and keep them short (ideally, < 15ms on mobile)
    • JS is single threaded if timers fired, input handlers running. Your rAF callback just won't run
  • Repaints

Some CSS properties are just slow

  • border-radius is among the most expensive CSS properties to affect rendering time. mainly repaint.
  • box-shadow
  • transforms
  • linear-gradient
  • Fixed background has large repaint cost, kills scrolling performance
  • Compound cost

What are paints and repaints?

  • Paint:
    • DOM nodes with visual output have RenderObjects
    • We traverse a tree of these and call a paint method to display content on screen
  • Repaint:
    • Updating the screen due to changes in the page
    • These changes invalidate the rectangle on screen (draw rect)
    • Expensive and can make your page look sluggish
    • Also necessary. Key is to make them small (not the whole page)
  • Paul has a great post on GPU-ifying a layer

What causes a repaint?

  • DOM node changes in JS, causing a layout recalc of the page
  • Animations played that get updated in a frame-based cycle
  • Interaction like hovering, causing style changes on elements
  • Operations which cause the layout of the page to change
  • We have some tools to help diagnose paint issues..

GPU/hardware acceleration hacks

  • -webkit-transform: translateZ(0);
  • -webkit-transform: translate3d(0,0,0);
    • Turns on GPU acceleration, if supported
    • Creates a new layer with its own backing surface (graphics context)
  • GPU/hardware compositing acceleration is good.
  • It means the GPU assists with constructing the page instead of just the CPU
  • Forcing layers may not be right, but need to be aware of trade-offs.
  • iOS workarounds:
    • -webkit-perspective: 1000;
    • -webkit-backface-visibility: hidden;
  • Some of these hacks becoming less relevant

DevTools: Show paint rectangles

  • Under ‘Rendering’ in the Settings cog, you can enable a feature called ‘Show paint rectangles’
  • Helps you visually see the area repainted in each frame.
  • E.g modify a single elements style in DevTools. You’ll see only the rectangle is redrawn.

DevTools: Show composited layer borders

  • Get insights into the structure of composited layers
  • See what is being accelerated at a GPU level
  • Demo

DevTools: Continuous painting mode

  • Helps identify which elements are costly on the page.
  • It puts the page into an always repainting state, showing a counter of how much painting work is happening.
  • Demo

Finding the problem:

  • Make sure you're in Incognito mode
    • Extensions, apps can affect perf.
  • Open up your page and the DevTools
  • In Timeline, record and interact with your page
  • Check for frames that went over budget (i.e < 60fps)
  • If you’re close to budget, likely over budget on mobile
  • Check what the cause of the jank was. Long paint? CSS layout? JavaScript?

Fixing the problem:

  • Go to Settings and enable "continuous page repainting"
  • In Elements panel, hide anything non-essential using the hide (H) shortcut
  • Walk through the DOM tree, hiding elements and checking fps in Timeline
  • You should discover what element(s) are causing long paints
  • Uncheck styles that could impact paint time (e.g box-shadow) and recheck fps
  • Continue until you’ve located the elements and styles responsible for slow-down

Bonus: Telemetry

  • Python framework for writing platform performance tests
  • Get scrolling, memory, rendering/paint performance
  • Wrapped around DevTools remote debugging protocol
  • Can be run against Chrome for Android
  • Get it over at

Why use Telemetry?

  • Scriptable
  • Cross-platform performance testing, can run other browsers
  • Tests can be written using just HTML/CSS/JS (with a little python)
  • Supports authentication if logins required

Mobile-first performance benchmarking

  • Your frame rate on desktop != frame rate on mobile, ever.
  • Test on low-end hardware. Make sure you're getting 60fps there
  • Harder to start on high-end then hack your experience to perform on low-end hardware
  • PS: We're moving paint off the main thread. Multi-threaded paint in Chrome for Android. Non-blocking. More budget.
  • Let's look at paints on mobile for realz. Alternatively..
adb forward tcp:9222 localabstract:chrome_devtools_remote


  • Frame-rate matters and can impact engagement
  • Paints are a big problem but luckily there’s tooling to help
  • Check your perf on both desktop AND mobile.
  • If all goes well, this could be you!

<Thank You!>