Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Performance 101 [Chrome Dev Summit 2021]

Web Performance 101 [Chrome Dev Summit 2021]

What do we mean when we talk about "web performance"? Why should you care about it? How can measure it? How do you get other people in your organization to care? In this workshop at the 2021 Chrome Dev Summit, I covered these questions – including an overview of the history of performance metrics, up to Core Web Vitals.

Tammy Everts

November 09, 2021
Tweet

More Decks by Tammy Everts

Other Decks in Technology

Transcript

  1. Web Performance 101
    What is web performance
    and why should I care?
    @tameverts
    #ChromeDevSummit
    ¯\_(ツ)_/¯

    View full-size slide

  2. speedcurve.com/benchmarks/

    View full-size slide

  3. What is “web performance”?
    Why should I care about it?
    How do I measure it?
    How can I get other people in my
    company to care about it?

    View full-size slide

  4. “web performance”
    Is it loading?
    Can I use it?
    How does it feel?

    View full-size slide

  5. 75th percentile of page loads
    across mobile and desktop

    View full-size slide

  6. wsj.com/articles/google-search-ramps-up-penalties-for-slow-annoying-websites-11628614350

    View full-size slide

  7. 2016
    The internet is
    a basic human right.

    View full-size slide

  8. Poor performance hurts
    a LOT of people.

    View full-size slide

  9. People in rural areas
    People in Indigenous communities
    People with lower incomes
    Children
    Seniors
    People with accessibility challenges
    People in developing countries

    View full-size slide

  10. That’s 15,000,000 people in the US alone.

    View full-size slide

  11. 1 out of 3 homes in the US do not have broadband access.
    (25 Mbps down and 3 Mbps up)
    Federal Communications Commission, 2020
    @tameverts

    View full-size slide

  12. That’s 45,000,000 homes.
    And 12,000,000 children
    (many of whom are now learning remotely).

    View full-size slide

  13. theverge.com/22177154/us-internet-speed-maps-competition-availability-fcc

    View full-size slide

  14. “the homework gap”

    View full-size slide

  15. 75% of Indigenous communities in Canada
    do not have access to broadband.
    @tameverts

    View full-size slide

  16. Education
    Entrepreneurialism
    Social connection
    Governance
    Telemedicine

    View full-size slide

  17. “I grew up with our community being under
    constant boil water advisories,
    and I wasn’t able to safely drink water
    out of the tap until just a few years ago.
    High-speed internet feels equally life changing.”
    Chief Willie Sellars, 2020

    View full-size slide

  18. We can’t fix our networks,
    but we can fix our pages.

    View full-size slide

  19. 2106kb
    HTTP Archive, October 2021

    View full-size slide

  20. Big pages cost users.

    View full-size slide

  21. whatdoesmysitecost.com

    View full-size slide

  22. whatdoesmysitecost.com

    View full-size slide

  23. Performance isn’t just
    about speed.

    View full-size slide

  24. Page jank affects people with
    motor skill challenges (esp. on mobile).
    Assistive technology (e.g., screenreaders)
    may not work until the DOM fully loads.
    JavaScript can block assistive tech.
    @marcysutton

    View full-size slide

  25. Users aged 65 and older
    are 43% slower at using
    websites than users aged 21-55.
    nngroup.com/articles/usability-for-senior-citizens/
    @tameverts

    View full-size slide

  26. business
    behaviour
    brain

    View full-size slide

  27. The average web user believes they waste
    two days a year waiting for pages to load.

    View full-size slide

  28. Stoyan Stefanov, The Psychology of Speed

    View full-size slide

  29. Nielsen Norman Group, 1993 & 2010

    View full-size slide

  30. 37
    “We want you to be able to flick
    from one page to another as quickly
    as you can flick a page on a book.
    So, we’re really aiming very, very
    high here… at something like
    100 milliseconds.”
    Urs Hölzle
    SVP Engineering, Google

    View full-size slide

  31. “web stress”
    When apps or sites are slow,
    we have to concentrate
    up to 50% harder to stay on task.
    @tameverts

    View full-size slide

  32. Radware, 2013
    Frustration peaks between 11.5 and 26%
    during browsing and checkout
    @tameverts

    View full-size slide

  33. “Phone rage”: How people react to slow mobile sites
    Tealeaf/Harris Interactive, 2011
    @tameverts

    View full-size slide

  34. 45
    When do we start to interact with a page?
    Radware, 2014
    @tameverts

    View full-size slide

  35. 46
    Source: Jakob Nielsen

    View full-size slide

  36. nicj.net/measuring-continuity/

    View full-size slide

  37. nicj.net/measuring-continuity/

    View full-size slide

  38. User experience and
    web performance
    are predictable indicators
    of business outcomes.

    View full-size slide

  39. ❑ bounce rate
    ❑ cart size
    ❑ conversions
    ❑ revenue
    ❑ time on site
    ❑ page views
    ❑ SEO
    ❑ brand perception
    ❑ user retention
    ❑ competitors

    View full-size slide

  40. WPOsta
    ts.com

    View full-size slide

  41. WPOstats.com

    View full-size slide

  42. Every 1 second of load time improvement equaled
    a 2% conversion rate increase for Walmart
    Staples shaved 1 second from median load time,
    improved conversion rate by 10%
    Fanatics cut median load times by 2 seconds,
    almost doubled mobile conversions

    View full-size slide

  43. User retention

    View full-size slide

  44. Strangeloop, 2011
    @tameverts

    View full-size slide

  45. Brand perception

    View full-size slide

  46. fast slow
    @tameverts

    View full-size slide

  47. Content “boring”
    Visual design “tacky”
    “confusing”
    Ease of navigation “frustrating”
    “hard-to-navigate”

    View full-size slide

  48. https://www.forbes.com/sites/theyec/2021/09/22/google-seo-updates-for-2021-lcp-fcp-fid-cls-oh-my/

    View full-size slide

  49. 40% decrease in wait time
    15% increase in signup conversion rate
    15% increase in SEO traffic

    View full-size slide

  50. Good pages rank slightly (1%) better than average.
    Slow pages rank significantly (3.7%) worse.
    sistrix.com/blog/core-web-vitals-is-a-measurable-ranking-factor/

    View full-size slide

  51. How fast should I be?
    How do I stay on track?

    View full-size slide

  52. Performance budgets FTW!

    View full-size slide

  53. Threshold YOU create for metrics
    that are meaningful for YOUR site
    Milestone timings (e.g. Start Render)
    Quantity-based (e.g. image weight)
    Rules-based (e.g. Lighthouse scores)

    View full-size slide

  54. A good performance budget
    should show you…
    What your budget is
    When you go out of bounds
    How long you’re out of bounds
    When you’re back within budget

    View full-size slide

  55. Why do I need them?

    View full-size slide

  56. 2009 Improved average load time from 6s à 1.2s
    7-12% increase in conversion rate + 25% increase in PVs
    Average load time degraded to 5s
    User feedback: “I will not come back to this site again.”
    Re-focused on performance
    0.4% increase in conversion rate
    2010
    2011
    @tameverts

    View full-size slide

  57. 1. No front-end measurement
    2. Constant feature development
    3. Badly implemented third-parties
    4. Waited too long to tackle problems
    5. Relied on performance sprints
    6. No way to track regressions

    View full-size slide

  58. 1. Which metrics should I focus on?
    2. What should my budget thresholds be?
    3. How do I stay on top of them?

    View full-size slide

  59. Which metrics
    should I focus on?

    View full-size slide

  60. TTFB DNS TCP
    TTI FCP FMP
    FID OMG WTF

    View full-size slide

  61. Is it loading?
    Can I use it?
    How does it feel?

    View full-size slide

  62. What tools can we use?
    Synthetic (lab)
    Consistent baseline
    Mimics network & browser conditions
    No installation
    Compare any sites
    Detailed analysis
    Waterfall charts
    Filmstrips and videos
    Limited URLs
    Real user monitoring (field)
    Requires JavaScript installation
    Large sample size (up to 100%)
    Real network & browser conditions
    Geographic spread
    Correlation with other metrics (bounce rate)
    No detailed analysis
    Only measure your own site

    View full-size slide

  63. Is it loading?

    View full-size slide

  64. Time to First Byte
    AKA backend time
    Synthetic & RUM

    View full-size slide

  65. Start Render
    The time from the start of the initial
    navigation until the first non-white
    content is painted
    Synthetic & RUM

    View full-size slide

  66. Can I use it?

    View full-size slide

  67. 98
    When do users start to interact with a page?
    @tameverts

    View full-size slide

  68. Amount of time it takes for the largest visual element to render
    Synthetic & RUM

    View full-size slide

  69. Alternative: Last Painted Hero

    View full-size slide

  70. How does it feel?

    View full-size slide

  71. Score that reflects how much page elements shift during rendering.
    Available in Chrome and Chromium-based browsers.
    Synthetic & RUM

    View full-size slide

  72. Size of the shifting element matters
    speedcurve.com/blog/visualising-cls-layout-shifts/

    View full-size slide

  73. Image carousels can generate false positives
    speedcurve.com/blog/visualising-cls-layout-shifts/

    View full-size slide

  74. Web fonts & opacity changes can cause issues
    speedcurve.com/blog/visualising-cls-layout-shifts/

    View full-size slide

  75. Amount of time it takes for page to respond to user input
    (e.g. click, tap, key)
    Only measurable via RUM

    View full-size slide

  76. FID can seem fast because user interactions
    take place later in the page’s rendering cycle...
    after CPU-hogging long tasks have completed.
    speedcurve.com/blog/first-input-delay-google-core-web-vitals/

    View full-size slide

  77. No correlation when looking at all sessions
    speedcurve.com/blog/first-input-delay-google-core-web-vitals/

    View full-size slide

  78. Stronger correlation at 75th percentile
    speedcurve.com/blog/first-input-delay-google-core-web-vitals/

    View full-size slide

  79. Long Tasks
    Measures JavaScript functions that take 50ms or longer.
    Long or excessive JS tasks can delay rendering,
    as well as cause page “jank”.
    Measurable across browser types.
    Synthetic & RUM

    View full-size slide

  80. Long Tasks have a high correlation to conversions
    speedcurve.com/blog/first-input-delay-google-core-web-vitals/

    View full-size slide

  81. Other metrics to consider

    View full-size slide

  82. Custom metrics
    Measure performance with high-precision timestamps
    Synthetic & RUM
    https://www.w3.org/TR/user-timing/
    https://speedcurve.com/blog/user-timing-and-custom-metrics/

    View full-size slide

  83. How long does it
    take to display the
    main product image
    on my site?

    View full-size slide

  84. Time to First Tweet
    The time from clicking the link to viewing
    the first tweet on each page’s timeline
    Pinner Wait Time (PWT)
    The time from initiating an action (e.g., tapping a pin)
    until the action is complete (pin close-up view is loaded)
    Time to Interact (TTI)

    View full-size slide

  85. Lighthouse
    Scores based on audits run on synthetic tests.
    Checks your page against “rules” for Performance, PWA,
    Best Practices, and SEO.
    For each category, you get a score out of 100 and
    recommendations for what to fix.
    developers.google.com/web/tools/lighthouse

    View full-size slide

  86. matuzo.at/blog/building-the-most-inaccessible-site-possible-
    with-a-perfect-lighthouse-score/

    View full-size slide

  87. Page size & requests
    Avoid serving huge pages to mobile!

    View full-size slide

  88. zillow.com/tech/bigger-faster-more-engaging-budget/

    View full-size slide

  89. Third parties
    Long tasks time
    Total size
    Total number of requests

    View full-size slide

  90. Metrics to watch for…
    Responsiveness
    https://web.dev/responsiveness/
    Smoothness
    https://web.dev/smoothness/

    View full-size slide

  91. What should
    my budget thresholds be?

    View full-size slide

  92. Performance budgets

    Performance goals

    View full-size slide

  93. Goals are aspirational.
    How fast do I want to be eventually?
    Budgets are pragmatic.
    How can I keep my site from getting slower
    while I work toward my goals?

    View full-size slide

  94. Priority 1
    Create budgets
    to fight regression

    View full-size slide

  95. Look at your last 2-4 weeks of data.
    Identify your worst number.

    View full-size slide

  96. Priority 2
    Set long-term goals

    View full-size slide

  97. How fast are my competitors?
    speedcurve.com/benchmarks/

    View full-size slide

  98. How can I improve business metrics?

    View full-size slide

  99. How can I improve SEO?
    @tameverts

    View full-size slide

  100. “The largest hurdle to creating
    and maintaining stellar site
    performance is the culture
    of your organization.
    Lara Hogan
    designingforperformance.com

    View full-size slide

  101. “No matter the size or type of team,
    it can be a challenge to educate,
    incentivize, and empower those around you.
    “Performance more often comes down to
    a cultural challenge, rather than simply
    a technical one.”
    Lara Hogan
    designingforperformance.com

    View full-size slide

  102. How to create
    a culture of performance

    View full-size slide

  103. 1. Have a champion
    higher up

    View full-size slide

  104. 2. Build a
    cross-disciplinary team

    View full-size slide

  105. Everyone who touches
    a page should care
    about the performance
    of that page.

    View full-size slide

  106. Embrace performance from the ground up.
    Embed engineers into other teams.
    Enlist performance ambassadors.
    Teach people how to use (or at least understand)
    the monitoring tools you use.

    View full-size slide

  107. 3. Set shared goals

    View full-size slide

  108. It’s perilously easy
    to accidentally become
    a gatekeeper.

    View full-size slide

  109. We first went
    to the engineering leaders,
    and then we went to
    our product leader.
    Our pitch was
    totally different...
    Reefath Rajali // PayPal
    chasingwaterfalls.io/episodes/episode-two-with-reefath-rajali/

    View full-size slide

  110. “When we went to our product leaders,
    we spoke more about the business numbers
    and the business benefits.
    “When we spoke to our engineering leaders,
    it was more about our consumer delight.”
    Reefath Rajali // PayPal
    chasingwaterfalls.io/episodes/episode-two-with-reefath-rajali/

    View full-size slide

  111. Find out what people
    care about.

    View full-size slide

  112. ❑ bounce rate
    ❑ cart size
    ❑ conversions
    ❑ revenue
    ❑ time on site
    ❑ page views
    ❑ SEO
    ❑ user happiness
    ❑ user retention
    ❑ competitors

    View full-size slide

  113. If they care about
    business metrics…

    View full-size slide

  114. If they care about
    user engagement…

    View full-size slide

  115. If they care about
    SEO…

    View full-size slide

  116. If they care about
    third parties…

    View full-size slide

  117. Who they are What they care about What to show them
    Executives
    Competition
    Business impact
    Benchmarks (filmstrips and videos)
    Correlation charts (perf + KPIs)
    Marketing
    Third parties
    Traffic + engagement
    SEO
    Content
    Third-party performance
    Correlation charts (perf + bounce rate)
    Lighthouse SEO audits
    Image size
    Devs / engineers Well, lots of stuff, probably Consult with perf team
    @tameverts

    View full-size slide

  118. 4. Make everyone
    accountable

    View full-size slide

  119. Performance budgets FTW!

    View full-size slide

  120. Give people ownership

    View full-size slide

  121. “One of the original directives
    of the performance team was
    we weren’t going
    to set ourselves up
    to be performance cops.”
    Dan Chilton, Vox Media
    responsivewebdesign.com/podcast/vox-media-performance/

    View full-size slide

  122. “We weren’t going to go around slapping
    people on the wrist, saying, ‘You built an article
    that broke the page size budget! You have to
    take that down or change that immediately!’
    “Our goal setting out was to set up best
    practices, make recommendations, and be a
    resource within the company that people can
    turn to when they have to make performance-
    related decisions.”
    Dan Chilton, Vox Media
    responsivewebdesign.com/podcast/vox-media-performance/

    View full-size slide

  123. 5. Communicate

    View full-size slide

  124. “We, as engineers,
    should learn how
    to show the impact
    on anything we do.”
    Malek Hakim // Priceline
    chasingwaterfalls.io/episodes/episode-one-with-malek-hakim/

    View full-size slide

  125. 6. Score some easy wins

    View full-size slide

  126. “The dull boring stuff”
    ~Andy Davies
    Scripts (especially third parties)
    Images
    Extraneous code
    Defer assets where possible

    View full-size slide

  127. Shaved 15KB off logo
    Ran A/B test
    Increased bookings
    chasingwaterfalls.io/episodes/episode-one-with-malek-hakim/

    View full-size slide

  128. 6. Don’t forget to celebrate!

    View full-size slide

  129. medium.com/the-telegraph-engineering

    View full-size slide

  130. In summary…

    View full-size slide

  131. There’s no magic.
    Show up with a plan.
    Do the work.
    Always be measuring.
    Keep doing the work.
    (Be patient.)

    View full-size slide

  132. Thanks!
    @tameverts

    View full-size slide