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.

1. ©2018 AKAMAI
Common Traits of High
Performing Websites
BairesWeb - Argentina
28-Jan-2019
Paul Calvano
Principal Web Performance Architect
pacalvan@akamai.com

2. ©2018 AKAMAI
Agenda
● Measuring web performance
● Correlation of best practices to performance
● Recommendations

3. ©2018 AKAMAI
Where do WebPerf best practices come from?

4. ©2018 AKAMAI

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. ©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. ©2018 AKAMAI
Backend vs Frontend time
Source: Akamai mPulse, July 2018

8. ©2018 AKAMAI
Data Sources
Google BigQuery

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

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. ©2018 AKAMAI
Source: HTTP Archive + CrUX, July 2018
https://paulcalvano.com/index.php/2018/07/02/impact-of-page-weight-on-load-time/

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. ©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. ©2018 AKAMAI
Source: HTTP Archive, October 2018

16. ©2018 AKAMAI
Source: HTTP Archive, October 2018
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

17. ©2018 AKAMAI
Source:
Akamai mPulse,
December 2018

18. ©2018 AKAMAISource: Akamai mPulse, December 2018

19. ©2018 AKAMAI
% Mobile traffic by country
Source: Akamai mPulse, December 2018

20. ©2018 AKAMAI
Android Device Fragmentation: ~ 12,200 devices!
Source:
Akamai mPulse,
October 2018

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. ©2018 AKAMAI
What about 3rd parties
Source: HTTP Archive, August 2018

23. ©2018 AKAMAISource: HTTP Archive + CrUX, August 2018
Sites with
more 3rd parties
tend to be slower!

24. ©2018 AKAMAI
How well are we compressing text assets?
Only 48% of HTML responses are compressed.
Source: HTTP Archive, October 2018

25. ©2018 AKAMAIhttps://paulcalvano.com/index.php/2018/07/25/brotli-compression-how-much-will-it-reduce-your-content/

26. ©2018 AKAMAISource: HTTP Archive, October 2018

27. ©2018 AKAMAISource: Akamai mPulse, October 2018

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. ©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. ©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. ©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. ©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. ©2018 AKAMAIbit.ly/ha-slack
Chat
github.com/HTTPArchive
Contribute
discuss.httparchive.org
Collaborate HTTP Archive Guided Tour
https://bit.ly/2JmDnSH

34. 34 ©2018 AKAMAI

35. 35 ©2018 AKAMAI
Q&A
pacalvan@akamai.com
@paulcalvano