The Hidden Cost of Web Components - ATL Web Performance Meetup

K
the hidden cost of 
web components 
Hubert Liu @hcliu 
Kyle Conarro @conarro 
Atlanta Web Performance Meetup 
November 4, 2014
in the beginning...
in the beginning...
rethinking the waterfall 
source: A Better Waterfall Chart by Mark Zeman
taking a step back 
HAR spec
finding slow resources 
z.cdn.turner.com 
7925 ms 
i2.cdn.turner.com 
7633 ms
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
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
finding slow resources 
9 references to 
z.cdn.turner.com
finding slow resources 
but wait…
finding slow resources 
but wait… 
where are slow requests coming from?
tracking down the source
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
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
tracking down the source 
only 19 referers!
tracking down the source 
insights.rigor.com
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
questions?
1 of 18

Recommended

爬虫点滴 by
爬虫点滴爬虫点滴
爬虫点滴Open Party
1.4K views28 slides
Spatial script for my JS.Everywhere 2012 by
Spatial script for my JS.Everywhere 2012Spatial script for my JS.Everywhere 2012
Spatial script for my JS.Everywhere 2012Steven Pousty
434 views1 slide
15 map reduce on azure by
15 map reduce on azure15 map reduce on azure
15 map reduce on azurePatrick Bury
58 views8 slides
Quelle valeur pour les MOOCs. Une synthèse de la validité des outils d'évalua... by
Quelle valeur pour les MOOCs. Une synthèse de la validité des outils d'évalua...Quelle valeur pour les MOOCs. Une synthèse de la validité des outils d'évalua...
Quelle valeur pour les MOOCs. Une synthèse de la validité des outils d'évalua...Prof_UQAM_TIC
5.5K views62 slides
Leveraging DNS to Surface Attacker Activity by
Leveraging DNS to Surface Attacker ActivityLeveraging DNS to Surface Attacker Activity
Leveraging DNS to Surface Attacker ActivitySqrrl
696 views35 slides
Phd tutorial hawq_v0.1 by
Phd tutorial hawq_v0.1Phd tutorial hawq_v0.1
Phd tutorial hawq_v0.1seungdon Choi
866 views15 slides

More Related Content

Similar to The Hidden Cost of Web Components - ATL Web Performance Meetup

DNS Cache Poisoning by
DNS Cache PoisoningDNS Cache Poisoning
DNS Cache PoisoningKourosh Sajjadi
24 views24 slides
Surviving A DDoS Attack: Securing CDN Traffic at CloudFlare by
Surviving A DDoS Attack: Securing CDN Traffic at CloudFlareSurviving A DDoS Attack: Securing CDN Traffic at CloudFlare
Surviving A DDoS Attack: Securing CDN Traffic at CloudFlareCloudflare
13.7K views62 slides
Getting a Grip on CDN Performance - Why and How by
Getting a Grip on CDN Performance - Why and HowGetting a Grip on CDN Performance - Why and How
Getting a Grip on CDN Performance - Why and HowAaron Peters
2.5K views46 slides
«Почему Spark отнюдь не так хорош» by
«Почему Spark отнюдь не так хорош»«Почему Spark отнюдь не так хорош»
«Почему Spark отнюдь не так хорош»Olga Lavrentieva
1.9K views50 slides
Austin cassandra meetup by
Austin cassandra meetupAustin cassandra meetup
Austin cassandra meetupgdusbabek
768 views33 slides
DNS_Tutorial 2.pptx by
DNS_Tutorial 2.pptxDNS_Tutorial 2.pptx
DNS_Tutorial 2.pptxviditsir
5 views41 slides

Similar to The Hidden Cost of Web Components - ATL Web Performance Meetup(7)

Surviving A DDoS Attack: Securing CDN Traffic at CloudFlare by Cloudflare
Surviving A DDoS Attack: Securing CDN Traffic at CloudFlareSurviving A DDoS Attack: Securing CDN Traffic at CloudFlare
Surviving A DDoS Attack: Securing CDN Traffic at CloudFlare
Cloudflare13.7K views
Getting a Grip on CDN Performance - Why and How by Aaron Peters
Getting a Grip on CDN Performance - Why and HowGetting a Grip on CDN Performance - Why and How
Getting a Grip on CDN Performance - Why and How
Aaron Peters2.5K views
«Почему Spark отнюдь не так хорош» by Olga Lavrentieva
«Почему Spark отнюдь не так хорош»«Почему Spark отнюдь не так хорош»
«Почему Spark отнюдь не так хорош»
Olga Lavrentieva1.9K views
Austin cassandra meetup by gdusbabek
Austin cassandra meetupAustin cassandra meetup
Austin cassandra meetup
gdusbabek768 views
DNS_Tutorial 2.pptx by viditsir
DNS_Tutorial 2.pptxDNS_Tutorial 2.pptx
DNS_Tutorial 2.pptx
viditsir5 views
Data Science Lab Meetup: Cassandra and Spark by Christopher Batey
Data Science Lab Meetup: Cassandra and SparkData Science Lab Meetup: Cassandra and Spark
Data Science Lab Meetup: Cassandra and Spark

