#MeasureCampLDN

Reducing the Speed Impact of Third-Party Tags
Andy Davies ∙ Sep 2019https://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 timehttps://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 fromhttps://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 wayWorking?

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

Exe
sc cu
rip tetow
sc nl
rip oat dD

co M
nn akec etion

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 avisitor has to wait 1.7s
before seeing contentExesc cu
rip tetow
sc nl
rip oat dDco M
nn akec etion

1.3sSelf-hosting the script may trim off some timehttps://man.gl/casper-self-host-optimizelySelf-hosting the script may trim off some timehttps://man.gl/casper-self-host-optimizely

Optimizely support serving their tags though your own CDN

Instructions for:AkamaiAWS Cloudfront
Cloudflare
Fastlyhttps://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">

BeforeAfter

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 inrevenue fromAndroid visitors

Median Page Load Time (s)1412AndroidiOS1086420eeW

eeW

eeWeeW

eeWeeWkkkkkk

0

12355

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