THIRD PARTY PERFORMANCE

Guy Podjarny (@guypod)
CTO, Web Experience, Akamai

Faster ForwardTM

©2013 Akamai
What’s a third party?

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

Reu...
Where are the third parties?

- A tag on the page
- Analytics/trackers - invisible
- Image Tags & Scripts
- Non-critical p...
# Domains Per Page

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

...
Ghostery Data - Media

Faster ForwardTM

©2013 Akamai
Ghostery Data - Retail

Faster ForwardTM

©2013 Akamai
3rd Party Extravaganza!

Faster ForwardTM

©2013 Akamai
Airbnb Home Page

Faster ForwardTM

©2013 Akamai
Airbnb Location Page

Faster ForwardTM

©2013 Akamai
Why Should you Care? (from a performance perspective)

- Single Point of Failure – SPOF
- Scripts block rendering of every...
SPOF
Home Page, Optimizely & Truste Down

Business Week, Truste Down

Faster ForwardTM

22 Secs

45 Secs

22 Secs

©2013 A...
SPOF – Not Only Your Homepage

Category Page, BazaarVoice down

Faster ForwardTM

23 Secs

©2013 Akamai
Airbnb.ca homepage: SPOF delays late actions

Faster ForwardTM

©2013 Akamai
New York Page

Faster ForwardTM

©2013 Akamai
New York Page SPOF

Faster ForwardTM

©2013 Akamai
The 1st Party Arsenal

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

- Defer Execution
- Defer Downlo...
Analytics & Beacons

- Goal: Async without delaying onload
- Shouldn’t delay visible content
- Defer not great since it’s ...
Beacons that don’t delay onload

Faster ForwardTM

©2013 Akamai
Beacons that don’t delay onload

Faster ForwardTM

©2013 Akamai
Q: Do Script-Inserted Beacon Images Delay Onload?
http://stevesouders.com/cuzillion/?c0=bi1dfff2_0_f

Faster ForwardTM

©2...
Yes – Beacons delay onload (on most browsers)
http://www.browserstack.com/screenshots/3c4be740eee4ad95af43ef0fc6a800d7a7aa...
Works for Images Too!

Faster ForwardTM

©2013 Akamai
Analytics & Beacons

- Goal: Async without delaying onload
- Shouldn’t delay visible content
- Defer not great since it’s ...
External Script

Cringe…

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
avoi...
FYI: Omniture Workarounds

Faster ForwardTM

©2013 Akamai
Beacon API – Draft W3C Spec

Faster ForwardTM

©2013 Akamai
Non-Critical Page Components

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

Fast...
Defer Download Example

Faster ForwardTM

©2013 Akamai
Defer Download Example

Faster ForwardTM

©2013 Akamai
Non-Critical Page Components

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

- Ca...
Nullify document.write()

- Built into browsers (at least IE 9+, Safari, Chrome & Firefox)
- Firefox even gives a nice con...
Resource Priorities

Faster ForwardTM

©2013 Akamai
Critical Page Components

- Methodology: Async with blocking onload
- Keep 3rd parties from blocking 1st party content
- D...
Async with blocking onload

Faster ForwardTM

©2013 Akamai
Critical Page Components

- Methodology: Async with blocking onload
- Keep 3rd parties from blocking 1st party content
- D...
Async scripts with Execution Order

Faster ForwardTM

©2013 Akamai
Interim Summary

