Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fluent 2018: Measuring What Matters

83 views

Published on

Cliff Crocker discusses best practices for measuring what matters and applying an understandable methodology that achieves what we are all after: happier users.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Fluent 2018: Measuring What Matters

  1. 1. @Akamai Measuring What Matters Focusing on Perception Metrics Cliff Crocker, Product Line Director Web Performance at Akamai @cliffcrocker
  2. 2. 80x 30s per day, people log into their phones more than half of smartphone sessions are 30secs or less Waiting for slow pages to load Being shown interstitials Encountering unplayable videos Getting redirected to the homepage Other 46% 16% 16% 13% 11% Source: @lukew User Experience Focus Mobile User Behavior
  3. 3. Google Data, Aggregated, anonymized Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, n=3.7K, Global, March 2016 53% are abandoned if it takes longer than 3 seconds to load of mobile site visits Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performance Page Speed Update User Experience Focus Google ranking to factor mobile perf - July ‘18
  4. 4. ©2014 AKAMAI | FASTER FORWARDTM Foundational Metrics Get Ready for the Firehose
  5. 5. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Navigation Timing
  6. 6. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Navigation Timing Browser Events Front End TTFB Server/Back End DNS Connect NetworkSSL
  7. 7. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Resource Timing
  8. 8. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Resource Timing
  9. 9. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Resource Timing 2 -> Encoded -> Decoded -> Transfer Size Matters
  10. 10. How we talk about it -> In reality -> Real User Measurements 101 What’s happening on the backend?
  11. 11. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Server Timing
  12. 12. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Server Timing Server-Timing: <name>; duration="<duration>"; description="<description>" Examples: Server-Timing: cache-hit Server-Timing: auth; duration=75 Server-Timing: bytes-on-disk; description=17000 Server-Timing: db; duration=120; description="database access"
  13. 13. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Time to First Paint First Paint entry contains a DOMHighResTimeStamp reporting the time when the browser first rendered after navigation. This excludes the default background paint, but includes non-default background paint. This is the first key moment developers care about in page load – when the browser has started to render the page. First Contentful Paint entry contains a DOMHighResTimeStamp reporting the time when the browser first rendered any text, image (including background images), non-white canvas or SVG. This includes text with pending webfonts. This is the first time users could start consuming page content.
  14. 14. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Time to First Paint
  15. 15. ©2014 AKAMAI | FASTER FORWARDTM PURE JANK
  16. 16. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Long Tasks API
  17. 17. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101 Long Tasks API Long Task: An event loop task that exceeds 50ms Often contributing to: Delayed interaction, “jankiness” in scrolling and animations
  18. 18. ©2014 AKAMAI | FASTER FORWARDTM Measuring Perception
  19. 19. ©2014 AKAMAI | FASTER FORWARDTM Server Network Browser User Back end APM Traditional RUM RUM w/ Perceived Performance Do you really know when the page is ready for use? Are deferred elements blocking interactivity? Impacted by CPU limitations on mobile? Back-end Time Network Time Page Load Time Focus on Customer Experience What does perception really mean? Interactivity
  20. 20. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performance https://developers.google.com/web/fundamentals/performance/rail
  21. 21. ©2014 AKAMAI | FASTER FORWARDTM Time to Visually Ready Time to Interactive
  22. 22. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements Time to Visually Ready (TTVR) TTVR: When the page appears to be ready. Signals used: 1.) Time to first paint (if available) 2.) domContentLoadedEventEnd 3.) Hero Image (if defined) 4.) Framework ready (if defined) Highest signal = TTVR 1 2
  23. 23. ©2014 AKAMAI | FASTER FORWARDTM Google ”Speed Update” – July 2018 Google’s search ranking will begin factoring in mobile performanceReal User Measurements Time to Interactive (TTI) TTI: After TTVR, when would they have a good experience? Signals used - “page is interactive if…” 1.) Frames per second (FPS) > 20 FPS -> All modern browsers 2.) No long task events that are frame blocking -> Chrome only 3.) Page Busy (request idle callback polling) -> All browsers TTVR + point when 1-3 are true for 500ms = TTI
  24. 24. ©2018 AKAMAI mPulse Page Load Time what we’ve been optimizing for Time to Visually Ready Time to Interactive Time to First Interaction Application Looks Ready Application is Actually Ready Actual User Interaction (key, click, scroll) Focus on Customer Experience Is there a gap in your understanding of performance? Gapinperceived performance
  25. 25. ©2018 AKAMAI mPulseInform Your Performance Budget Tune your application and delivery for performance How heavy is my page? How much of that is HTML? Are my images overweight? Is JS contributing to page weight? Am I leveraging browser cache effectively? Too many http requests?

×