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.
- 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
Some CSS properties are just slow
border-radius is among the most expensive CSS properties to affect rendering time. mainly repaint.
- Fixed background has large repaint cost, kills scrolling performance
- Compound cost
What are paints and repaints?
- DOM nodes with visual output have RenderObjects
- We traverse a tree of these and call a paint method to display content on screen
- 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
- 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:
- 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
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.
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
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
- 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 Chromium.org
Why use Telemetry?
- 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!