Third party-performance (Airbnb Nerds, Nov 2013)

©2013 AkamaiFaster ForwardTM

THIRD PARTY PERFORMANCE

Guy Podjarny (@guypod)

CTO, Web Experience, Akamai


What’s a third party?

- Not a 1st Party?- Infrastructure & code managed by someone else- What’s not a 3rd party:

- Reused Software (e.g. jQuery, Apache) – premium or free- Commercial Hardware (e.g. ADC, WAF)- Cloud Provider (e.g. AWS)- CDN (e.g. Akamai)


Where are the third parties?

- A tag on the page- Analytics/trackers - invisible

- Image Tags & Scripts- Non-critical page components (e.g. Share buttons, Get feedback…)- Critical Page Components (A/B Testing, Shopping Cart Personalization,

Ads(?)..)

- An inline Cloud proxy (e.g. MotionPoint, SiteSpect)


# Domains Per Page

Sep 2013 Percentiles:- 25th : 4 domains- 50th : 10 domains- 75th : 21 domains- 90th : 36 domains


Ghostery Data - Media


Ghostery Data - Retail


3rd Party Extravaganza!


Airbnb Home Page


Airbnb Location Page


Why Should you Care? (from a performance perspective)

- Single Point of Failure – SPOF- Scripts block rendering of everything below them

- Delayed load event- Users see progress indicators for longer- Other deferred actions get delayed - e.g. $.ready(myfunc)

- Delayed 1st party scripts- Resource Contention- Battery Consumption (on mobile)


SPOF

Home Page, Optimizely & Truste Down 22 Secs 45 Secs

Business Week, Truste Down 22 Secs


SPOF – Not Only Your Homepage

Category Page, BazaarVoice down 23 Secs


Airbnb.ca homepage: SPOF delays late actions


New York Page


New York Page SPOF


The 1st Party Arsenal

- Async- Delay onload (async att) vs don’t delay onload (IFrame)

- Defer Execution- Defer Download- Remove Tag


Analytics & Beacons

- Goal: Async without delaying onload- Shouldn’t delay visible content- Defer not great since it’s likely to miss users


Beacons that don’t delay onload


Beacons that don’t delay onload


Q: Do Script-Inserted Beacon Images Delay Onload?

http://stevesouders.com/cuzillion/?c0=bi1dfff2_0_f




Yes – Beacons delay onload (on most browsers)

http://www.browserstack.com/screenshots/3c4be740eee4ad95af43ef0fc6a800d7a7aa7758

Beacons didn’t block onload on:- IE 7- IE 8




Works for Images Too!


Analytics & Beacons

- Goal: Async without delaying onload- Shouldn’t delay visible content- Defer not great since it’s likely to miss users

- Technique: Dynamically generated IFrame- Only works if no page manipulation is required

- Catches and what can you do about them- Inline & external script relationships- Event registration


Cringe… External Script

Dependent Inline Script

Further Dependent External Script

Further down dependent inline script


Run “inline” script at onload

Slight Snag… But you catch my drift…

Don’t forget this one!(combine all dependents to avoid race condition bugs)


FYI: Omniture Workarounds


Beacon API – Draft W3C Spec


Non-Critical Page Components

- Goal: Defer Download- If they’re not critical, they shouldn’t content with the rest


Defer Download Example


Defer Download Example


Non-Critical Page Components

- Goal: Defer Download- If they’re not critical, they shouldn’t content with the rest

- Catches and what can you do about them- Event registration- Inline & external script relationships- document.write()- Execution order


Nullify document.write()

- Built into browsers (at least IE 9+, Safari, Chrome & Firefox)- Firefox even gives a nice console error…


Resource Priorities


Critical Page Components

- Methodology: Async with blocking onload- Keep 3rd parties from blocking 1st party content- Delay onload as page not complete until component is loaded


Async with blocking onload


Critical Page Components

- Methodology: Async with blocking onload- Keep 3rd parties from blocking 1st party content- Delay onload as page not complete until component is loaded

- Catches and what can you do about them- Event registration- Inline & external script relationships- document.write()- Execution order


Async scripts with Execution Order


Interim Summary

- Analytics/Beacons – Async without delaying onload- Non-Critical Widgets – Defer Download (and Execution)- Critical Widgets – Async with delaying onload


Resource Timing Opt-In

Ask Require All your 3rd Party Vendors to add this header!- Unless they give you a REALLY good privacy reason not to.


3rd Party Checklist – Work in Progress…

@triblondon

@bbinto

Kyle Kinnaman

@bentlegen

@igrigorik

@guypod


Summary

- 3rd Party tags are a part of our reality…- Pick your strategies:

- Analytics/Beacons – Async without delaying onload- Non-Critical Widgets – Defer Download (and Execution)- Critical Widgets – Async with delaying onload

- Track the Beacon & Resource Priorities Specs- Challenge your 3rd party vendors on their perf & availability


THIRD PARTY PERFORMANCE

Guy Podjarny (@guypod)

CTO, Web Experience, Akamai

Questions?

Date post:	06-May-2015
Category:	Technology
Upload:	guypod
View:	1,907 times
Download:	1 times

Third party-performance (Airbnb Nerds, Nov 2013)

Technology