Marcos Iglesias_Performance budgets: the what, why and how_Code-motion berlin slides

It is painful to argue with design and product about every feature that needs to be built. A Performance Budget is a group of limits to certain web performance metrics. Setting one early simplifies the conversation around feature development with a clear reference to frame decisions about what can and can’t be included. Come and learn why Performance Budgets are so useful. We’ll discuss how you can use them and how to choose the right metrics to keep track of them. You will discover a drama-free way of approaching the performance discussion.

Marcos Iglesias Valle, Sr. Software Engineer - Eventbrite

Marcos Iglesias is a Senior Software Engineer who builds compelling user interfaces at Eventbrite. Marcos is passionate about improving developer efficiency, building tools and setting up processes to save his peers both time and effort. On top of all that, he enjoys writing and editing for Eventbrite's Engineering blog, giving talks and maintaining Britecharts, the open-source charting library.

Transcript

1. Performance Budgets: The What, Why and How Marcos Iglesias 12-13 November, 2019
2. Performance Budgets: The What, Why and How Marcos Iglesias @golodhros
5. bit.ly/pro-d3
6. Performance Budgets
7. #perfmatters
11. Imagine you could have the whole team working with web performance in mind
12. Performance Budgets
13. What is a Performance Budget?
14. “A Performance Budget is a set of values for web performance metrics which, agreed by Engineering, Product and Design, defines the minimum web experience that your users will enjoy. – Marcos Iglesias
15. Why Use Performance Budgets?
16. My story
20. Server Side Rendering
24. Performance Budgets
25. Web Performance Culture
26. Final Users
27. Web Engineers
28. UX & Designers
29. Product Managers
30. Engineering Managers
31. How to use Performance Budgets
33. What to do? • Optimize • Remove • Don’t add
34. example
36. Setting Performance Budgets
37. Faster than Competitors
38. Measure Competitors
39. 20% rule (Weber-Fechner Law)
40. Easy to sell
41. Better than Current
42. When redesigning
43. 20% rule (Weber-Fechner Law)
44. Follow Guidelines
45. Human- Computer Interaction Guidelines
46. Response Animation Idle Load
47. Optimise Business Value
48. Identify critical interactions
49. 20% rule (Weber-Fechner Law)
50. Release and re-evaluate
51. Set Up Strategies • Faster than Competitors • Better than Current • Follow Guidelines • Optimize Business Value
52. Metrics
53. Quantity Based
54. Quantity Based • # of HTTP requests • Resources weight ◦ Images ◦ Styles ◦ Javascript ◦ HTML
55. Good for • Knowing the user experience Bad for • Raising alarms • Easy to track
56. Rule Based
57. Rule Based • YSlow • Page Speed Insights • Lighthouse • WebPageTest
58. Good for • Knowing the user experience Bad for • Communicating • Keeping track • Getting actionable feedback
59. Milestone Timings
60. Milestone timings • Page Load • DOMContentLoaded • Time to First Byte (TTFB) • Time to Interactive (TTI)
61. Good for • Knowing what happens between milestones Bad for • Describing the user experience • Keeping track
62. Rendering Metrics
63. Speed Index
64. “The Speed Index is the average time at which visible parts of the page are displayed. – WebPageTest Documentation
65. Start Render
68. Good for • Prioritizing pixels • Knowing when users can interact with the content Bad for • Describing the user experience • Finding out the rendering performance
69. Custom Metrics
70. Custom Metrics Examples • “Time to first tweet” of Twitter • “PinnerWaitTime” of Pinterest
71. Good for • Comparing with competitors • Scaling them Bad for • Describing the user experience
72. Last Painted Hero
73. Metrics • Quantity Based • Rule Based • Milestone Timings • Rendering Metrics • Custom Metrics
74. Choosing Values
75. Focus on user experience
76. Time To First Byte TTFB
77. Last Painted Hero (Speed Index)
78. Time to Interactive (First Input Delay)
79. Add business value
80. Know your Content
81. Know your Audience
82. Devices
83. Network
84. Metrics + Content + Audience = Performance Budgets
85. Examples of Performance Budgets
86. 5s TTI in phones Alex Russell - Google’s Chrome Team
87. SpeedIndex < 1s Smashing Magazine (2014)
88. Tracking Performance Budgets
89. Free Tools
90. Sitespeed.io
91. SpeedTracker
92. LightWallet
93. Paid Services
94. Calibre
95. Rigor
96. SpeedCurve
97. Choosing a solution
98. Considerations • Resources • Priority of web performance • Budget
99. Complete Solutions Sitespeed.io
100. Low Budget SpeedTracker, Calibre, and Rigor
101. High Traffic SpeedCurve and Rigor
102. Side Projects SpeedTracker and Sitespeed.io
103. OSS Projects LightWallet
104. Wrapping Up
105. Enjoyable user experiences
106. Fosters a web performance culture
107. Set them in different ways
108. Free and paid tools
109. Workflow change
110. Data to show progress, value and customer satisfaction
111. My story (continued)
116. Give it a try!
117. Thanks for Listening!
118. Q&A bit.ly/cm-berlin-performance-budgets @golodhros
119. References • Marcos Iglesias & Various Authors - Build Faster Websites (Heart Internet free ebook) • Tim Kadlec - Setting a Performance Budget • Tim Kadlec - Performance Budget Metrics • Denys Mishunov - Why Perceived Performance Matters, Part 1: The Perception Of Time • Paul Irish - Introducing RAIL: A User-Centric Model For Performance • Alex Russell - Can You Afford It?: Real-world Web Performance Budgets • Vitaly Friedman - Improving Smashing Magazine’s Web Performance: A Case Study • Steve Souders - Introducing Last Painted Hero • Steve Souders - Evaluating Rendering Metrics
120. Image Credits • Photo by Ambitious Creative Co. - Rick Barrett on Unsplash • Photo by Pepi Stojanovski on Unsplash • Photo by Steve Halama on Unsplash • Photo by Fancycrave on Unsplash • Photo by rawpixel on Unsplash • Photo by Michael Dam on Unsplash • Photo by Gustas Brazaitis on Unsplash • Photo by Maria Fernanda Gonzalez on Unsplash • Photo by rawpixel on Unsplash • Photo by Bob Newman on Unsplash • Photo by Siora Photography on Unsplash • Photo by Sacha Styles on Unsplash • Photo by LinkedIn Sales Navigator on Unsplash • Photo by Tine Ivanič on Unsplash • Mops Photo by pan xiaozhen on Unsplash • Monkey photo by Asa Rodger on Unsplash • Photo by Tyler Easton on Unsplash • Checklist photo by Glenn Carstens-Peters on Unsplash • Milestone photo by Bernard Gagnon on Wikimedia Commons • Photo by Jennifer Burk on Unsplash • Books photo by Thomas Kelley on Unsplash • Wrong way photo by NeONBRAND on Unsplash • Emoji by Twitter on Creative Commons • Meeting photo by Headway on Unsplash • Team together photo by rawpixel on Unsplash • Web photo by freestocks.org on Unsplash • Question photo by Emily Morter on Unsplash • Manager Photo by Foto Sushi on Unsplash • Nobody photo by Luke Ellis-Craven on Unsplash • Developer photo by Tim Gouw on Unsplash • Crossroad photo by Oliver Roos on Unsplash •