1.
the hidden cost of
web components
Hubert Liu @hcliu
Kyle Conarro @conarro
Atlanta Web Performance Meetup
November 4, 2014

2.
in the beginning...

3.
in the beginning...

4.
rethinking the waterfall
source: A Better Waterfall Chart by Mark Zeman

5.
taking a step back
HAR spec

6.
finding slow resources
z.cdn.turner.com
7925 ms
i2.cdn.turner.com
7633 ms

7.
finding slow resources
Domain Total Load Time (ms)
z.cdn.turner.com 7,925
i2.cdn.turner.com 7,633
i.cdn.turner.com 5,209
ds.serving-sys.com 3,829
ads.cnn.com 2,569

8.
finding slow resources
Domain Total Load Time (ms)
z.cdn.turner.com 7,925
i2.cdn.turner.com 7,633
i.cdn.turner.com 5,209
ds.serving-sys.com 3,829
ads.cnn.com 2,569

9.
finding slow resources
9 references to
z.cdn.turner.com

10.
finding slow resources
but wait…

11.
finding slow resources
but wait…
where are slow requests coming from?

12.
tracking down the source

13.
tracking down the source
“...an HTTP header field that identifies the address of the web page that
linked to the resource being requested.”
http://en.wikipedia.org/wiki/HTTP_referer

14.
tracking down the source
Referer Request Count Total Load Time (ms)
homepage (www.cnn.com) 177 34,433
z.cdn.turner.com/xslo/cvp/assets/contain
er/2.0.4.0/cvp_main_container...
44 7,214
ads.cnn.com/html.ng/site=cnn&cnn_page
type=main&cnn_position=728x90...
9 2,977
z.cdn.turner.com/cnn/tmpl_asset/static/w
ww_homepage/2970/css/hplib-min.css
22 2,348
ds.serving-sys.com/BurstingRes//Site-
40150/Type-2/ed3d7348-93fb-4938-8d...
2 2,308

15.
tracking down the source
only 19 referers!

16.
tracking down the source
insights.rigor.com

17.
when to use what
Waterfall Chart Domain Analysis Referer Analysis
Visually represents a single
page load
Useful for:
● Identifying parser /
render-blocking
assets
● Spotting opportunities
for domain sharding
Aggregates resource load
times by domain
Useful for:
● Finding slow hosts
● Monitoring third-party
providers
Aggregates resource load
times by HTTP Referer
Useful for:
● Assigning costs to
resources
● Tracking down the
source for particular
requests

18.
questions?