Protecting your User Experience while integrating 3rd-party code

Protecting your User Experience while integrating 3rd-party code
Patrick Meenan – Slides

The social widget
– when widget is unavailable the page load is significantly impacted
– prefer an async script tag

Global implications
– social sites can be blocked internationally 100% of the time
– HTTPS as well
– Corporate policies

To the Front End!
– put same protections in the front end as you do in the backend
– Async snippet (works when there are no dependencies)
– Put scripts at the bottom at the end of the bottom of the page
– protocol-relative URLs: looks strange, but it works across browsers
– Async loaders: Modernizr, LABjs, RequireJS, ControlJS (complex dependency chains)
– Don’t assume your OnLoad will run

How are we doing?
– Async: Google Analytics, Google +1, Twitter tweet, facebook like, Digg
– Blocking: +1 badge, twitter anywhere, facebook channel, pinterest (end of body), reddit, addthis, sharethis
– Code libraries(block in the head): Jquery, YUI, Dojo, Moo tools, Google jsapi(async is avail)
– Ad providers: doubleclick async available, adsense script blocks, but ad is async, Others: ask – iFrame solutions are async

Demo Frontend SPOF
– routing localhost: fails too fast
– you need a black hole –

– in the chrome webstore
– if it detects SPOF it will warn
– turn on resource blocking mode to move it to the blackhole

Pages in the Wild
– News and blogs have several share buttons that block
– Political sites addthis
РE-commerce  bazaarvoice, pinterest

– Widget Owners
1. never, EVER, provide blocking snippets

– Site owners
1. Never load 3rd party resources synchronously
2. Don’t rely on onload for important functionality
3. Make sure monitoring has aggressive timelimits
4. Track page failures by region (real-time monitoring)

User tracking tags need to be async and can be at the top of the page


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s