#MeasureCampLDN Reducing the Speed Impact of Third-Party Tags Andy Davies ∙ Sep 2019 https://www.flickr.com/photos/digitizedchaos/3964206549
A presentation at MeasureCamp London in September 2019 in London, UK by Andy Davies
#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
