Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Front-end Dev & Designer
at Lunar Logic
Anna Migas
Google Developer Expert
@szynszyliszys
Anna Migas
@szynszyliszys
Fast but not furious:
Debugging user interaction
performance issues
Starability.css
Repaintless.css Auroral.css
Perceived performance
Perceived performance
First Meaningful Paint
Time to interactive
Optimise Critical Rendering Path
Optimise Critical Rendering Path
Use progress bars instead of spinners
Optimise Critical Rendering Path
Use progress bars instead of spinners
Have a placeholder content
Optimise Critical Rendering Path
Use progress bars instead of spinners
Have a placeholder content
Start upload before user...
Perceived Performance?
!
"
Perceived Performance
LOADPerceived Performance
!
"
Perceived load performance
!
Perceived performance
!
Perceived performance
First Meaningful Paint
Time to interactive
Smooth at all times
Agenda
1. Why sometimes interactions feel slow
2. Browser rendering and frames
3. Types of triggered changes in the UI
4. ...
J A N K
zdjęcie krzeseł
https://jakearchibald.github.io/jank-invaders/
60 fps 

1000/60 = ~16.6ms
60 fps 

1000/60 = ~16.6ms
120 fps 

1000/120 = ~8.3ms
iPad Pro, Razer smartphone
How can we help the browser
to make it on time?
Offload the main thread
main thread (UI)
Offload the main thread
BUS
main thread (UI)
background thread (heavy task)
Offload the main thread
1. Use Web Workers for heavy tasks
2. Optimise the main thread
Offload the main thread
1. Use Web Workers for heavy tasks
2. Optimise the main thread
If we interact with a page, a browser
needs to start serving frames
(ideally 60 or 120 per second)
What a frame consists of?
What a browser does during these
steps?
Change happens, an event is fired
1
Styles are recalculated
2
Layout is calculated
3
Layout
Everything is rasterised
and painted to the layers
4
Paint
Paint
Layers
What creates new layers?
1. 3D or perspective transforms
2. Animated 2D transforms or opacity
3. Being on top/a child of a...
.btn	{		
		background-color:	white;	
		border:	1px	solid	blue;	
		will-change:	transform;	
}	
.btn:hover	{	
	transform:	sc...
Every layer consumes memory.
Use them wisely.
Compositing
5
Compositing
Compositing
Types of triggered changes
Layout change (Reflow)
(width, margin-top, left)
Paint change (Repaint)
(background-color, box-shadow, background-image)
Compositing change
(transform, opacity)
How to test if we have a problem?
Reflows can be quite obvious…
…but for Repaints we might need
better tools
Performance tab (Chrome or Firefox)
Performance tab (Chrome or Firefox)
Layers tab (Chrome)
Rendering tab (Chrome)
Rendering tab (Chrome)
Paint flashing (Firefox)
Performance monitor tab (Chrome)
What are the potentially dangerous
UI patterns?
Animations
1
Animations
1. Don’t overuse animations
2. Animate only transform and opacity if possible
3. Use requestAnimationFrame()
requestAnimationFrame
function repeated() {
// show something many times
window.requestAnimationFrame(repeated);
}
window....
Animations
1. Don’t overuse animations
2. Animate only transform and opacity if possible
3. Use requestAnimationFrame() bu...
Parallax effect
2
http://davegamache.com/parallax/
Parallax effect
1. Causes Paint Storms
2. Almost always bad
3. Don’t use scroll events
4. Don’t use background-position
5....
Fixed elements
3
https://jsipsum.lunarlogic.io/
Fixed elements
1. Repaints with every frame when scrolling
2. Use will-change property (or transform:	
translate3D(0,0,0))...
Scrolling events
4
Scrolling events
1. Don’t attach wheel or touch listeners to the whole
document, use smaller areas instead
2. Take advanta...
Hover effects
5
Hover effects
1. If they are bound to happen often—you might
consider using will-change property
2. Can be deadly if there...
Appending elements
6
Appending elements
1. Make sure not many elements will be affected
2. Try to separate the area (will-change, contain:	
lay...
Images
7
https://unsplash.com/ (on slow 3G)
Images
A. Can be downloaded in unexpected ways
B. Can cause content jumps on load
C. Lazy loading is tricky
Images: downloads
7a
Images: downloads
• Semantics = performance
• How image is embedded (img tag/background-
image) influences the time of dow...
Images: downloads (img tag)
<img	src=“image.png”	alt=“Alt	text”>
Images: downloads (background img)
background-image:	url(“image.png”);
Images: content jumps
7b
http://aspiringwebdev.com
Images: content jumps
• No jumps in Chrome any more (scroll anchoring
enabled by default in Chrome 56)
• Can be avoided by...
Images: lazy loading
7c
https://enviragallery.com
Images: lazy loading
• There are situations when it can make the
experience worse because of reflows
• https://jobs.zaland...
Takeaways
1. Jank happens when the browser doesn’t finish
rendering a frame on time
2. Try to offload and optimise the mai...
Resources
1. http://jankfree.org
2. https://dev.opera.com/articles/css-will-change-property
3. https://www.udacity.com/cou...
Thanks!
Anna Migas
@szynszyliszys
Performance.now()   fast but not furious
Performance.now()   fast but not furious
Performance.now()   fast but not furious
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Performance.now() fast but not furious

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Performance.now() fast but not furious

  1. 1. Front-end Dev & Designer at Lunar Logic Anna Migas Google Developer Expert @szynszyliszys
  2. 2. Anna Migas @szynszyliszys Fast but not furious: Debugging user interaction performance issues
  3. 3. Starability.css Repaintless.css Auroral.css
  4. 4. Perceived performance
  5. 5. Perceived performance First Meaningful Paint Time to interactive
  6. 6. Optimise Critical Rendering Path
  7. 7. Optimise Critical Rendering Path Use progress bars instead of spinners
  8. 8. Optimise Critical Rendering Path Use progress bars instead of spinners Have a placeholder content
  9. 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. 10. Perceived Performance?
  11. 11. ! "
  12. 12. Perceived Performance
  13. 13. LOADPerceived Performance
  14. 14. ! " Perceived load performance
  15. 15. ! Perceived performance !
  16. 16. Perceived performance First Meaningful Paint Time to interactive Smooth at all times
  17. 17. 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
  18. 18. J A N K
  19. 19. zdjęcie krzeseł https://jakearchibald.github.io/jank-invaders/
  20. 20. 60 fps 
 1000/60 = ~16.6ms
  21. 21. 60 fps 
 1000/60 = ~16.6ms 120 fps 
 1000/120 = ~8.3ms iPad Pro, Razer smartphone
  22. 22. How can we help the browser to make it on time?
  23. 23. Offload the main thread main thread (UI)
  24. 24. Offload the main thread BUS main thread (UI) background thread (heavy task)
  25. 25. Offload the main thread 1. Use Web Workers for heavy tasks 2. Optimise the main thread
  26. 26. Offload the main thread 1. Use Web Workers for heavy tasks 2. Optimise the main thread
  27. 27. If we interact with a page, a browser needs to start serving frames (ideally 60 or 120 per second)
  28. 28. What a frame consists of?
  29. 29. What a browser does during these steps?
  30. 30. Change happens, an event is fired 1
  31. 31. Styles are recalculated 2
  32. 32. Layout is calculated 3
  33. 33. Layout
  34. 34. Everything is rasterised and painted to the layers 4
  35. 35. Paint
  36. 36. Paint
  37. 37. Layers
  38. 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
  39. 39. .btn { background-color: white; border: 1px solid blue; will-change: transform; } .btn:hover { transform: scale(1.1); }
  40. 40. Every layer consumes memory. Use them wisely.
  41. 41. Compositing 5
  42. 42. Compositing
  43. 43. Compositing
  44. 44. Types of triggered changes
  45. 45. Layout change (Reflow) (width, margin-top, left)
  46. 46. Paint change (Repaint) (background-color, box-shadow, background-image)
  47. 47. Compositing change (transform, opacity)
  48. 48. How to test if we have a problem?
  49. 49. Reflows can be quite obvious…
  50. 50. …but for Repaints we might need better tools
  51. 51. Performance tab (Chrome or Firefox)
  52. 52. Performance tab (Chrome or Firefox)
  53. 53. Layers tab (Chrome)
  54. 54. Rendering tab (Chrome)
  55. 55. Rendering tab (Chrome)
  56. 56. Paint flashing (Firefox)
  57. 57. Performance monitor tab (Chrome)
  58. 58. What are the potentially dangerous UI patterns?
  59. 59. Animations 1
  60. 60. Animations 1. Don’t overuse animations 2. Animate only transform and opacity if possible 3. Use requestAnimationFrame()
  61. 61. requestAnimationFrame function repeated() { // show something many times window.requestAnimationFrame(repeated); } window.requestAnimationFrame(repeated);
  62. 62. 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
  63. 63. Parallax effect 2
  64. 64. http://davegamache.com/parallax/
  65. 65. 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
  66. 66. Fixed elements 3
  67. 67. https://jsipsum.lunarlogic.io/
  68. 68. 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. 69. Scrolling events 4
  70. 70. 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});
  71. 71. Hover effects 5
  72. 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/
  73. 73. Appending elements 6
  74. 74. 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)
  75. 75. Images 7
  76. 76. https://unsplash.com/ (on slow 3G)
  77. 77. Images A. Can be downloaded in unexpected ways B. Can cause content jumps on load C. Lazy loading is tricky
  78. 78. Images: downloads 7a
  79. 79. Images: downloads • Semantics = performance • How image is embedded (img tag/background- image) influences the time of download • Comprehensive research by Harry Roberts
  80. 80. Images: downloads (img tag) <img src=“image.png” alt=“Alt text”>
  81. 81. Images: downloads (background img) background-image: url(“image.png”);
  82. 82. Images: content jumps 7b
  83. 83. http://aspiringwebdev.com
  84. 84. 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; }
  85. 85. Images: lazy loading 7c
  86. 86. https://enviragallery.com
  87. 87. 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)
  88. 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
  89. 89. 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
  90. 90. Thanks! Anna Migas @szynszyliszys
  • JakubDaszkiewicz

    Mar. 26, 2019
  • samarpanda

    Nov. 12, 2018
  • piouPiouM

    Nov. 8, 2018

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

Views

Total views

1,090

On Slideshare

0

From embeds

0

Number of embeds

46

Actions

Downloads

22

Shares

0

Comments

0

Likes

3

×