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, WebPerfDays Amsterdam 07-Nov-2018

440 views

Published on

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.

Published in: Internet
  • Be the first to comment

Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018

  1. 1. ©2018 AKAMAI Common Traits of High Performing Websites 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 Where do WebPerf best practices come from?
  5. 5. ©2018 AKAMAI
  6. 6. ©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?
  7. 7. ©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
  8. 8. ©2018 AKAMAI Backend vs Frontend time Source: Akamai mPulse, July 2018
  9. 9. ©2018 AKAMAI Data Sources Google BigQuery
  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 AKAMAI Image Bloat Source: HTTP Archive, October 2018
  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, October 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, October 2018
  18. 18. ©2018 AKAMAI Source: Akamai mPulse, October 2018
  19. 19. ©2018 AKAMAI Distribution of mobile traffic by country Source: Akamai mPulse, October 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, October 2018
  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 mPulse Answers Key Questions
  36. 36. 36 ©2018 AKAMAI Q&A pacalvan@akamai.com @paulcalvano

×