Third Party Performance (Velocity, 2014)

2. ©2014 AkamaiFaster ForwardTM What’s a third 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) - IaaS Cloud Provider (e.g. EC2) - CDN (e.g. Akamai) Not a 1st Party?

3. ©2014 AkamaiFaster ForwardTM (Web) Third Party Types Tracker Beacons Ex: ad networks image beacons Analytics Ex: Google Analytics, Comscore Non-Critical Page Components Ex: Social sharing buttons Critical Page Components Ex: Privacy prompts, p13n, ads(?) Inline Cloud Proxies Ex: Mobile Transcoders, MotionPoint, SiteSpect

16. ©2014 AkamaiFaster ForwardTM Catch: document.write() • Script-generated content fed directly into parser • Processed like static HTML • Popular with Ads • Doesn’t work with “Async” • Parser has already moved on • May WIPE your page! • When used in async script

19. ©2014 AkamaiFaster ForwardTM Example: Quantcast Image Beacon  <div style="display:none;"> <img src="//pixel.quantserve.com/pixel/p-DRvpy588ab-zz.gif" border="0" height="1" width="1" alt="Quantcast"/> </div>  Simple 1px Image Beacon: - 35 bytes – minimal bandwidth impact - Doesn’t block other resource downloads - Doesn’t block rendering

23. ©2014 AkamaiFaster ForwardTM Yes – Beacons delay onload (on most browsers) http://www.browserstack.com/screenshots/3c4be740eee4ad95af43ef0fc6a800d7a7aa7758 Beacons didn’t block onload on: - IE 7 - IE 8

28. ©2014 AkamaiFaster ForwardTM Recommendation Trackers & Analytics Strategy: Async without delaying onload - Invisible beacons shouldn’t delay visible content - Deferring beacons likely to miss users

32. ©2014 AkamaiFaster ForwardTM Catch: No Access to Parent Page <html><head> <title>Purchase Complete</title> </head><body> <script> var iframeDoc = createIFrame(); iframeDoc.open().write( '<body onload="'+ 'var js = document.createElement('script');'+ 'js.src = '//3p.com/tracker.js';'+ 'document.body.appendChild(js);">'); iframeDoc.close(); </script> </body></html> (new Image()).src = "//3p.com/beacon.gif?title=" + document.title; Tracker.js http://3p.com/beacon.gif?title=P urchase%20Complete http://3p.com/beacon.gif?title=

34. ©2014 AkamaiFaster ForwardTM Resource Priorities – Draft W3C Web Perf Spec - Marks low priority resources - A hint to the browser that this resource is less urgent - Doesn’t delay onload - Supports <link> tags - Lazyload-ed CSS do not block rendering - Works for even more tags - img, audio, video, script, link, embed, iframe, object, svg feImage, svg image, svg use, svg script, and svg tref.

39. ©2014 AkamaiFaster ForwardTM Recommendation Non Critical Page Components Strategy: Defer Download to onload - They shouldn’t delay/risk real content - Don’t wait for them before telling users the page is complete

40. ©2014 AkamaiFaster ForwardTM Defer Download Example <div id="fb-root"></div> <script> window.deferred_fb = function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/ sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }; window.addEventListener("load", function() { window.deferred_fb(document, 'script', 'facebook-jssdk')} ); </script> <div class="fb-share-button" data-href= "https://developers.facebook.com/docs/plugins/" data-type="button_count"></div> Generic

44. ©2014 AkamaiFaster ForwardTM Protip: Merge 3rd party SDKs with 1st Party Content Facebook SDK (http://connect.facebook.net/en_US/sdk.js) Cache-Control: public, max-age=1200 Google Analytics (https://www.google-analytics.com/analytics.js) Cache-Control: public, max-age=43200 Twitter SDK (http://platform.twitter.com/widgets.js) Cache-Control: public, max-age=1800 Public Cache = Not Personalized ~= Can Serve From Your Domain But you need to constantly track changes…

48. ©2014 AkamaiFaster ForwardTM 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. Resource Timing Lets you track 3rd party performance! • At least send/receive timing…

50. ©2014 AkamaiFaster ForwardTM Tag Managers • “Master” Tag loads other 3rd Parties • “Child” tags often loaded async/deferred • Intended to easily add/remove/manage tags • Track beacon data once, send via APIs • Keep in mind: • An indirection before 3rd party is loaded • Makes it easy to add too many tags • It’s a tool – the strategy & decisions are still yours

51. ©2014 AkamaiFaster ForwardTM Summary - 3rd Party tags impact performance - SPOF, Onload SPOF, Resource Contention, Battery Consumption… - Pick your strategies: - Critical Widgets – Async with delaying onload - Analytics/Trackers – Async without delaying onload - Non-Critical Widgets – Defer Download (and Execution) - Consider Removing the Tag! - Track the Beacon & Resource Priorities Specs - Challenge your 3rd party vendors on their perf & availability

52. ©2014 AkamaiFaster ForwardTM Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Visit Akamai at booth #608 Get a FREE copy of the new O’Reilly book Book signing by author Guy Podjarny: Wednesday & Thursday 3:00pm to 4:00pm

Third Party Performance (Velocity, 2014)

Esté a ler uma amostra.

Confira estes a seguir

Third Party Performance (Velocity, 2014)

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Third Party Performance (Velocity, 2014) (20)

Mais de Guy Podjarny (19)

Mais recentes (20)