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

1. @Akamai
Measuring What Matters
Focusing on Perception Metrics
Cliff Crocker, Product Line Director
Web Performance at Akamai
@cliffcrocker

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

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

5. ©2014 AKAMAI | FASTER FORWARDTM
Foundational Metrics
Get Ready for the Firehose

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

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

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. ©2014 AKAMAI | FASTER FORWARDTM
Google ”Speed Update” – July 2018
Google’s search ranking will begin factoring in mobile performanceReal User Measurements 101
Resource Timing

10. ©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

11. How we talk about it ->
In reality ->
Real User Measurements 101
What’s happening on the backend?

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

13. ©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"

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

15. ©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

16. ©2014 AKAMAI | FASTER FORWARDTM
PURE JANK

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

18. ©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

19. ©2014 AKAMAI | FASTER FORWARDTM
Measuring Perception

20. ©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

21. ©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

22. ©2014 AKAMAI | FASTER FORWARDTM
Time to Visually Ready
Time to Interactive

23. ©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

24. ©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

25. ©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

26. ©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?