#MeasureCampLDN Reducing the Speed Impact of Third-Party Tags Andy Davies ∙ Sep 2019 https://www.flickr.com/photos/digitizedchaos/3964206549

There’s an ever increasing galaxy of 3rd-party tags https://man.gl/chiefmartec-supergraphic-2019

Tags compete for network bandwidth and processing time https://www.flickr.com/photos/39908901@N06/7834345230

And slow down our visitors experience

And slow down our visitors experience

How do we balance the value versus the impact? https://www.flickr.com/photos/gilgamesh/183037111

Know what’s on your page and where it’s coming from https://requestmap.herokuapp.com

Audit 3rd-Party Tags – Key Questions Are you still paying for the service? Does anyone use it? Are there any duplicates? When should it be loaded? What’s its impact on the visitors’ experience?

Page load is a journey… with milestones along the way Working? Useful? Usable?

Visitor’s who have better experiences are more engaged

Where do our tags fit into that journey?

Tags in <head> of page have an outsized impact Common Tags Tag Managers AB / MV Testing Personalization Analytics

The most dangerous line of JavaScript? . . <script src=”https://cdn.example.com/third-party-tag.js”> . . </head> HTML parsing stops until script has downloaded and executed, the larger the script the longer this takes If 3rd-party host is unresponsive browser waits until the connection times out

Ex e sc cu rip te t ow sc nl rip oa t d D co M nn ak ec e tio n In the case of our FitFlop example… 1.3s

In the case of our FitFlop example… In case you’re wondering, this is Qubit’s script And it’s the reason why a visitor has to wait 1.7s before seeing content Ex e sc cu rip te t ow sc nl rip oa t d D co M nn ak ec e tio n 1.3s

Self-hosting the script may trim off some time https://man.gl/casper-self-host-optimizely

Self-hosting the script may trim off some time https://man.gl/casper-self-host-optimizely

Optimizely support serving their tags though your own CDN Instructions for: Akamai AWS Cloudfront Cloudflare Fastly https://man.gl/self-host-optimizely-snippet

Shrinking the size of tag reduces download and runtime cost Self-hosting removes network connection time but doesn’t improve download or script execution time But we still have some control over these things: Experiments - variants, audiences, URLs etc. Tag Managers - number of tags

Schuh use two tag containers

Optimizely supports moving snippet processing to the edge https://man.gl/optimizely-experimenting-at-the-edge

Options for moving tags to the edge or server-side https://www.flickr.com/photos/kewl/8475764430

Prefer non-blocking tags

<script src=”https://cdn.example.com/third-party-tag.js” async> Browser is no longer blocked on script download, but will be blocked when script executes Scripts injected via a script e.g. a Tag Manager, are generally async by default (Some Tag Managers use document.write - avoid these!!!)

You’ll also see async scripts written like this <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ ‘gtm.start’: new Date().getTime(), event: ‘gtm.js’ }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != ‘dataLayer’ ? ‘&l=’ + l : ”; j.async = true; j.src = ‘https://www.googletagmanager.com/gtm.js?id=’ + i + dl; f.parentNode.insertBefore(j, f); })(window, document, ‘script’, ‘dataLayer’, ‘GTM-XXXX’); </script>

Preconnect hint can remove connection time from critical path <link rel=”preconnect” href=”https://www.googletagmanager.com”> Before After https://man.gl/wpt-preconnect-hints

Watch out for anti-flicker snippets <script> //prehiding snippet for Adobe Target with asynchronous Launch deployment (function(g, b, d, f) { (function(a, c, d) { if(a) { var e = b.createElement(“style”); e.id = c; e.innerHTML = d;a.appendChild(e) } })(b.getElementsByTagName(“head”)[0], “at-body-style”, d); setTimeout(function() { var a=b.getElementsByTagName(“head”)[0]; if(a) { Hides page contents var c = b.getElementById(“at-body-style”); c && a.removeChild(c) for up to 3 seconds } }, f) })(window, document, “body {opacity: 0 !important}”, 3E3); </script>

Tags directly in page vs in a Tag Manager Directly in page == run as soon as available, may delay important content or interfere with visitor interaction Tag Managers == control over when script executes Rule of Thumb: analytics in page, everything else Tag Manager

Your Tag Manager is your friend, just don’t accept the defaults

If a tag needs visitor interaction delay it’s load Chat widgets, feedback widgets, session replay etc. only make sense once the page is usable. So delay load until the page has loaded Window.loaded in GTM terms

Encourage providers to break up tags Only the floating action button needs to be loaded quickly The script that displays the actual chat box can be lazy loaded or perhaps even wait until visitor interaction

Talked about the start and the end… what about the middle? This is a fuzzy area… Does the tag provide user content? How much data loss are you willing allow? Try not to block the browser

Do you even need a tag… could you just fire a tracking pixel? https://man.gl/barry-bollard-gtm

Removing poorly performing Third-Parties pays dividends 26% increase in revenue from Android visitors Median Page Load Time (s) 14 12 Android iOS 10 8 6 4 2 0 ee W ee W ee W ee W ee W ee W k k k k k k 5 5 3 2 1 0

Other sites have shared their experience https://man.gl/telegraph-3rd-party-performance

In Summary 3rd Party Tags can make or break your visitor experience Audit tags - remove the ones that aren’t needed Don’t accept the defaults - choreograph tag loading Test speed impact before deploying to live

Buy This Phone Alcatel 1x 3rd most popular PAYG phone on Vodafone UK £35 from Tesco Mobile

@AndyDavies hello@andydavies.me https://noti.st/andydavies http://www.flickr.com/photos/auntiep/5024494612