Recently uploaded

Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated... by
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...TomHalpin9
5 views29 slides
DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t... by
DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t...DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t...
DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t...Deltares
9 views26 slides
Software evolution understanding: Automatic extraction of software identifier... by
Software evolution understanding: Automatic extraction of software identifier...Software evolution understanding: Automatic extraction of software identifier...
Software evolution understanding: Automatic extraction of software identifier...Ra'Fat Al-Msie'deen
7 views33 slides
AI and Ml presentation .pptx by
AI and Ml presentation .pptxAI and Ml presentation .pptx
AI and Ml presentation .pptxFayazAli87
11 views15 slides
The Era of Large Language Models.pptx by
The Era of Large Language Models.pptxThe Era of Large Language Models.pptx
The Era of Large Language Models.pptxAbdulVahedShaik
5 views9 slides
DSD-INT 2023 Exploring flash flood hazard reduction in arid regions using a h... by
DSD-INT 2023 Exploring flash flood hazard reduction in arid regions using a h...DSD-INT 2023 Exploring flash flood hazard reduction in arid regions using a h...
DSD-INT 2023 Exploring flash flood hazard reduction in arid regions using a h...Deltares
5 views31 slides

Recently uploaded(20)

Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated... by TomHalpin9
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...
TomHalpin95 views
DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t... by Deltares
DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t...DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t...
DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t...
Deltares9 views
Software evolution understanding: Automatic extraction of software identifier... by Ra'Fat Al-Msie'deen
Software evolution understanding: Automatic extraction of software identifier...Software evolution understanding: Automatic extraction of software identifier...
Software evolution understanding: Automatic extraction of software identifier...
AI and Ml presentation .pptx by FayazAli87
AI and Ml presentation .pptxAI and Ml presentation .pptx
AI and Ml presentation .pptx
FayazAli8711 views
DSD-INT 2023 Exploring flash flood hazard reduction in arid regions using a h... by Deltares
DSD-INT 2023 Exploring flash flood hazard reduction in arid regions using a h...DSD-INT 2023 Exploring flash flood hazard reduction in arid regions using a h...
DSD-INT 2023 Exploring flash flood hazard reduction in arid regions using a h...
Deltares5 views
360 graden fabriek by info33492
360 graden fabriek360 graden fabriek
360 graden fabriek
info3349237 views
Tridens DevOps by Tridens
Tridens DevOpsTridens DevOps
Tridens DevOps
Tridens9 views
Copilot Prompting Toolkit_All Resources.pdf by Riccardo Zamana
Copilot Prompting Toolkit_All Resources.pdfCopilot Prompting Toolkit_All Resources.pdf
Copilot Prompting Toolkit_All Resources.pdf
Riccardo Zamana8 views
DSD-INT 2023 Wave-Current Interaction at Montrose Tidal Inlet System and Its ... by Deltares
DSD-INT 2023 Wave-Current Interaction at Montrose Tidal Inlet System and Its ...DSD-INT 2023 Wave-Current Interaction at Montrose Tidal Inlet System and Its ...
DSD-INT 2023 Wave-Current Interaction at Montrose Tidal Inlet System and Its ...
Deltares10 views
DSD-INT 2023 The Danube Hazardous Substances Model - Kovacs by Deltares
DSD-INT 2023 The Danube Hazardous Substances Model - KovacsDSD-INT 2023 The Danube Hazardous Substances Model - Kovacs
DSD-INT 2023 The Danube Hazardous Substances Model - Kovacs
Deltares8 views
DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko... by Deltares
DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko...DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko...
DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko...
Deltares14 views
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ... by Donato Onofri
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...
Donato Onofri795 views
DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the... by Deltares
DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the...DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the...
DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the...
Deltares6 views

The Hidden Cost of Web Components - ATL Web Performance Meetup

  • 1. the hidden cost of web components Hubert Liu @hcliu Kyle Conarro @conarro Atlanta Web Performance Meetup November 4, 2014
  • 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?
  • 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

Editor's Notes

  1. in the beginning there was the waterfall. helps identify render blocking stylesheets parser blocking scripts opportunities for domain sharding (lots of blocking) slow individual requests
  2. use the referer to see the source of every request -- who is responsible for loading this resource?