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
   

   View Slide

2. From Columbus via
   Austin via Cincinnati
   

   View Slide

3. View Slide

4. View Slide

5. $250 million construction

   $25 million in renovations
   $70 million renovations
   

   View Slide

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

   View Slide

7. View Slide

8. View Slide

9. The demise of beauty
   that doesn’t perform
   

   View Slide

10. Project Timeline
    Proposal Discovery Design Development Launch
    Where we think 

    performance happens
    

    View Slide

11. Project Timeline
    Proposal Discovery Design Development Launch
    Where performance

    needs to happen
    

    View Slide

12. START NOW.
    

    View Slide

13. “Performance more often comes
    down to a cultural challenge, rather
    than simply a technical one .”
    –Lara Hogan
    

    View Slide

14. 66 people answered on
    their performance culture
    

    View Slide

15. Company Size
    1-20
    20-50
    50-100
    100-200
    200+
    0 5.5 11 16.5 22
    

    View Slide

16. Type of Work
    Client Services
    Product
    In House
    Other
    0 10 20 30 40
    

    View Slide

17. Other
    9%
    No
    29%
    Yes
    62%
    DO YOU FEEL
    EMPOWERED TO
    IGNITE CHANGE
    IN YOUR ORG?
    

    View Slide

18. No
    42%
    Yes
    58%
    IS
    PERFORMANCE
    CURRENTLY A
    PRIORITY?
    

    View Slide

19. Change begins with you
    

    View Slide

20. “I just do what I can
    when no one is looking”
    survey response
    

    View Slide

21. IS SOMEONE AN
    ADVOCATE FOR
    PERFORMANCE?
    Other
    11%
    No
    9%
    Yes, it doesn't work
    32%
    Yes, it works!
    48%
    

    View Slide

22. HURDLES
    

    View Slide

23. Other
    19%
    Developers
    21%
    Designers
    25%
    Leadership
    35%
    WHAT
    HURDLES DO
    YOU FACE?
    

    View Slide

24. “Other priorities often
    take precedent”
    survey response
    

    View Slide

25. CLIENTS
    

    View Slide

26. “Not valued as a billable
    priority by the client”
    survey response
    

    View Slide

27. “We don’t have that many
    mobile users”

    —Anti-RWD clients circa 2011
    

    View Slide

28. “We don’t have that many
    mobile users”

    —Anti-perf clients circa 2015
    

    View Slide

29. “Almost 8% of websites
    went responsive within
    the span of a single year”

    between 2013-2014

    

    guypo.com/rwd-2014/
    

    View Slide

30. Discuss in sales,
    not development
    

    View Slide

31. Project Timeline
    Proposal Discovery Design Development Launch
    The most crucial
    conversation
    

    View Slide

32. “We’ll provide you with a fast,
    responsive, immersive online
    experience.”
    –A good sales pitch
    

    View Slide

33. Sell it. Hard.
    

    View Slide

34. webpagetest.org
    

    View Slide

35. Competitors
    Client
    2s to load
    Competitor 1

    1.7s to load
    Competitor 2

    1.2s to load
    

    View Slide

36. “That 0.8s is very expensive!”
    

    View Slide

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
    

    View Slide

38. LEADERSHIP
    

    View Slide

39. “Politics play a large
    role in what gets done.”
    survey response
    

    View Slide

40. Other
    3%
    Impossible
    5%
    Hard
    11%
    Moderate
    35%
    Easy!
    47%
    HOW EASY 

    IS IT TO TALK TO
    LEADERSHIP
    ABOUT IDEAS?
    

    View Slide

41. State your case
    • Lunch ’n Learns
    • It’s a reusable process
    • I’ll own it for a trial run!
    

    View Slide

42. “Resource isn't budgeted for
    us to give the code the care it
    needs to deliver performance”
    survey response
    

    View Slide

43. PM Education
    • Understand the importance
    • Advocate with clients
    • Help maintain performance budget
    

    View Slide

44. AESTHETIC HEAVY
    DESIGNERS
    

    View Slide

45. “The heaviness of the design
    keeps performance from
    being a first-class citizen”
    survey response
    

    View Slide

46. Performance is
    design’s best friend,
    not its enemy
    

    View Slide

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
    

    View Slide

48. View Slide

49. Project Timeline
    Design
    Development
    

    View Slide

