Have you ever thought about how your site’s performance compares to the web as a whole? Or maybe you’re curious how popular a particular web feature is. How much is too much JavaScript? The HTTP Archive has been keeping track of how the web is built since 2010. It enables you to find answers to questions about the state of the web past and present. In this talk we’ll explore how the HTTP Archive works, some of the ways people are using this dataset, and sneak a peek at things to come. Rick Viscomi (@rick_viscomi) is an engineer with Google's developer relations team, focusing on web transparency and maintaining the HTTP Archive. In a past life Rick helped make YouTube fast and co-authored the O'Reilly book "Using WebPageTest".

1. Tracking the
Performance of the Web
with HTTP Archive
NY Web Perf Meetup Group
July 25, 2017

2. 22
Rick Viscomi
● Maintainer, HTTP Archive
● Developer Programs Engineer, Google
● Former Web Dev, YouTube
● Co-author, Using WebPageTest@rick_viscomi
@HTTPArchive
rick@httparchive.org

3. 3
Steve Souders
@souders
Brain
Ilya Grigorik
@igrigorik
Soul
Pat Meenan
@patmeenan
Heart
The Rest of the Team

4. 4
“
httparchive.org
The HTTP Archive tracks
how the Web is built.

5. 5
Deconstructing the web

6. 6
Tracking the web

7. 7httparchive.org/interesting.php httparchive.org/trends.php

8. 8
How it Works
● Alexa’s top 500,000 websites
○ Home pages
○ Desktop and emulated mobile
● Powered by WebPageTest
○ Records HAR trace
○ Executes custom metrics
○ Records Lighthouse audits
● httparchive.org
○ Trends and stats
○ Discussion forum
● BigQuery and Cloud Storage
○ Queryable database
○ Raw HARs

9. 9
HTTP Archive Pipeline
134
500K
GCS
BQ
Biweekly

10. 10
discuss.httparchive.orgThe tip of the databerg
Curated stats/trends
Raw data

11. 11
Who uses the
HTTP Archive?
● Scholars
● Community
● Industry

12. 12
goo.gl/kxgzM1HTTP Archive referenced in research papers
. . .
In this article we utilize
the httparchive.org [9]
publicly available
dataset of captured
web performance
metrics
. . .
Desktop and mobile web page
comparison: characteristics,
trends, and implications
IEEE Communications Magazine (
Volume: 52, Issue: 9, September 2014 )
. . .
Recent stats from
httparchive.org show
that the top 300K URLs
in the world need on
average 38(!) TCP
connections to display
the site
. . .
HTTP2 explained
Computer Communication Review 44.3
(2014): 120-128.
. . .
We make extensive use
of the [...] data
available at HTTP
Archive to expose the
characteristics of 3rd
Party assets embedded
into the top 16,000
Alexa webpages
. . .
Are 3rd Parties Slowing Down the
Mobile Web?
Proceedings of the Eighth Wireless of the
Students, by the Students, and for the
Students Workshop. ACM, 2016.

13. 13goo.gl/oJSIjm
The web community uses HTTP Archive to answer questions about the state of the web
goo.gl/PvVHhL

14. 14
goo.gl/YPdLJuRemember when the average page size exceeded Doom?

15. 15
goo.gl/Lnp1ne goo.gl/e8kXq9Industrial tools use HTTP Archive data for calibration

16. 16
Case Study #1
The typical web page
1. How big is a typical web page?
2. How did it get so big?

17. 17goo.gl/omqhVy

18. 18httparchive.org/interesting.php

19. 19
goo.gl/3NJnWXQuerying the average number of bytes per page
SELECT
INTEGER(AVG(bytesTotal)/1024)
FROM
[httparchive:runs.2017_07_01_pages]
1
2
3
4
3034 KB

20. 20
goo.gl/nD3whqQuerying the median number of bytes per page
SELECT
INTEGER(NTH(501, QUANTILES(bytesTotal, 1001))/1024)
FROM
[httparchive:runs.2017_07_01_pages]
1
2
3
4
1402 KB

21. 21
Case Study #2
Popular JavaScript libraries
1. What are the top libraries?
2. How fast are they?

22. 22
goo.gl/xJztDbFinding the top 10 JS libraries detected by HTTP Archive
SELECT
APPROX_TOP_COUNT(lib.name, 10)
FROM
`httparchive.scratchspace.2017_07_01_js_libs`
1
2
3
4

23. 23
jQuery web share
83.5%

24. 24
value count %
jQuery 395978 0.835
jQuery UI 104475 0.220
Modernizr 76010 0.160
Bootstrap 65843 0.139
yepnope 53533 0.113
FlexSlider 39428 0.083
SWFObject 20623 0.044
Underscore 19857 0.042
Google Maps 16808 0.035
Moment.js 15691 0.033
1
2
3
4
5
6
7
8
9
10
(count / 474058)

25. 25

26. 26
(log axis)

27. 27goo.gl/Wo9VFYJoining libraries with their respective performance data
SELECT
RANK() OVER(ORDER BY COUNT(0) DESC) AS row,
lib.name AS lib_name,
COUNT(0) AS volume,
APPROX_QUANTILES(page.renderStart, 1000)[OFFSET(500)] AS renderStart,
APPROX_QUANTILES(page.bytesJs, 1000)[OFFSET(500)] AS bytesJs
FROM (
SELECT url, lib.name AS name
FROM `httparchive.scratchspace.2017_07_01_js_libs`) AS lib
JOIN (
SELECT url, renderStart, bytesJs
FROM `httparchive.runs.2017_07_01_pages`) AS page
ON
lib.url = page.url
GROUP BY
lib_name
ORDER BY
volume DESC
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

