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. 3.
  2. 4.
  3. 7.
  4. 8.
  5. 13.

    “Performance more often comes down to a cultural challenge, rather

    than simply a technical one .” –Lara Hogan
  6. 17.

    Other 9% No 29% Yes 62% DO YOU FEEL EMPOWERED

    TO IGNITE CHANGE IN YOUR ORG?
  7. 20.

    “I just do what I can when no one is

    looking” survey response
  8. 21.

    IS SOMEONE AN ADVOCATE FOR PERFORMANCE? Other 11% No 9%

    Yes, it doesn't work 32% Yes, it works! 48%
  9. 22.
  10. 25.
  11. 29.

    “Almost 8% of websites went responsive within the span of

    a single year”
 between 2013-2014
 
 guypo.com/rwd-2014/
  12. 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
  13. 40.

    Other 3% Impossible 5% Hard 11% Moderate 35% Easy! 47%

    HOW EASY 
 IS IT TO TALK TO LEADERSHIP ABOUT IDEAS?
  14. 41.

    State your case • Lunch ’n Learns • It’s a

    reusable process • I’ll own it for a trial run!
  15. 42.

    “Resource isn't budgeted for us to give the code the

    care it needs to deliver performance” survey response
  16. 45.

    “The heaviness of the design keeps performance from being a

    first-class citizen” survey response
  17. 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
  18. 48.
  19. 50.

    Design Development Performance Checking: • Are there red flags? •

    Can you offer a solution? Performance Design Reviews
  20. 51.

    Performance Design Reviews Carousel Red Flags • Push back on

    priority • What alternate solutions can we offer?
  21. 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
  22. 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!
  23. 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
  24. 55.
  25. 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
  26. 68.
  27. 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:
  28. 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
  29. 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.”
  30. 82.

    “We have to use their 2 brand fonts.” “We should

    use no more than 2 weights for each” design development
  31. 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
  32. 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
  33. 86.
  34. 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
  35. 88.

    Speedy Fonts Futura: 268kb • book • book italic •

    bold • bold italic Speedy Fonts Brandon Grotesque: 133kb • book • book italic • bold • bold italic Alternatives
  36. 89.

    “Is the extra 135kb worth the aesthetic change?” “Does the

    heavier font kit better represent the brand?”
  37. 92.
  38. 97.
  39. 98.
  40. 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