1. The document discusses optimizing user interface performance by reducing jank caused by the browser missing frame rendering deadlines.
2. It explains how browser rendering works and the different types of changes that can trigger layouts and repaints.
3. Potentially dangerous UI patterns are identified like overusing animations, parallax effects, fixed elements, scrolling events, hover effects, and improperly loading images. Optimizations like using transforms and the will-change property are recommended.
9. Optimise Critical Rendering Path
Use progress bars instead of spinners
Have a placeholder content
Start upload before user even
decides to click the upload button
18. Agenda
1. Why sometimes interactions feel slow
2. Browser rendering and frames
3. Types of triggered changes in the UI
4. How to test for interaction performance
5. Potentially dangerous user interface patterns
38. What creates new layers?
1. 3D or perspective transforms
2. Animated 2D transforms or opacity
3. Being on top/a child of a compositing layer
4. Accelerated CSS filters
5. In special cases <video>, <canvas>, plugins
6. will-change CSS property
61. Animations
1. Don’t overuse animations
2. Animate only transform and opacity if possible
3. For 120fps avoid requestAnimationFrame()
4. Don’t animate elements below other nodes (like
fixed headers)
5. Don’t animate too many elements
64. Parallax effect
1. Causes Paint Storms
2. Almost always bad
3. Don’t use scroll events
4. Don’t use background-position
5. Use 3D transforms and perspective if you need
to: https://developers.google.com/web/updates/
2016/12/performant-parallaxing
67. Fixed elements
1. Repaints with every frame when scrolling
2. Use will-change property (or transform:
translate3D(0,0,0)) to avoid repainting
.fixed-element {
position: fixed;
will-change: transform;
}
69. Scrolling events
1. Don’t attach wheel or touch listeners to the whole
document, use smaller areas instead
2. Take advantage of passive event listeners (use
with polyfill):
window.addEventListener("scroll", func, {passive: true});
72. Hover effects
1. If they are bound to happen often—you might
consider using will-change property
2. Can be deadly if there are too many and can be
easily triggered
3. Avoid effects triggering Layout or Paint:
https://csstriggers.com/
75. Appending elements
1. Make sure not many elements will be affected
2. Try to separate the area (will-change, contain:
layout)
3. Try not to change the size of area (for example
use overflow property)
80. Images: downloads
• Semantics = performance
• How image is embedded (img tag/background-
image) influences the time of download
• Comprehensive research by Harry Roberts
85. Images: content jumps
• No jumps in Chrome any more (scroll anchoring
enabled by default in Chrome 56)
• Can be avoided by using a placeholder content eg.
created with the intristic ratio:
img-height / img-width * 100%
.container {
padding-bottom: $intristic-ratio;
height: 0;
overflow: hidden;
}
87. Images: optimisation
• Less images = better performance
• Use correct format
• Make sure optimisation is the very last step (see
@kornelski https://pitercss.com/ talk once it is
released)
88. Takeaways
1. Jank happens when the browser doesn’t finish
rendering a frame on time
2. Try to offload and optimise the main thread
3. Avoid content Reflows and Repaints
4. Don’t overuse layers
5. Test your website with Performance, Layers and
Rendering tabs
6. Use responsibly potentially dangerous UI patterns