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

    WHAT WE DISCUSSED LAST TIME ▸ Page Load Time Sucks

    ▸ Time to First Byte ▸ Speed Index ▸ Page Weight
  2. 4.

    WHAT WE DISCUSSED LAST TIME ▸ Performance False Prophets: ▸

    Google AMP ▸ Facebook Instant Articles ▸ Apple News Articles
  3. 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!!!
  4. 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
  5. 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
  6. 19.

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

    ▸ Useful is subjective and hard to measure
  7. 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
  8. 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
  9. 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
  10. 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)
  11. 28.

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

    for measuring: ▸ Time to First Byte ▸ Speed Index ▸ Page Weight
  12. 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)
  13. 42.

    NEW METRICS ▸ First Meaningful Paint ▸ First Interactive /

    Consistently Interactive ▸ Input Latency
  14. 44.

    MEASURE MEASURE MEASURE ▸ Lighthouse in Chrome Dev Tools ▸

    WebPageTest.org ▸ Javascript metrics ▸ Find the metrics that are important to you