SlideShare a Scribd company logo

Tracking Page Speed

SergeyChernyshev
SergeyChernyshev

Over the years, multitude of metrics were developed, from Time To First Byte and Page Load Time all the way to more modern and sophisticated ones like Time to First Paint, ATF, Speed Index and Frames per Second. One challenge with current performance metrics is that they all are proxies for user experience and do not translate directly into user satisfaction and business gains, but with each new metric we are getting closer to measuring what matters. Sergey will talk about pros and cons of technical metrics historically used to monitor performance, describe two core methods or measurement/monitoring (synthetic and RUM) and introduce latest developments in tracking user-centric metrics. Slides updated from similar talks since original presentation.

Tracking Page Speed

1 of 22
Download to read offline
T R A C K I N G
PA G E
S P E E D
S E R G E Y C H E R N Y S H E V
S C A L A B I L I T Y & P E R F O R M A N C E
number of users
timetoload
number of users
timetoload
S C A L A B I L I T Y & P E R F O R M A N C E
0
S C A L A B I L I T Y & P E R F O R M A N C E
One User
timetoload
0
S1
W H Y D O W E M E A S U R E S P E E D ?
• Monitor for degradations (Ops)
• Analyze code for perf issues (Devs)
• Verify improvements (Devs)
• Prioritize improvements (Business)
• Budget for WPO initiatives (Business)
S TAT S
• Pinterest: -40% wait time => +15% SEO, +15% conversion (2017)
• DoubleClick: 5s vs 19s on mobile => 2x ad revenue (2016)
• Trainline: -300ms latency => +$11.5M / year revenue (2016)
• Etsy: +160Kb => +12% bounce rate (2014)
• Edmunds: -77% load time => +20% page views (2011)
• Mozilla: -2.2s => +15.4% Downloads (2010)
• Google: +400ms => -0.21% searches after experiment! (2009)
• Netflix: +GZip => -43% Traffic cost (2008)
• Amazon: +100ms => -1% revenue (2008)
• Google: +500ms => -25% searches (2006) WPOStats.com
Ad

Recommended

Capturing speed of user experience using user timing api
Capturing speed of user experience using user timing apiCapturing speed of user experience using user timing api
Capturing speed of user experience using user timing apiSergeyChernyshev
 
Managing application performance by Kwame Thomison
Managing application performance by Kwame ThomisonManaging application performance by Kwame Thomison
Managing application performance by Kwame ThomisonSergeyChernyshev
 
Fastest request is never made
Fastest request is never madeFastest request is never made
Fastest request is never madeSergeyChernyshev
 
Designing speed with progressive enhancement
Designing speed with progressive enhancementDesigning speed with progressive enhancement
Designing speed with progressive enhancementSergeyChernyshev
 
Web performance tools @ WebPerf.camp 2016
Web performance tools @ WebPerf.camp 2016Web performance tools @ WebPerf.camp 2016
Web performance tools @ WebPerf.camp 2016SergeyChernyshev
 
Extending your applications to the edge with CDNs
Extending your applications to the edge with CDNsExtending your applications to the edge with CDNs
Extending your applications to the edge with CDNsSergeyChernyshev
 

More Related Content

More from SergeyChernyshev

What we can learn from CDNs about Web Development, Deployment, and Performance
What we can learn from CDNs about Web Development, Deployment, and PerformanceWhat we can learn from CDNs about Web Development, Deployment, and Performance
What we can learn from CDNs about Web Development, Deployment, and PerformanceSergeyChernyshev
 
Scalability vs. Performance
Scalability vs. PerformanceScalability vs. Performance
Scalability vs. PerformanceSergeyChernyshev
 
Web performance: beyond load testing
Web performance: beyond load testingWeb performance: beyond load testing
Web performance: beyond load testingSergeyChernyshev
 
Introduction to web performance @ IEEE
Introduction to web performance @ IEEEIntroduction to web performance @ IEEE
Introduction to web performance @ IEEESergeyChernyshev
 
Introduction to Web Performance
Introduction to Web PerformanceIntroduction to Web Performance
Introduction to Web PerformanceSergeyChernyshev
 
Performance anti patterns in ajax applications
Performance anti patterns in ajax applicationsPerformance anti patterns in ajax applications
Performance anti patterns in ajax applicationsSergeyChernyshev
 
Keeping track of your performance using Show Slow
Keeping track of your performance using Show SlowKeeping track of your performance using Show Slow
Keeping track of your performance using Show SlowSergeyChernyshev
 
Keeping track of your performance using show slow
Keeping track of your performance using show slowKeeping track of your performance using show slow
Keeping track of your performance using show slowSergeyChernyshev
 
Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2SergeyChernyshev
 