50. Design
    Development
    Performance Checking:
    • Are there red flags?
    • Can you offer a solution?
    Performance Design Reviews
    

    View Slide

51. Performance Design Reviews
    Carousel Red Flags
    • Push back on priority
    • What alternate solutions can
    we offer?
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

55. “It's easy to rally everyone
    behind a cause. Follow-through
    is a different story.”
    survey response
    

    View Slide

56. PERFORMANCE 

    BUDGETS
    

    View Slide

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
    

    View Slide

58. Project Timeline
    Proposal Discovery Design Development Launch
    Establish
    performance
    budget
    

    View Slide

59. Project Timeline
    Proposal Discovery Design Development Launch
    Maintain
    performance
    budget
    

    View Slide

60. ESTABLISHING
    

    View Slide

61. Important Metrics
    1. Page weight (kb/mb)
    2. Start Render (s)
    3. Fully Loaded (s)
    

    View Slide

62. Page weight
    

    View Slide

63. $500 monthly budget
    1. $100 groceries
    2. $100 clothes
    3. $300 rent
    

    View Slide

64. $400 monthly budget
    1. $100 groceries
    2. $100 clothes
    3. $300 rent
    

    View Slide

65. $400 monthly budget
    1. $100 groceries
    2. $100 clothes
    3. $300 rent
    

    View Slide

66. $400 monthly budget
    1. $50 groceries
    2. $50 clothes
    3. $300 rent
    

    View Slide

67. 400kb performance budget
    1. 50kb fonts
    2. 50kb css
    3. 300kb images
    

    View Slide

68. 400kb performance budget
    1. 100kb fonts
    2. 50kb css
    3. 200kb images
    4. 50kb javascript
    

    View Slide

69. You can’t spend what you
    don’t have!
    

    View Slide

70. USING WITH
    clients
    

    View Slide

71. Work with their team
    

    View Slide

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:
    

    View Slide

73. Curveballs!
    

    View Slide

74. 3 options:
    1. Optimize existing feature
    2. Remove existing feature
    3. Don’t add
    

    View Slide

75. 400kb performance budget
    1. 0kb system fonts
    2. 50kb css
    3. 350kb images
    

    View Slide

76. Remember: you can’t
    spend what you don’t have!
    

    View Slide

77. USING WITH
    designers
    

    View Slide

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
    

    View Slide

79. Collaborate
    

    View Slide

80. Work together to
    determine the budget
    

    View Slide

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.”
    

    View Slide

82. “We have to use
    their 2 brand fonts.”
    “We should use no
    more than 2 weights
    for each”
    design development
    

    View Slide

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
    

    View Slide

84. It’s not a trump card
    for developers
    

    View Slide

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
    

    View Slide

86. Fonts
    

    View Slide

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
    

    View Slide

88. Speedy Fonts
    Futura: 268kb
    • book
    • book italic
    • bold
    • bold italic
    Speedy Fonts
    
    Brandon Grotesque: 133kb
    
    • book
    
    • book italic
    
    • bold
    
    • bold italic
    Alternatives
    

    View Slide

89. “Is the extra 135kb worth
    the aesthetic change?”
    “Does the heavier font kit
    better represent the brand?”
    

    View Slide

90. 100kb
    Fonts:
    Book—20kb
    Book Italic—20kb
    Bold—20kb
    Bold Italic—40kb
    Groceries:
    Veggies—$20
    Pizzas—$20
    Fruits—$20

    Meats—$40
    $100
    

    View Slide

91. Curveball! I had to
    spend $60 at the vet
    

    View Slide

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
    

    View Slide

93. HOW THIS HELPS
    development
    

    View Slide

94. Project Timeline
    Proposal Discovery Design Development Launch
    Client understands

    the benefit
    

    View Slide

95. Project Timeline
    Proposal Discovery Design Development Launch
    PM advocates
    performance as a priority
    

    View Slide

96. Project Timeline
    Proposal Discovery Design Development Launch
    Design is done

    within a performance

    budget
    

    View Slide

97. Project Timeline
    Proposal Discovery Design Development Launch
    Development is prepared
    to successfully integrate
    performance as a priority
    

    View Slide

98. Resources
    

    View Slide

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
    

    View Slide

100. THANK YOU!
     @katiekovalcin
     

     View Slide