Mais conteúdo relacionado Semelhante a Fluent 2018: Measuring What Matters Semelhante a Fluent 2018: Measuring What Matters (20) Mais de Akamai Developers & Admins Mais de Akamai Developers & Admins (20) Fluent 2018: Measuring What Matters3. 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
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
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?