The Path to Performance

Performance is a rising requirement for building successful websites, but successful performance begins far earlier than development. So how do you get your entire team excited by it, specifically aesthetic-heavy designers?

I discuss:
* Why entire teams should care
* Everyone's role in creating and maintaining a performance budget
* How to get designers excited by performance budgets
* How to begin incorporating performance budgets into projects

Transcript

1. THE PATH TO PERFORMANCE @katiekovalcin
2. From Columbus via Austin via Cincinnati
5. $250 million construction
 $25 million in renovations $70 million renovations
6. In other words, it looked great but functioned terribly.
9. The demise of beauty that doesn’t perform
10. Project Timeline Proposal Discovery Design Development Launch Where we think 
 performance happens
11. Project Timeline Proposal Discovery Design Development Launch Where performance
 needs to happen
12. START NOW.
13. “Performance more often comes down to a cultural challenge, rather than simply a technical one .” –Lara Hogan
14. 66 people answered on their performance culture
15. Company Size 1-20 20-50 50-100 100-200 200+ 0 5.5 11 16.5 22
16. Type of Work Client Services Product In House Other 0 10 20 30 40
17. Other 9% No 29% Yes 62% DO YOU FEEL EMPOWERED TO IGNITE CHANGE IN YOUR ORG?
18. No 42% Yes 58% IS PERFORMANCE CURRENTLY A PRIORITY?
19. Change begins with you
20. “I just do what I can when no one is looking” survey response
21. IS SOMEONE AN ADVOCATE FOR PERFORMANCE? Other 11% No 9% Yes, it doesn't work 32% Yes, it works! 48%
22. HURDLES
23. Other 19% Developers 21% Designers 25% Leadership 35% WHAT HURDLES DO YOU FACE?
24. “Other priorities often take precedent” survey response
25. CLIENTS
26. “Not valued as a billable priority by the client” survey response
27. “We don’t have that many mobile users”
 —Anti-RWD clients circa 2011
28. “We don’t have that many mobile users”
 —Anti-perf clients circa 2015
29. “Almost 8% of websites went responsive within the span of a single year”
 between 2013-2014
 
 guypo.com/rwd-2014/
30. Discuss in sales, not development
31. Project Timeline Proposal Discovery Design Development Launch The most crucial conversation
32. “We’ll provide you with a fast, responsive, immersive online experience.” –A good sales pitch
33. Sell it. Hard.
34. webpagetest.org
35. Competitors Client 2s to load Competitor 1
 1.7s to load Competitor 2
 1.2s to load
36. “That 0.8s is very expensive!”
37. “Sales at Amazon increase by 1% for every 100 milliseconds it shaves off download times.” “If a page load takes more than two seconds, 40% are likely to abandon that site. “ Data Monday: E-commerce Performance by Luke Wroblewski
38. LEADERSHIP
39. “Politics play a large role in what gets done.” survey response
40. Other 3% Impossible 5% Hard 11% Moderate 35% Easy! 47% HOW EASY 
 IS IT TO TALK TO LEADERSHIP ABOUT IDEAS?
41. State your case • Lunch ’n Learns • It’s a reusable process • I’ll own it for a trial run!
42. “Resource isn't budgeted for us to give the code the care it needs to deliver performance” survey response
43. PM Education • Understand the importance • Advocate with clients • Help maintain performance budget
44. AESTHETIC HEAVY DESIGNERS
45. “The heaviness of the design keeps performance from being a first-class citizen” survey response
46. Performance is design’s best friend, not its enemy
47. “But here’s the thing: the web is far more fragile than we might like to admit. It’s fraught with uncertainty—a connection could be dropped, or a network’s latency could be too high—which means entire elements of our designs might never reach our users.”
 –Ethan Marcotte foreword in Responsible Responsive Design by Scott Jehl
49. Project Timeline Design Development
50. Design Development Performance Checking: • Are there red flags? • Can you offer a solution? Performance Design Reviews
51. Performance Design Reviews Carousel Red Flags • Push back on priority • What alternate solutions can we offer?
52. Performance Design Reviews Image However, don’t push back: • If it’s “too difficult” • “Dumb idea” • Subjectively don’t like it • Can’t offer alternatives Social
53. Design Development Mockup designs in code • Run performance tests on early designs • Designer & Developer pair up to refine/address problem areas Get into code early!
54. “Sometimes you’ll make choices that favor performance; other times, you’ll make choices that favor aesthetics. The key is using all the information available to you to make the right decision for you and your site.” 
 —Lara Hogan Designing for Performance
