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.

Common Traits of High Performing Websites, BairesWeb - Argentina

Have you ever wondered how often some web performance best practices are implemented on the web? How much faster are sites that implement them, and what are some key things to avoid? During this session, we’ll review data from the HTTP Archive, CrUX and mPulse to help answer some of these questions.

  • Be the first to comment

  • Be the first to like this

Common Traits of High Performing Websites, BairesWeb - Argentina

  1. 1. ©2018 AKAMAI Common Traits of High Performing Websites BairesWeb - Argentina 28-Jan-2019 Paul Calvano Principal Web Performance Architect pacalvan@akamai.com
  2. 2. ©2018 AKAMAI Agenda ● Measuring web performance ● Correlation of best practices to performance ● Recommendations
  3. 3. ©2018 AKAMAI Where do WebPerf best practices come from?
  4. 4. ©2018 AKAMAI
  5. 5. ©2018 AKAMAI What do we mean by fast vs slow? Are users impacted by Front-End or Hardware Issues? Do all browsers get a fast experience? Are we sending too much content? Are we serving it in the most performant way? Is the backend having trouble keeping up with traffic?
  6. 6. ©2018 AKAMAI … And how do we measure it? ●TLSConnectTimeBackend Time Frontend Time ●BasePageTime ●TimetoFirstByte ●DNSTime ●TCPConnectTime ●TimetoVisuallyReady ●StartRender/First Paint ●FirstContentfulPaint ●LoadTime(onLoad) ●TimetoInteractive ●FullyLoadedTime ●TimetoFirstInteraction ●FirstInputDelay
  7. 7. ©2018 AKAMAI Backend vs Frontend time Source: Akamai mPulse, July 2018
  8. 8. ©2018 AKAMAI Data Sources Google BigQuery
  9. 9. ©2018 AKAMAI Data Sources CrUX: 4.7 million origins CrUX Argentina: 78K origins HTTP Archive Subset of sites visited by AR users Desktop: 57K origins Mobile: 25K origins
  10. 10. ©2018 AKAMAI
  11. 11. ©2018 AKAMAI Source: HTTP Archive + CrUX, July 2018 https://paulcalvano.com/index.php/2018/07/02/impact-of-page-weight-on-load-time/
  12. 12. ©2018 AKAMAI Source: HTTP Archive + CrUX, July 2018 https://paulcalvano.com/index.php/2018/07/02/impact-of-page-weight-on-load-time/
  13. 13. ©2018 AKAMAISource: HTTP Archive, December 2018 Image Bytes Image Requests Global Median Desktop Median Mobile 930KB 491KBArgentina Median Desktop Median Mobile 808KB 534KB pct90 Desktop pct90 Mobile Global Median Desktop Median Mobile 32 28 Argentina Median Desktop Median Mobile 36 32 pct90 Desktop pct90 Mobile 117 113
  14. 14. ©2018 AKAMAI What does Lighthouse tell us about images? Lighthouse estimates byte savings are based on JPEG quality 85 Greater savings are achievable w/ perceptual quality compression techniques + browser specific formats Source: Lighthouse via HTTP Archive, December 2018
  15. 15. ©2018 AKAMAI Source: HTTP Archive, October 2018
  16. 16. ©2018 AKAMAI Source: HTTP Archive, October 2018 https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
  17. 17. ©2018 AKAMAI Source: Akamai mPulse, December 2018
  18. 18. ©2018 AKAMAISource: Akamai mPulse, December 2018
  19. 19. ©2018 AKAMAI % Mobile traffic by country Source: Akamai mPulse, December 2018
  20. 20. ©2018 AKAMAI Android Device Fragmentation: ~ 12,200 devices! Source: Akamai mPulse, October 2018
  21. 21. ©2018 AKAMAI ● LongTasks API - implemented in Chrome browsers: ○ https://www.w3.org/TR/longtasks/ ● Whenever a task takes longer than 50ms it is considered a long task. ● mPulse is collecting the total durations of all long tasks during a page load. Source: Akamai mPulse, October 2018
  22. 22. ©2018 AKAMAI What about 3rd parties Source: HTTP Archive, August 2018
  23. 23. ©2018 AKAMAISource: HTTP Archive + CrUX, August 2018 Sites with more 3rd parties tend to be slower!
  24. 24. ©2018 AKAMAI How well are we compressing text assets? Only 48% of HTML responses are compressed. Source: HTTP Archive, October 2018
  25. 25. ©2018 AKAMAIhttps://paulcalvano.com/index.php/2018/07/25/brotli-compression-how-much-will-it-reduce-your-content/
  26. 26. ©2018 AKAMAISource: HTTP Archive, October 2018
  27. 27. ©2018 AKAMAISource: Akamai mPulse, October 2018
  28. 28. ©2018 AKAMAI Load Time Correlations Correlation using Pearson Correlation Coefficient Source: HTTP Archive, December 2018 https://discuss.httparchive.org/t/correlating-performance-metrics-to-page-characteristics/1548
  29. 29. ©2018 AKAMAI How many requests are in the critical rendering path? Source: https://developers.google.com/ web/fundamentals/performance /critical-rendering- path/analyzing-crp Lighthouse via HTTP Archive, October 2018 3 critical requests
  30. 30. ©2018 AKAMAI How Many Custom Webfonts Do You Use? 67.7% of websites use at least 1 web font. 26.5% use 5 or more fonts 5% use more than 10 fonts Source: HTTP Archive and CrUX, October 2018
  31. 31. ©2018 AKAMAI Shared Hosting or Self Hosting of Fonts 50% of all webfonts Note: Safari keys cache entries by requesting site 21,807 unique Google Fonts Source: HTTP Archive, October 2018
  32. 32. ©2018 AKAMAI Conclusions ● The long tail is important - think about your users ○ … and measure their experiences with RUM ● Choose your metrics wisely! ○ Which metric will best evaluate the feature you are testing? ● If you serve less content, your site will be faster. ○ Don’t expect browser caching to save you. ● JavaScript execution time is a significant bottleneck, especially on mobile. ○ Be careful how much code you are sending to users ● Optimize images for devices. ○ Avoid sending high res desktop quality images to mobile devices ● Limit the number of requests in the critical render path
  33. 33. ©2018 AKAMAIbit.ly/ha-slack Chat github.com/HTTPArchive Contribute discuss.httparchive.org Collaborate HTTP Archive Guided Tour https://bit.ly/2JmDnSH
  34. 34. 34 ©2018 AKAMAI
  35. 35. 35 ©2018 AKAMAI Q&A pacalvan@akamai.com @paulcalvano

×