A talk on interaction performance that was presented at performance.now() conference in Amsterdam on 8th November 2018

1. Front-end Dev & Designer
at Lunar Logic
Anna Migas
Google Developer Expert
@szynszyliszys

2. Anna Migas
@szynszyliszys
Fast but not furious:
Debugging user interaction
performance issues

3. Starability.css
Repaintless.css Auroral.css

4. Perceived performance

5. Perceived performance
First Meaningful Paint
Time to interactive

6. Optimise Critical Rendering Path

7. Optimise Critical Rendering Path
Use progress bars instead of spinners

8. Optimise Critical Rendering Path
Use progress bars instead of spinners
Have a placeholder content

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

10. Perceived Performance?

12. !
"

13. Perceived Performance

14. LOADPerceived Performance

15. !
"
Perceived load performance

16. !
Perceived performance
!

17. Perceived performance
First Meaningful Paint
Time to interactive
Smooth at all times

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

19. J A N K

20. zdjęcie krzeseł
https://jakearchibald.github.io/jank-invaders/

21. 60 fps
1000/60 = ~16.6ms

22. 60 fps
1000/60 = ~16.6ms
120 fps
1000/120 = ~8.3ms
iPad Pro, Razer smartphone

23. How can we help the browser
to make it on time?

24. Offload the main thread
main thread (UI)

25. Offload the main thread
BUS
main thread (UI)
background thread (heavy task)

26. Offload the main thread
1. Use Web Workers for heavy tasks
2. Optimise the main thread

27. Offload the main thread
1. Use Web Workers for heavy tasks
2. Optimise the main thread

28. If we interact with a page, a browser
needs to start serving frames
(ideally 60 or 120 per second)

29. What a frame consists of?

30. What a browser does during these
steps?

31. Change happens, an event is fired
1

32. Styles are recalculated
2

33. Layout is calculated
3

34. Layout

35. Everything is rasterised
and painted to the layers
4

36. Paint

37. Paint

38. Layers

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

40. .btn {
background-color: white;
border: 1px solid blue;
will-change: transform;
}
.btn:hover {
transform: scale(1.1);
}

41. Every layer consumes memory.
Use them wisely.

42. Compositing
5

43. Compositing

44. Compositing

45. Types of triggered changes

46. Layout change (Reflow)
(width, margin-top, left)

47. Paint change (Repaint)
(background-color, box-shadow, background-image)

48. Compositing change
(transform, opacity)

49. How to test if we have a problem?

50. Reflows can be quite obvious…

51. …but for Repaints we might need
better tools

52. Performance tab (Chrome or Firefox)

53. Performance tab (Chrome or Firefox)

54. Layers tab (Chrome)

55. Rendering tab (Chrome)

56. Rendering tab (Chrome)

57. Paint flashing (Firefox)

58. Performance monitor tab (Chrome)

59. What are the potentially dangerous
UI patterns?

60. Animations
1

61. Animations
1. Don’t overuse animations
2. Animate only transform and opacity if possible
3. Use requestAnimationFrame()

62. requestAnimationFrame
function repeated() {
// show something many times
window.requestAnimationFrame(repeated);
}
window.requestAnimationFrame(repeated);

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

64. Parallax effect
2

65. http://davegamache.com/parallax/

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

67. Fixed elements
3

68. https://jsipsum.lunarlogic.io/

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;
}

70. Scrolling events
4

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});

72. Hover effects
5

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/

75. Appending elements
6

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)

78. Images
7

79. https://unsplash.com/ (on slow 3G)

80. Images
A. Can be downloaded in unexpected ways
B. Can cause content jumps on load
C. Lazy loading is tricky

81. Images: downloads
7a

82. Images: downloads
• Semantics = performance
• How image is embedded (img tag/background-
image) influences the time of download
• Comprehensive research by Harry Roberts

83. Images: downloads (img tag)
<img src=“image.png” alt=“Alt text”>

84. Images: downloads (background img)
background-image: url(“image.png”);

85. Images: content jumps
7b

86. http://aspiringwebdev.com

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;
}

88. Images: lazy loading
7c

89. https://enviragallery.com

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

92. Resources
1. http://jankfree.org
2. https://dev.opera.com/articles/css-will-change-property
3. https://www.udacity.com/course/browser-rendering-optimization--ud860
4. https://www.html5rocks.com/en/tutorials/speed/layers
5. https://www.html5rocks.com/en/tutorials/speed/high-performance-
animations
6. https://blog.logrocket.com/eliminate-content-repaints-with-the-new-layers-
panel-in-chrome-e2c306d4d752
7.https://dassur.ma/things/120fps
8. https://developers.google.com/web/tools/chrome-devtools/speed/get-
started

93. Thanks!
Anna Migas
@szynszyliszys