Protecting your User Experience while integrating 3rd-party code

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

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
Enterprise
– 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 – blackhole.webpagetest.org
– webpagetest.org

SPOF-O-Matic
– 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

Homework
– 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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s