28. 28
row lib_name volume renderStart bytesJs
1 jQuery 395652 2300 273931
2 jQuery UI 104406 2700 354205
3 Modernizr 75964 2500 341983
4 Bootstrap 65775 2364 263412
5 yepnope 53493 2538 336586
6 FlexSlider 39389 2600 360767
7 SWFObject 20616 2391 347912
8 Underscore 19835 2533 407601
9 Google Maps 16788 2900 471497
10 Moment.js 15671 2634 425747
Morbid curiosity
How are JS library popularity and perf metrics correlated?
1. Run in BigQuery
2. Export data to
Google Sheets
3. =CORREL(A2:A, D2:D)
formula to get
correlation coefficient
goo.gl/ovJwT2

29. 29
Morbid curiosity
How are JS library popularity and perf metrics correlated?
row-render row-bytes volume-render volume-bytes
0.093 0.189 -0.055 -0.108
WEAK SAUCE
goo.gl/ovJwT2

30. 30
1. What % are invalid?
2. Why are they invalid?
3. How can they be fixed?
Case Study #3
The lang attribute

31. 31goo.gl/VBJpYEQuerying ~500K Lighthouse audits with HTTP Archive on BigQuery
SELECT
JSON_EXTRACT_SCALAR(
report, "$.audits.valid-lang.score") AS valid,
COUNT(0) AS volume
FROM
[httparchive:har.latest_lighthouse_mobile]
WHERE
report IS NOT NULL
GROUP BY
valid
HAVING
valid IS NOT NULL
ORDER BY
valid
1
2
3
4
5
6
7
8
9
10
11
12
13
14

32. 32
valid lang attributes
99.9%
valid volume
false 000424
true 424917

33. 33Extracting invalid lang attribute values
SELECT
REGEXP_EXTRACT_ALL(
LOWER(
JSON_EXTRACT(
report,
"$.audits.valid-lang.details.items"
)
),
r'blang="([^"]*)"'
) AS langs
FROM
`httparchive.har.2017_06_15_android_lighthouse`
1
2
3
4
5
6
7
8
9
10
11
12

34. 34Counting distinct invalid lang attribute values
SELECT
COUNT(0) AS volume,
lang
FROM (
SELECT
REGEXP_EXTRACT_ALL(LOWER(JSON_EXTRACT(report,
"$.audits.valid-lang.details.items")),
r'blang="([^"]*)"') AS langs
FROM
`httparchive.har.2017_06_15_android_lighthouse`)
CROSS JOIN
UNNEST(langs) AS lang
GROUP BY
lang
ORDER BY
volume DESC
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
goo.gl/2ZfMyr

35. 35
volume lang
107 zh_cn
68 cz
58 zh_tw
52 join-count
48 en_us
43 0
42 pt_pt
42 a1
27 ge
27 x-normage
24 main
24 x-none
23 english
22 none
21 2
21 kz
20 cn
20 jp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

36. 36
volume lang
107 zh_cn
68 cz
58 zh_tw
52 join-count
48 en_us
43 0
42 pt_pt
42 a1
27 ge
27 x-normage
24 main
24 x-none
23 english
22 none
21 2
21 kz
20 cn
20 jp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1. Nonsense

37. 37
volume lang
107 zh_cn
68 cz
58 zh_tw
52 join-count
48 en_us
43 0
42 pt_pt
42 a1
27 ge
27 x-normage
24 main
24 x-none
23 english
22 none
21 2
21 kz
20 cn
20 jp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1. Nonsense
2. Null

38. 38
volume lang
107 zh_cn
68 cz
58 zh_tw
52 join-count
48 en_us
43 0
42 pt_pt
42 a1
27 ge
27 x-normage
24 main
24 x-none
23 english
22 none
21 2
21 kz
20 cn
20 jp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1. Nonsense
2. Null
3. TLD != lang
cz → cs
ge → ka
kz → kk
cn → zh
jp → ja
Source: Language Subtag Registry

39. 39
volume lang
107 zh_cn
68 cz
58 zh_tw
52 join-count
48 en_us
43 0
42 pt_pt
42 a1
27 ge
27 x-normage
24 main
24 x-none
23 english
22 none
21 2
21 kz
20 cn
20 jp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1. Nonsense
2. Null
3. TLD != lang
4. Locale != lang
zh_cn → zh-CN → zh
zh_tw → zh-TW
en_us → en-US
pt_pt → pt-PT → pt
Source: W3C Article on Language Tags

40. 40
What’s New
● Lighthouse integration
● Third party JS libs
● Linux WPT agents

41. 41
Coming Soon
● Platform detection
● Vulnerability detection
● Curated reports
● Improved data viz
● Video series

42. 42
Wishlist
● Website categorization
● Millions of tests

43. 43
Sponsors
Contact us at team@httparchive.org if interested

44. 44
Work With Us
bit.ly/ha-slack
Chat
github.com/HTTPArchive
Contribute
discuss.httparchive.org
Collaborate

45. 45
Thanks!
bit.ly/ha-slack
Chat
github.com/HTTPArchive
Contribute
discuss.httparchive.org
Collaborate
@HTTPArchive
@rick_viscomi
rick@httparchive.org
team@httparchive.org