Php Code Profiling Using X Debug
Php Code Profiling Using X DebugPhp Code Profiling Using X Debug
Php Code Profiling Using X DebugSergeyChernyshev
 
Open Source Hardware: A Start...
Open Source Hardware: A Start...Open Source Hardware: A Start...
Open Source Hardware: A Start...SergeyChernyshev
 
Open Source Hardware (adolescence)
Open Source Hardware (adolescence)Open Source Hardware (adolescence)
Open Source Hardware (adolescence)SergeyChernyshev
 
Semantic Media Wiki & Semantic Forms
Semantic Media Wiki & Semantic FormsSemantic Media Wiki & Semantic Forms
Semantic Media Wiki & Semantic FormsSergeyChernyshev
 
Behind the Scenes at LiveJournal: Scaling Storytime
Behind the Scenes at LiveJournal: Scaling StorytimeBehind the Scenes at LiveJournal: Scaling Storytime
Behind the Scenes at LiveJournal: Scaling StorytimeSergeyChernyshev
 

More from SergeyChernyshev (19)

What we can learn from CDNs about Web Development, Deployment, and Performance
What we can learn from CDNs about Web Development, Deployment, and PerformanceWhat we can learn from CDNs about Web Development, Deployment, and Performance
What we can learn from CDNs about Web Development, Deployment, and Performance
 
Scalability vs. Performance
Scalability vs. PerformanceScalability vs. Performance
Scalability vs. Performance
 
Web performance: beyond load testing
Web performance: beyond load testingWeb performance: beyond load testing
Web performance: beyond load testing
 
Introduction to web performance @ IEEE
Introduction to web performance @ IEEEIntroduction to web performance @ IEEE
Introduction to web performance @ IEEE
 
Introduction to Web Performance
Introduction to Web PerformanceIntroduction to Web Performance
Introduction to Web Performance
 
Performance anti patterns in ajax applications
Performance anti patterns in ajax applicationsPerformance anti patterns in ajax applications
Performance anti patterns in ajax applications
 
Taming 3rd party content
Taming 3rd party contentTaming 3rd party content
Taming 3rd party content
 
Velocity 2010 review
Velocity 2010 reviewVelocity 2010 review
Velocity 2010 review
 
Keeping track of your performance using Show Slow
Keeping track of your performance using Show SlowKeeping track of your performance using Show Slow
Keeping track of your performance using Show Slow
 
Keeping track of your performance using show slow
Keeping track of your performance using show slowKeeping track of your performance using show slow
Keeping track of your performance using show slow
 
In Search of Speed
In Search of SpeedIn Search of Speed
In Search of Speed
 
Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2
 
Php Code Profiling Using X Debug
Php Code Profiling Using X DebugPhp Code Profiling Using X Debug
Php Code Profiling Using X Debug
 
Why RDFa?
Why RDFa?Why RDFa?
Why RDFa?
 
Introduction to RDFa
Introduction to RDFaIntroduction to RDFa
Introduction to RDFa
 
Open Source Hardware: A Start...
Open Source Hardware: A Start...Open Source Hardware: A Start...
Open Source Hardware: A Start...
 
Open Source Hardware (adolescence)
Open Source Hardware (adolescence)Open Source Hardware (adolescence)
Open Source Hardware (adolescence)
 
Semantic Media Wiki & Semantic Forms
Semantic Media Wiki & Semantic FormsSemantic Media Wiki & Semantic Forms
Semantic Media Wiki & Semantic Forms
 
Behind the Scenes at LiveJournal: Scaling Storytime
Behind the Scenes at LiveJournal: Scaling StorytimeBehind the Scenes at LiveJournal: Scaling Storytime
Behind the Scenes at LiveJournal: Scaling Storytime
 

Recently uploaded

Augmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical ProfessionalsAugmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical Professionalsthirdeyegen65
 
history of tau gamma architect.1968.....
history of tau gamma architect.1968.....history of tau gamma architect.1968.....
history of tau gamma architect.1968.....josephiigo
 
APAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, ThailandAPAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, ThailandAPNIC
 
Augmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & DefenseAugmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & Defensethirdeyegen65
 
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS  Clarify, Feature Store, Hyper parameter TuningAWS Overview of AWS  Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS Clarify, Feature Store, Hyper parameter TuningVarun Garg
 
Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...ssuser7b7f4e
 
Modern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budgetModern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budgetmatt806068
 
