The Path to Performance

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

18237af8140e18b03e20e08a5b47158b?s=128

Katie Kovalcin

March 10, 2015
Tweet

Transcript

  1. THE PATH TO PERFORMANCE @katiekovalcin

  2. From Columbus via Austin via Cincinnati

  3. None
  4. None
  5. $250 million construction
 $25 million in renovations $70 million renovations

  6. In other words, it looked great but functioned terribly.

  7. None
  8. None
  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
  48. None
  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