Third-Party Scriptsand You

Patrick Meenanpmeenan@webpagetest.org

@patmeenan

The Performance Golden Rule

www.flickr.com/photos/oreillyconf/6326167731/

80-90% of the end-user

response time is spent on the

frontend*

* http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

Torbit Insight Real-User Data

http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/

…1,000 sites representing 6.7

billion pageviews…

…average 7% of load time is spent on the

backend compared to a whopping 93% on

the frontend.

Base Page

4

Time to First Byte

Actual back-end Time!

http://www.flickr.com/photos/elsie/4742380987/

We can fix that!

Social Widgets back-end API

Call directly from your back-end

Returns HTML to be injected directly into your page

- echo file_get_contents(“http://social.patrickmeenan.com/gplus/?cookies=...”);

Implementation details:

- Synchronous and blocking

- Do not cache the results

- If you need to set a timeout, make sure it is at least 20 seconds, 45 preferred

- Include all cookies sent from the client

- May return javascript and set cookies

This Google guy is a complete nutter #velocityconf

Wow, to think I used to respect @patmeenan #velocityconf

But, that’s EXACTLY what this does…

<script src=‘……’></script>

The Victim

http://youtu.be/HSbHNIvhOFU

When the widget is unavailable…

http://youtu.be/3-zaos02CxI

Because of

<script src=‘https://apis.google.com/js/plusone.js’></script>

This:

<script> (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); })();</script>

Instead of:

http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

<script src=‘https://apis.google.com/js/plusone.js’ async defer></script>

Or Even:

• 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 onLoad

And Monitoring Says…

Loaded Asynchronously

http://youtu.be/krin-F65Fd8

Loaded Asynchronously

http://youtu.be/krin-F65Fd8

There’s More!

<script src=‘http://code.jquery.com/jquery-1.7.1.min.js’></script><script src=‘http://scripts.verticalacuity.com/vat/mon/vt.js’></script><script src=‘http://ak.sail-horizon.com/scout/v1.js’></script><script src=‘//cdn.optimizely.com/js/xxxxx.js’></script><script src=‘https://platform.twitter.com/anywhere.js’></script><script src=‘http://www.reddit.com/static/button/button1.js’></script><script src=‘http://widgets.digg.com/buttons.js’></script><script src=‘//assets.pinterest.com/js/pinit.js’></script><script src=‘//platform.linkedin.com/in.js’></script>

On that one page, all before the main content:

Watch out for Fonts!

<link rel=“stylesheet” type=“text/css” href=‘http://fonts.googleapis.com/css?family=…’>

And Tag Management

http://memegenerator.net/instance/27291297

HTTP Archive

http://httparchive.org/trends.php

But I’d Notice…

Globally?

- Social sites tend to be targets for blocking

- platform.twitter.com

- connect.facebook.net

- apis.google.com

- HTTPS as well

In an Enterprise?

- Corporate policies

Site 2

Site 1

Load Balancers

High Availability Server Architectures

DNS

App Servers

Read-Only Database

Database Master

All for…

Base Page(Back-end)

There are a LOT of requests!

http://httparchive.org/trends.php

To the Front End!http://memegenerator.net/instance/27291692

Async SnippetGood for code with no dependencies (widgets)

<script> (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); })();</script>

Simple Async Snippet

<script src=‘https://apis.google.com/js/plusone.js’ async defer></script>

Easy to implement and describe

Slightly slower on IE than insertBefore()

• Easy to implement and describe

• Delays script loading and execution later than Async at the top

Put Scripts at the Bottom

… <script src=‘//assets.pinterest.com/js/pinit.js’></script></body>

• Look strange

• Safe across all browsers (for Javascript)

Protocol-relative URLs

//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

Instead of:

https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

• Modernizr

• LABjs

• RequireJS

• ControlJS

Help for dependency chaining

Async Loaders

Modernizr.load([{ load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js', }, { load: 'needs-jQuery.js'}]);

Modernizr.load([ { load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js', complete: function () { if ( !window.jQuery ) { Modernizr.load('js/libs/jquery-1.7.1.min.js'); } } }, { load: 'needs-jQuery.js'} ]);

WebFont Loader https://developers.google.com/webfonts/docs/webfont_loader

Graceful fallback on failure

Potential for unstyled content while loading

Well, Almost…

http://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnINCxIEVGVzdBjrq90MDA

Desktop Browser OnLoad Blocked

Chrome Yes

Firefox Yes

Internet Explorer 9- No

Internet Explorer 10 Yes

Safari 5+ Yes

Opera Yes

Mobile Browser OnLoad Blocked

Android 2.x No

Android 4.x+ Yes

Chrome Mobile Yes

iOS 4 No

iOS 5+ Yes

IE Mobile 9 No

How are we doing?http://www.flickr.com/photos/phobia/2308371224/

Widgets

Async Blocking

Google Analytics Google +1 Badge

Google +1 Button Twitter Anywhere

Twitter Tweet Button Facebook Channel File Example

Facebook Like Button Pinterest (end of body)

Digg Reditt

AddThis

ShareThis

• Closure Library: Blocking in the head• Dojo: Blocking in the head• Google jsapi: Blocking (default, Async available)• Jquery: Blocking in the head• Moo Tools: Blocking in the head• YUI: Blocking

Code Libraries (examples)

• Doubleclick: Fully Async available (October 2011)

• Adsense: Blocking script, ad itself is async

• Others: Ask – iFrame solutions are async

Ad Providers

Fonts

• Fontdeck: Blocking in the head

• Fonts.com: Blocking in the head

• Google: Blocking in the head

• Typekit: Blocking in the head

• Webtype: Blocking in the head

• Loader works across all providers

Bonus Points

<script src=‘http://html5shim.googlecode.com/svn/trunk/html5.js’>

Minimal/No CachingNo gzipNo CDNAnd wow, the trust!

http://memegenerator.net/instance/27291866

• Fails FAST! (connections rejected)

• Not good for real failure scenarios

Routing to localhost

You Need a Black Hole

blackhole.webpagetest.org – 72.66.115.13

Courtesy NASA/JPL-Caltech.

hosts 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 ...

On WebPagetest.org

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

http://www.webpagetest.org/

SPOF-O-Matic

https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg

https://github.com/pmeenan/spof-o-matic

http://memegenerator.net/instance/27293101