Debugging Front-end Performance

DebuggingFront-end PerformanceTim Kadlec (@tkadlec) & Pat Meenan (@patmeenan)June 20-21, 2016 at Velocity Conference (#velocityconf)

Single Point of Failure (SPOF)

Call directly from your back-endReturns HTML to be injected directly into your pageecho file_get_contents(http://social.patrickmeenan.com/gplus/?cookies=...);

Implementation details:Synchronous and blockingDo not cache the resultsIf you need to set a timeout, make sure it is at least 20 seconds, 45 preferredInclude all cookies sent from the clientMay return javascript and set cookiesSocial Widgets back-end API

http://youtu.be/HSbHNIvhOFU

When it is unavailable

http://youtu.be/3-zaos02CxI

Because of

Server MonitoringBase page responded in 0.160 seconds

Full-Browser MonitoringPage loaded in 25 seconds

Analytics Page ViewsLoaded and executed asynchronously

Real User Monitoring Performance ReportingNo data if user bailed before onLoadAnd Monitoring shows

And fonts

And TAG MANAGERS

http://memegenerator.net/instance/27291297

And A/B testing ads code libraries

Over the last 3 years

http://httparchive.org/trends.php

Globally?Social sites tend to be targets for blockingplatform.twitter.comconnect.facebook.netapis.google.comHTTPS as well

In an Enterprise?Corporate policiesBut Id notice

twitter.com/decadecity/status/635800414651314176

(function() { var po = document.createElement(script); po.src = https://apis.google.com/js/plusone.js; var s = document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(po, s); })();

GOING ASYNC

MODERN ASYNC

http://caniuse.com/#feat=script-async

http://youtu.be/krin-F65Fd8

mostlyDesktop BrowserOnLoad BlockedChromeYesFirefoxYesInternet Explorer 9-NoInternet Explorer 10YesSafari 5+YesOperaYes

Mobile BrowserOnLoad BlockedAndroid 2.xNoAndroid 4.x+YesChrome MobileYesiOS 4NoiOS 5+YesIE Mobile 9No

http://memegenerator.net/instance/27291866

Fails FAST! (connections rejected)Not good for real failure scenariosRouting to localhost

You Need a Black Holeblackhole.webpagetest.org 72.66.115.13hosts file72.66.115.13 ajax.googleapis.com 72.66.115.13 apis.google.com 72.66.115.13 www.google-analytics.com72.66.115.13 connect.facebook.net 72.66.115.13 platform.twitter.com ...Courtesy NASA/JPL-Caltech.

On WebPagetest.org

ajax.googleapis.comapis.google.comwww.google-analytics.comconnect.facebook.netplatform.twitter.com

SPOF-O-Matic

https://github.com/pmeenan/spof-o-matichttps://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg

Normal operation

Gray circle = Boring/Good

SPOF detectionNot so much

The Verge

FilmstripVideo

Nbcnews.com

Nbcnews.com

https://imgflip.com/i/15kpqn

abcnews.com

whitehouse.gov

democrats.org

gop.com

healthcare.gov

Make sure your monitoring has aggressive time limits (under 20 seconds)

Make sure your real user monitoring has an aggressive timeout

Track real user failures by regionDetection

Never load 3rd party resources synchronouslyrefuse 3rd party code that doesn't have an async option

Do not rely on onload for important functionality

Service Workers (upcoming segment)mitigation

Thank You!Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan)June 20-21, 2016 at Velocity Conference (#velocityconf)

Icons courtesy of The Noun Project