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
39. 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
63. Animations
1. Don’t overuse animations
2. Animate only transform and opacity if possible
3. Use requestAnimationFrame() but…
4. …for 120fps avoid requestAnimationFrame()
5. Don’t animate elements below other nodes (like
fixed headers)
6. Don’t animate too many elements
66. 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
69. 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;
}
71. 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});
74. 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/
77. 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)
82. Images: downloads
• Semantics = performance
• How image is embedded (img tag/background-
image) influences the time of download
• Comprehensive research by Harry Roberts
87. 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;
}
90. Images: lazy loading
• There are situations when it can make the
experience worse because of reflows
• https://jobs.zalando.com/tech/blog/loading-
time-matters/index.html
• Placeholders can be a solution (eg. Low Quality
Placeholders)
91. 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
