The document discusses web performance optimization, focusing on metrics like speed index and Google’s RAIL model for user experience. It covers techniques such as passive event listeners, the CSS contain property, and performance improvements through optimized rendering. Key recommendations include responding to user interactions swiftly and minimizing delays in animations and loading times to enhance perceived performance.

1. We are spoiling ourselves
With faster websites

2. Our Generation’s Perception
> 10s
> 1s
300ms - 1s
< 100ms WOW
THAT WAS FAST

3. Our Generation’s Perception
> 10s
> 1s
300ms - 1s
< 100ms

4. Our Generation’s Perception
> 10s
1s - 10s
300ms - 1s
< 100ms
WEBSITE TO LOAD
WAITING FOR

5. Our Generation’s Perception
> 10s
1s - 10s
300ms - 1s
< 100ms
EVER COMING BACK
WE ARE NEVER

6. Perceived Performance
Aziz Khambati
Housing.com

7. Key Points
1. RAIL Performance Model
2. Passive Event Listeners
3. CSS contain property
4. Speed Index

8. RAIL Performance Model
The RAIL Performance Model by Google Developers is licensed under CC BY 3.0

9. RAIL Performance Goals
Response Animation Idle Load
Tap to paint in
< 100ms
Swipe to paint
in < 16ms
Each frame in
< 16ms
Use idle time to
proactively
schedule work.
Complete that
work in 50ms
chunks
Ready to use
in 1s

10. Respond to clicks in <100ms

11. Taking more than 500ms?
Provide Feedback

12. Ripple Effect

13. Intermediate State Transitions

14. Intermediate State Transitions

15. Intermediate State Transitions

16. Last Option - Loading Spinner

17. Respond to swipes in <16ms

18. Avoid Heavy Scroll Listeners

19. Rate Limit your Listeners (Debounce & Throttle)

20. Debounce
• Wait for x milliseconds for the event
to stop firing before calling your
function
• Useful when you are using your
listener for analytics like whether
the user has reached this part,
tracking impressions etc.

21. Throttle
• Proper Rate Limiting
• Call your functions only once
every x milliseconds if triggered
• Useful for infinite lists, where
you shouldn’t wait if the user has
already scrolled ahead.

22. Passive Event Listeners

23. Passive Event Listeners
• Browsers don’t know if a listener
is a going to preventDefault()
• So it has to run the function
before scrolling which causes
sluggishness.

24. Promise that I won’t preventDefault

25. Passive Event Listener Syntax

26. Passive Event Listener Feature Detection

27. Example
https://rbyers.github.io/scroll-latency.html

28. CSS touch-action Property to disable scroll

29. Infinite Lists

30. Some tips for React users

31. React keeps the virtual DOM in memory.
Image by Sebastián Peyrott of auth0

32. Patching might trigger a Garbage Collection
Image source: Valtteri Mäki

33. Avoid creating new functions in render

34. Avoid binding in render

35. Bind functions in constructor
✓

36. Hoist up Static Content

37. Babel Plugin to hoist static elements

38. Add “react” preset and optimize everything

39. Define shouldComponentUpdate

40. Animate in <16ms

41. Render Pipeline

42. The higher up you start, the longer it takes.
Devtools Waterfall Imageby Paul Lewis et al is licensed under CC BY 3.0

43. Cheap CSS Properties by Paul Lewis et al is licensed under CC BY 3.0

44. will-change: transform;

45. CSSTriggers.com

46. New CSS ‘contain’ Property
Chrome 52+, Opera 40+, Coming soon to Firefox

47. contain: layout
• Descendants will not effect layout of
outside elements & vice versa
• Wire Framing (Layout) of the entire
DOM not required.
• “Layout” Process of Animation Frame
Render Pipeline will speed up.
• Highest Performance benefit.

48. contain: paint
• No descendant will display outside the
element’s bounds
• Like overflow: hidden
• Becomes containing block for absolutely &
fixed position elements.
• Becomes stacking context. (z-index works
without position:static)
• Pushed to a different layer in the “Paint”
process of the animation pipeline
paint

49. Simply Put
contain: paint;
overflow: hidden;
position: non-static;
will-change: transform;

50. contain: size
• size is & has to be defined
• Descendants don’t affect element’s size
• If dimensions not defined, element will be rendered 0px by 0px
• Not much performance benefit

51. contain: style
• Descendant’s styles won’t affect outside.
• One use case is CSS Counters with same variable name
• No way similar to Shadow DOM like scoped styling

52. contain: strict
• layout + style + paint + size
• All four containment levels
• Useful if dimensions are set

53. contain: content
• layout + style + paint
• All except size
• Doesn't need dimensions

54. Performance Improvement

55. Javascript Animations

56. Avoid animating using JS. Use CSS instead.

57. Render Pipeline
JS Animations Start From Here
If optimized

58. Update Layer Tree
• Browser thinks that my current split of DOM elements to layers might
not be performant
• Let me compute layers again.
• Does this in every frame.
• This process is proportional to DOM size.
• https://github.com/openstreetmap/iD/pull/8/files

59. Avoid setTimeout/setInterval for callbacks

60. Use requestAnimationFrame
Or use a library which does that for you.
✓

61. Idle time: 50ms chunks

62. User scanning through your page.

63. Idle Time
• Heavy computations
• Should be done in blocks of
50ms in case user begins
interacting

64. PRPL
Push Render Pre-cache Lazy-load

65. requestIdleCallback()
Call Me when Free
https://www.chromestatus.com/features/5572795866021888

66. Load in 1s 😂

67. Repeat Users should load in 1s

69. Speed Index
Important for Perceived Performance
Rate of visual completeness

71. The average time at which visible
parts of the page are displayed.
Expressed in milliseconds and
dependent on size of the viewport.
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

72. Gmail (example) vs. Amazon
11s to reach 90% 85% in 4.5s
Visual Completeness

73. Speed Index depends on
• Networks Conditions
• Screen Size

74. Summary - Performance Goals
Response Animation Idle Load
Tap to paint in
< 100ms
Swipe to paint
in < 16ms
Each frame in
< 16ms
Use idle time to
proactively
schedule work.
Complete that
work in 50ms
chunks
Ready to use
in 1s
Low Speed
Index