The Hidden Cost of Web Components - ATL Web Performance Meetup

•

Nov. 05, 2014

• •

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

in the beginning...

in the beginning...

Next SlideShares

Upcoming SlideShare

Loading in …3

×

The Hidden Cost of Web Components - ATL Web Performance Meetup

Nov. 05, 2014

• •

Download to read offline

Eliminating slow or unnecessary HTTP requests is essential to maintaining fast websites. Identifying which requests should be removed, however, can prove difficult. In this session, we'll present a new way of analyzing HAR data that ranks the various components of a website by the cost they have on performance.

Eliminating slow or unnecessary HTTP requests is essential to maintaining fast websites. Identifying which requests should be removed, however, can prove difficult. In this session, we'll present a new way of analyzing HAR data that ranks the various components of a website by the cost they have on performance.

More Related Content

In the Plex: How Google Thinks, Works, and Shapes Our Lives Steven Levy

Hamlet's BlackBerry: A Practical Philosophy for Building a Good Life in the Digital Age William Powers

The Impulse Economy: Understanding Mobile Shoppers and What Makes Them Buy Gary Schwartz

Emergence: The Connected Lives of Ants, Brains, Cities, and Software Steven Johnson

Tubes: A Journey to the Center of the Internet Andrew Blum

World Wide Mind: The Coming Integration of Humanity, Machines, and the Internet Michael Chorost

An Army of Davids: How Markets and Technology Empower Ordinary People to Beat Big Media, Big Government, and Other Goliaths Glenn Reynolds

The End of Business As Usual: Rewire the Way You Work to Succeed in the Consumer Revolution Brian Solis

Blog Schmog: The Truth About What Blogs Can (and Can't) Do for Your Business Robert W. Bly

The Thank You Economy Gary Vaynerchuk

Talking Back to Facebook: The Common Sense Guide to Raising Kids in the Digital Age James P. Steyer

Public Parts: How Sharing in the Digital Age Improves the Way We Work and Live Jeff Jarvis

The Nature of the Future: Dispatches from the Socialstructed World Marina Gorbis

Socialnomics: How Social Media Transforms the Way We Live and Do Business Erik Qualman

The Inmates Are Running the Asylum (Review and Analysis of Cooper's Book) BusinessNews Publishing

Uncanny Valley: A Memoir Anna Wiener

Algorithms to Live By: The Computer Science of Human Decisions Brian Christian

The Death of Expertise: The Campaign Against Established Knowledge and Why it Matters Tom Nichols

Alone Together: Why We Expect More from Technology and Less from Each Other Sherry Turkle

Blockchain Revolution: How the Technology Behind Bitcoin Is Changing Money, Business, and the World Don Tapscott

The Emperor's New Mind: Concerning Computers, Minds, and the Laws of Physics Roger Penrose

New Dark Age: Technology and the End of the Future James Bridle

Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Seth Stephens-Davidowitz

Ten Arguments for Deleting Your Social Media Accounts Right Now Jaron Lanier

The History of the Future: Oculus, Facebook, and the Revolution That Swept Virtual Reality Blake J. Harris

The New New Thing: A Silicon Valley Story Michael Lewis

Cognitive Surplus: Creativity and Generosity in a Connected Age Clay Shirky

The Dark Net: Inside the Digital Underworld Jamie Bartlett

Who Owns the Future? Jaron Lanier

The Social Life of Information: Updated, with a New Preface-Revised John Seely Brown

An Introduction to Information Theory: Symbols, Signals and Noise John R. Pierce

Targeted: The Cambridge Analytica Whistleblower's Inside Story of How Big Data, Trump, and Facebook Broke Democracy and How It Can Happen Again Findaway

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
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?

Editor's Notes

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

use the referer to see the source of every request -- who is responsible for loading this resource?