- Analytics/Beacons – Async without delaying onload
- Non-Critical Widgets – Defer Download (and Executio...
Resource Timing Opt-In

Ask Require All your 3rd Party Vendors to add this header!
-

Unless they give you a REALLY good p...
3rd Party Checklist – Work in Progress…

@bentlegen

@igrigorik

@bbinto

@guypod
Faster ForwardTM

@triblondon

Kyle Kinn...
Summary

- 3rd Party tags are a part of our reality…
- Pick your strategies:
- Analytics/Beacons – Async without delaying ...
Questions?
THIRD PARTY PERFORMANCE

Guy Podjarny (@guypod)
CTO, Web Experience, Akamai

Faster ForwardTM

©2013 Akamai
Upcoming SlideShare
Loading in...5
×

Third party-performance (Airbnb Nerds, Nov 2013)

1,998

Published on

Almost every site on the internet today serves 3rd-party assets and code - jQuery, analytics, trackers, share buttons, ads - from both their own servers and others - cloud providers, dedicated hardware, CDNs, google hosting. These third parties can have a significant effect on performance, delaying the load event, deferring actions, and being a single point of failure beyond your control. This deck discusses techniques and strategies for working with 3rd parties within these limitations, and shares some relevant community work.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,998
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • http://www.webpagetest.org/video/compare.php?tests=131014_TS_61a4bc3ecbd8a4d1b84e6d3cbf397a3b%2C131014_YR_d9dc75ab1c43d635a8b5d072d92c5830&thumbSize=200&ival=1000&end=visual
  • http://www.webpagetest.org/video/compare.php?tests=131014_DB_563f7c9daf8cbac69641778c7e433764%2C131014_6N_d2f5c727727583b8c4404c8777e60a2a&thumbSize=200&ival=1000&end=visual&font=9
  • http://www.webpagetest.org/video/compare.php?tests=131031_WP_2be372a6f51d099542f5d32317f124eb%2C131031_RT_2cc38c9687c1c0e87bab8dcb36364117&thumbSize=200&ival=1000&end=visual
  • http://www.webpagetest.org/video/compare.php?tests=131101_AR_55144c3188a1273c298b66fb36f134ff-l:MixPanel+Down%2C131031_T0_edd6da0f89972c3fa9321efc60ca58ec-l:Google+Maps+Down%2C131031_06_841a45f9090a02e44ce8510f23703b8a&thumbSize=200&ival=500&end=visual
  • http://www.webpagetest.org/video/compare.php?tests=131101_AR_55144c3188a1273c298b66fb36f134ff-l:MixPanel+Down%2C131031_T0_edd6da0f89972c3fa9321efc60ca58ec-l:Google+Maps+Down%2C131031_06_841a45f9090a02e44ce8510f23703b8a&thumbSize=200&ival=500&end=visual
  • <script>(function(url,tag){variframe = document.createElement('iframe'); (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";var where = document.getElementsByTagName('script'); where = where[where.length - 1];where.parentNode.insertBefore(iframe, where);var doc = iframe.contentWindow.document;doc.open().write('<body onload="'+ 'varjs = document.createElement(\''+tag+'\');'+ 'js.src = \''+ url +'\';'+ 'document.body.appendChild(js);">');doc.close();})('http://3party.com/widget.js','img');</script>
  • <script>(function(url,tag){variframe = document.createElement('iframe'); (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";var where = document.getElementsByTagName('script'); where = where[where.length - 1];where.parentNode.insertBefore(iframe, where);var doc = iframe.contentWindow.document;doc.open().write('<body onload="'+ 'varjs = document.createElement(\''+tag+'\');'+ 'js.src = \''+ url +'\';'+ 'document.body.appendChild(js);">');doc.close();})('http://3party.com/widget.js','img');</script>
  • Third party-performance (Airbnb Nerds, Nov 2013)

    1. 1. THIRD PARTY PERFORMANCE Guy Podjarny (@guypod) CTO, Web Experience, Akamai Faster ForwardTM ©2013 Akamai
    2. 2. 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) Faster ForwardTM ©2013 Akamai
    3. 3. 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) Faster ForwardTM ©2013 Akamai
    4. 4. # Domains Per Page Sep 2013 Percentiles: - 25th : 4 domains - 50th : 10 domains - 75th : 21 domains - 90th : 36 domains Faster ForwardTM ©2013 Akamai
    5. 5. Ghostery Data - Media Faster ForwardTM ©2013 Akamai
    6. 6. Ghostery Data - Retail Faster ForwardTM ©2013 Akamai
    7. 7. 3rd Party Extravaganza! Faster ForwardTM ©2013 Akamai
    8. 8. Airbnb Home Page Faster ForwardTM ©2013 Akamai
    9. 9. Airbnb Location Page Faster ForwardTM ©2013 Akamai
    10. 10. 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) Faster ForwardTM ©2013 Akamai
    11. 11. SPOF Home Page, Optimizely & Truste Down Business Week, Truste Down Faster ForwardTM 22 Secs 45 Secs 22 Secs ©2013 Akamai
    12. 12. SPOF – Not Only Your Homepage Category Page, BazaarVoice down Faster ForwardTM 23 Secs ©2013 Akamai
    13. 13. Airbnb.ca homepage: SPOF delays late actions Faster ForwardTM ©2013 Akamai
    14. 14. New York Page Faster ForwardTM ©2013 Akamai
    15. 15. New York Page SPOF Faster ForwardTM ©2013 Akamai
    16. 16. The 1st Party Arsenal - Async - Delay onload (async att) vs don’t delay onload (IFrame) - Defer Execution - Defer Download - Remove Tag Faster ForwardTM ©2013 Akamai
    17. 17. Analytics & Beacons - Goal: Async without delaying onload - Shouldn’t delay visible content - Defer not great since it’s likely to miss users Faster ForwardTM ©2013 Akamai
    18. 18. Beacons that don’t delay onload Faster ForwardTM ©2013 Akamai
    19. 19. Beacons that don’t delay onload Faster ForwardTM ©2013 Akamai
    20. 20. Q: Do Script-Inserted Beacon Images Delay Onload? http://stevesouders.com/cuzillion/?c0=bi1dfff2_0_f Faster ForwardTM ©2013 Akamai
    21. 21. Yes – Beacons delay onload (on most browsers) http://www.browserstack.com/screenshots/3c4be740eee4ad95af43ef0fc6a800d7a7aa7758 Beacons didn’t block onload on: - IE 7 - IE 8 Faster ForwardTM ©2013 Akamai
    22. 22. Works for Images Too! Faster ForwardTM ©2013 Akamai
    23. 23. 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 Faster ForwardTM ©2013 Akamai
    24. 24. External Script Cringe… Dependent Inline Script Further Dependent External Script Further down dependent inline script Faster ForwardTM ©2013 Akamai
    25. 25. 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) Faster ForwardTM ©2013 Akamai
    26. 26. FYI: Omniture Workarounds Faster ForwardTM ©2013 Akamai
    27. 27. Beacon API – Draft W3C Spec Faster ForwardTM ©2013 Akamai
    28. 28. Non-Critical Page Components - Goal: Defer Download - If they’re not critical, they shouldn’t content with the rest Faster ForwardTM ©2013 Akamai
    29. 29. Defer Download Example Faster ForwardTM ©2013 Akamai
    30. 30. Defer Download Example Faster ForwardTM ©2013 Akamai
    31. 31. 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 Faster ForwardTM ©2013 Akamai
    32. 32. Nullify document.write() - Built into browsers (at least IE 9+, Safari, Chrome & Firefox) - Firefox even gives a nice console error… Faster ForwardTM ©2013 Akamai
    33. 33. Resource Priorities Faster ForwardTM ©2013 Akamai
    34. 34. 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 Faster ForwardTM ©2013 Akamai
    35. 35. Async with blocking onload Faster ForwardTM ©2013 Akamai
    36. 36. 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 Faster ForwardTM ©2013 Akamai
    37. 37. Async scripts with Execution Order Faster ForwardTM ©2013 Akamai
    38. 38. Interim Summary - Analytics/Beacons – Async without delaying onload - Non-Critical Widgets – Defer Download (and Execution) - Critical Widgets – Async with delaying onload Faster ForwardTM ©2013 Akamai
    39. 39. 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. Faster ForwardTM ©2013 Akamai
    40. 40. 3rd Party Checklist – Work in Progress… @bentlegen @igrigorik @bbinto @guypod Faster ForwardTM @triblondon Kyle Kinnaman ©2013 Akamai
    41. 41. 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 Faster ForwardTM ©2013 Akamai
    42. 42. Questions? THIRD PARTY PERFORMANCE Guy Podjarny (@guypod) CTO, Web Experience, Akamai Faster ForwardTM ©2013 Akamai
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×