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

Web Performance: Forget Everything I Said Last Time

Web Performance: Forget Everything I Said Last Time

An updated version of my web performance talk from a few years ago. Here we explain what's changed, what's the same, and how to dive deeper into user centric performance metrics.

7b8d0adf6fd2decedeb551dc9dd027de?s=128

Matt Shull

March 13, 2018
Tweet

Transcript

  1. WEB PERFORMANCE FORGET EVERYTHING I TOLD YOU LAST TIME

  2. FLASHBACK

  3. WHAT WE DISCUSSED LAST TIME ▸ Page Load Time Sucks

    ▸ Time to First Byte ▸ Speed Index ▸ Page Weight
  4. WHAT WE DISCUSSED LAST TIME ▸ Performance False Prophets: ▸

    Google AMP ▸ Facebook Instant Articles ▸ Apple News Articles
  5. WHAT WE DISCUSSED LAST TIME ▸ We need Performance Budgets

    ▸ Use the right type of images ▸ PNGs can be better than JPEGs ▸ Sometimes all you need is an SVG ▸ WebP All The Things (when it helps) ▸ Measure Measure Measure!!!
  6. WHAT WE DISCUSSED LAST TIME ▸ Why performance matters: ▸

    Long load times impacted bounce rate and conversion rate ▸ We knew somehow it impacted the bottom line of businesses selling online ▸ Slow sites suck
  7. WHAT’S NEW

  8. Patrick Meenan and Tammy Everts

  9. Patrick Meenan and Tammy Everts

  10. Patrick Meenan and Tammy Everts

  11. Patrick Meenan and Tammy Everts

  12. HOW MUCH ARE YOU LEAVING ON THE TABLE?

  13. DEMO: SPEED SCORECARD mattshull.com/webperf2018

  14. USER CENTRIC METRICS

  15. SPEED INDEX ▸ Helps us understand how fast the user

    perceived the page to load ▸ Number of seconds when 90% of the above the fold content loaded ▸ Ability to track “in the lab” for the last few years ▸ Ability to track “in the field” somewhat available
  16. SPEED INDEX

  17. NEW QUESTIONS ▸ Is it useful? ▸ Is it usable?

    ▸ Is it delightful?
  18. NEW METRICS

  19. FIRST MEANINGFUL PAINT ▸ Answers the “is it useful?” question

    ▸ Useful is subjective and hard to measure
  20. FIRST MEANINGFUL PAINT

  21. FIRST MEANINGFUL PAINT ▸ Answers the “is it useful?” question

    ▸ Useful is subjective and hard to measure ▸ “Hero Elements” ▸ Loading these important parts first makes the user perceive the page is loading faster
  22. FIRST INTERACTIVE ▸ Time when the page is both visually

    rendered and capable of reliably responding to user input ▸ Reasons for long FI: ▸ JavaScript needed to make components on the page work hasn’t loaded ▸ There are long tasks blocking the main thread
  23. CONSISTENTLY INTERACTIVE & INPUT LATENCY ▸ Consistently Interactive ▸ Time

    at when the main thread is able to consistently respond to user input ▸ Input Latency ▸ Should be 100ms or less for a smooth, interactive experience
  24. SO WHAT? mattshull.com/webperf2018

  25. BETTER TOOLING

  26. “IN THE LAB” TESTING: LIGHTHOUSE ▸ Created by Google ▸

    Allows you to measure performance and other important features/analytics ▸ Takes measurements from Javascript and other tools (such as ffmpeg for screen captures)
  27. mattshull.com/webperf2018 DEMO: LIGHTHOUSE

  28. “IN THE LAB” TESTING: WEBPAGETEST.ORG ▸ Still a great tool

    for measuring: ▸ Time to First Byte ▸ Speed Index ▸ Page Weight
  29. “IN THE LAB” TESTING: WEBPAGETEST.ORG

  30. “IN THE LAB” TESTING: WEBPAGETEST.ORG

  31. “IN THE FIELD” TESTING: FIRST PAINT & FIRST CONTENTFUL PAINT

  32. “IN THE FIELD” TESTING: FIRST PAINT & FIRST CONTENTFUL PAINT

  33. “IN THE FIELD” TESTING: FIRST PAINT & FIRST CONTENTFUL PAINT

  34. “IN THE FIELD” TESTING: FIRST MEANINGFUL PAINT

  35. “IN THE FIELD” TESTING: FIRST MEANINGFUL PAINT

  36. “IN THE FIELD” TESTING: FIRST MEANINGFUL PAINT

  37. “IN THE FIELD” TESTING: FIRST CONSISTENTLY INTERACTIVE

  38. WHAT’S COMING

  39. REMEMBER GOOGLE AMP? mattshull.com/webperf2018

  40. MACHINE LEARNING ▸ Going to really give us actionable insights

    ▸ Find correlations between metrics that we don’t realize impact each other ▸ Also a buzz word! (But really it’s just stats and programming)
  41. TAKE AWAYS

  42. NEW METRICS ▸ First Meaningful Paint ▸ First Interactive /

    Consistently Interactive ▸ Input Latency
  43. OLDER METRICS STILL WORK! ▸ Time to First Byte ▸

    Speed Index ▸ Page Weight
  44. MEASURE MEASURE MEASURE ▸ Lighthouse in Chrome Dev Tools ▸

    WebPageTest.org ▸ Javascript metrics ▸ Find the metrics that are important to you
  45. PERFORMANCE ISN’T A SINGLE POINT IN TIME

  46. MATT SHULL Web Performance Consultant
 mattshull.com/webperf2018