[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchain[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchainhackersuli
 
UGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptxUGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptxRiteshsahu101
 
Red shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's CyberspaceRed shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's Cyberspacesttyk
 

Recently uploaded (13)

Augmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical ProfessionalsAugmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical Professionals
 
history of tau gamma architect.1968.....
history of tau gamma architect.1968.....history of tau gamma architect.1968.....
history of tau gamma architect.1968.....
 
APAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, ThailandAPAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, Thailand
 
Augmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & DefenseAugmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & Defense
 
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS  Clarify, Feature Store, Hyper parameter TuningAWS Overview of AWS  Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
 
INTERNET
INTERNETINTERNET
INTERNET
 
Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...
 
Modern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budgetModern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budget
 
[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchain[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchain
 
UGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptxUGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptx
 
Red shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's CyberspaceRed shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's Cyberspace
 
Riesgos online
Riesgos onlineRiesgos online
Riesgos online
 
B1 Evaluation.docx
B1 Evaluation.docxB1 Evaluation.docx
B1 Evaluation.docx
 

Tracking Page Speed

  • 1. T R A C K I N G PA G E S P E E D S E R G E Y C H E R N Y S H E V
  • 2. S C A L A B I L I T Y & P E R F O R M A N C E number of users timetoload
  • 3. number of users timetoload S C A L A B I L I T Y & P E R F O R M A N C E 0
  • 4. S C A L A B I L I T Y & P E R F O R M A N C E One User timetoload 0 S1
  • 5. W H Y D O W E M E A S U R E S P E E D ? • Monitor for degradations (Ops) • Analyze code for perf issues (Devs) • Verify improvements (Devs) • Prioritize improvements (Business) • Budget for WPO initiatives (Business)
  • 6. S TAT S • Pinterest: -40% wait time => +15% SEO, +15% conversion (2017) • DoubleClick: 5s vs 19s on mobile => 2x ad revenue (2016) • Trainline: -300ms latency => +$11.5M / year revenue (2016) • Etsy: +160Kb => +12% bounce rate (2014) • Edmunds: -77% load time => +20% page views (2011) • Mozilla: -2.2s => +15.4% Downloads (2010) • Google: +400ms => -0.21% searches after experiment! (2009) • Netflix: +GZip => -43% Traffic cost (2008) • Amazon: +100ms => -1% revenue (2008) • Google: +500ms => -25% searches (2006) WPOStats.com
  • 7. WHAT DOES MY SITE COST? WHATDOESMYSITECOST.COM http://www.disney.com/
  • 8. % OF DAILY BUDGET WHATDOESMYSITECOST.COM http://www.disney.com/
  • 10. S Y N T H E T I C M O N I T O R I N G , T E S T I N G & A N A LY S I S • From particular location • Tester controls instrumentation • One metric value • Data can have lots of details for analysis
  • 11. R E A L U S E R M E A S U R E M E N T • Real users (a lot of them) • A lot of data (need to store it) • All noise you can get, requires filtering • Metrics are distributions • Can correlate to business KPIs
  • 12. T O D AY ' S M E T R I C S • DNS, SSL/TLS, Time To First Byte (TTFB) • Page Load, Document Complete, Fully Loaded • Size of DOM, Frames per Second • First Paint, First “Contentful” or Meaningful Paint • Above the Fold Time (AFT) • SpeedIndex
  • 13. T I M E T O F I R S T PA I N T • Shows when completely useless part is over TTFP 3.5s
  • 14. A F T ( A B O V E T H E F O L D T I M E ) • When everything is finally visible AFT 15.3s
  • 15. S P E E D I N D E X • Unifies rendering progress in one number Speed Index 8618
  • 16. M E A S U R E U S E R E X P E R I E N C E • Great experience for users • "Fast" is just a component • Correlate what you measure to business KPIs • Do not measure what's easy, measure what matters N O T T E C H N O L O G Y
  • 17. I N T E R A C T I O N O N T H E W E B 1. Verify destination 2. Provide primary content 3. Allow interaction 4. Show secondary content 5. Invisible tasks ✦ Acknowledge action
  • 18. D E S I G N C O M P O N E N T S 1. Verify destination 2. Primary content …
  • 19. E X T E N D E D M E T R I C S • Time To First Paint (TTFP) - 3.5s • Verify Destination - 8s • Primary content - 11s • ... • Above The Fold (AFT) - 15.3s
  • 20. U S E R T I M I N G A P I • Records custom JS timings on the page • Recorded by both RUM and Synthetic tools • Can be hard to match with user's reality • Uses JavaScript instrumentation https://github.com/sergeychernyshev/ux-capture
  • 21. H E R O E L E M E N T T I M I N G A P I • Use elementtiming=“name” HTML attribute • Currently recorded only by
  • 22. T H A N K Y O U ! sergey.chernyshev@gmail.com @SergeyChe