55. “It's easy to rally everyone behind a cause. Follow-through is a different story.” survey response
56. PERFORMANCE 
 BUDGETS
57. “That’s the value of a performance budget: it provides a framework for discussions as you move forward. It serves as a point of reference as you decide what components should, and shouldn’t, get added to a page.”
 —Tim Kadlec Setting a Performance Budget
58. Project Timeline Proposal Discovery Design Development Launch Establish performance budget
59. Project Timeline Proposal Discovery Design Development Launch Maintain performance budget
60. ESTABLISHING
61. Important Metrics 1. Page weight (kb/mb) 2. Start Render (s) 3. Fully Loaded (s)
62. Page weight
63. $500 monthly budget 1. $100 groceries 2. $100 clothes 3. $300 rent
64. $400 monthly budget 1. $100 groceries 2. $100 clothes 3. $300 rent
65. $400 monthly budget 1. $100 groceries 2. $100 clothes 3. $300 rent
66. $400 monthly budget 1. $50 groceries 2. $50 clothes 3. $300 rent
67. 400kb performance budget 1. 50kb fonts 2. 50kb css 3. 300kb images
68. 400kb performance budget 1. 100kb fonts 2. 50kb css 3. 200kb images 4. 50kb javascript
69. You can’t spend what you don’t have!
70. USING WITH clients
71. Work with their team
72. 1. What is a performance budget? 2. What is this project’s budget? • Cite goals/requirements 3. Why are we using this? 4. How we add new features • (optimize, remove, or don’t add) 5. Every template’s weight 6. Image optimization guide Define for them:
73. Curveballs!
74. 3 options: 1. Optimize existing feature 2. Remove existing feature 3. Don’t add
75. 400kb performance budget 1. 0kb system fonts 2. 50kb css 3. 350kb images
76. Remember: you can’t spend what you don’t have!
77. USING WITH designers
78. “I believe designers do their best work within constraints, and knowing those constraints before starting a design can be incredibly enabling.”
 —Dan Mall How to Make a Performance Budget
79. Collaborate
80. Work together to determine the budget
81. design development “The client has a new promo video we need to include on the homepage” “That will weigh about 500kb. We should only use 50kb fonts, then.”
82. “We have to use their 2 brand fonts.” “We should use no more than 2 weights for each” design development
83. “We need to achieve X, Y, Z using A, B, C brand guidelines” “That will weigh 700-900kb. Their current site is 1.2mb, let’s budget 800kb.” design development
84. It’s not a trump card for developers
85. “The client has a new promo video we need to include on the homepage” “Nope. We can’t do that. I think the page should be 200kb and that will absolutely not work.” design development
86. Fonts
87. “The weight of a font kit is arguably more important to a site’s performance versus other heavy hitters (like images), because fonts are loaded on every single page.”
 Alternatives to Popular Web Typefaces for Better Performance
88. Speedy Fonts Futura: 268kb • book • book italic • bold • bold italic Speedy Fonts Brandon Grotesque: 133kb • book • book italic • bold • bold italic Alternatives
89. “Is the extra 135kb worth the aesthetic change?” “Does the heavier font kit better represent the brand?”
90. 100kb Fonts: Book—20kb Book Italic—20kb Bold—20kb Bold Italic—40kb Groceries: Veggies—$20 Pizzas—$20 Fruits—$20
 Meats—$40 $100
91. Curveball! I had to spend $60 at the vet
92. 40kb Fonts: Book—20kb Bold—20kb +System Fonts Groceries: Veggies—$20 Fruits—$20 +Pantry Foods I’ve 
 been avoiding eating 
 for 2 months $40
93. HOW THIS HELPS development
94. Project Timeline Proposal Discovery Design Development Launch Client understands
 the benefit
95. Project Timeline Proposal Discovery Design Development Launch PM advocates performance as a priority
96. Project Timeline Proposal Discovery Design Development Launch Design is done
 within a performance
 budget
97. Project Timeline Proposal Discovery Design Development Launch Development is prepared to successfully integrate performance as a priority
98. Resources
99. Resources • Designing for Performance by Lara Hogan • Responsible Responsive Design by Scott Jehl • How to Make a Performance Budget by Dan Mall • Design Decisions through the Lens of Performance by Yesenia Perez-Cruz • Anything on timkadlec.com Tools • Web Page Test • Grunt Performance Budget
100. THANK YOU! @katiekovalcin