Here’s a neat trick to speed up your initial page loading time when you are using Drift.
If you use Lighthouse or GTMetrix to measure your site’s speed, you’ll notice around 20 assets (mostly JavaScript files) being loaded by Drift. We can mitigate this by adding a scroll trigger and a one-second delay to the code snippet.
The original Drift code snippet is:
<!-- Start of Async Drift Code -->
<script>
"use strict";
!function() {
var t = window.driftt = window.drift = window.driftt || [];
if (!t.init) {
if (t.invoked) return void(window.console && console.error && console.error("Drift snippet included twice."));
t.invoked = !0, t.methods = ["identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
t.factory = function(e) {
return function() {
var n = Array.prototype.slice.call(arguments);
return n.unshift(e), t.push(n), t;
};
}, t.methods.forEach(function(e) {
t[e] = t.factory(e);
}), t.load = function(t) {
var e = 3e5,
n = Math.ceil(new Date() / e) * e,
o = document.createElement("script");
o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
var i = document.getElementsByTagName("script")[0];
i.parentNode.insertBefore(o, i);
};
}
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('abcdefghijkl');
</script>
<!-- End of Async Drift Code -->The snippet is loading on page load, without any delay or trigger.
You might not need the Drift chat widget to load immediately, so you can initialize it after the first scroll event. Also, add a small delay of one second to mitigate any automatic scrolling.
<!-- Start of Async Drift Code -->
<script>
"use strict";
window.addEventListener('scroll', () => {
setTimeout(() => {
!function() {
var t = window.driftt = window.drift = window.driftt || [];
if (!t.init) {
if (t.invoked) return void(window.console && console.error && console.error("Drift snippet included twice."));
t.invoked = !0, t.methods = ["identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
t.factory = function(e) {
return function() {
var n = Array.prototype.slice.call(arguments);
return n.unshift(e), t.push(n), t;
};
}, t.methods.forEach(function(e) {
t[e] = t.factory(e);
}), t.load = function(t) {
var e = 3e5,
n = Math.ceil(new Date() / e) * e,
o = document.createElement("script");
o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
var i = document.getElementsByTagName("script")[0];
i.parentNode.insertBefore(o, i);
};
}
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('abcdefghijkl');
}, 1000);
}, {
once: true
});
</script>
<!-- End of Async Drift Code -->Check your site in Lighthouse or GTMetrix again to see all Drift assets gone and your page loading 3–4 seconds faster. Also check Google PageSpeed Insights to notice at least 10 points up!
Note how I enclosed the original code in a scroll listener and added a one-second delay:
window.addEventListener('scroll', () => {
setTimeout(() => {
// Drift code here
}, 1000);
}, {
once: true
});As a bonus optimization, minify your code and shave off more milliseconds. My final code looks like this:
<script>window.addEventListener("scroll",function(){setTimeout(function(){!function(){var b=window.a=window.h=window.a||[];if(!b.i){if(b.c)return void(window.console&&console.error&&console.error("Drift snippet included twice."));b.c=!0;b.methods="identify config track reset debug show ping page hide off on".split(" ");b.b=function(c){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(c),b.push(e),b}};b.methods.forEach(function(c){b[c]=b.b(c)});b.load=function(c){var e=3E5*Math.ceil(new Date/
3E5),d=document.createElement("script");d.type="text/javascript";d.async=!0;d.g="anonymous";d.src="https://js.driftt.com/include/"+e+"/"+c+".js";c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(d,c)}}}();drift.f="0.3.1";drift.load("abcdefghijkl")},1E3)},{once:!0});</script>Original size: 647 bytes gzipped (1.46 KB uncompressed).
Compiled size: 503 bytes gzipped (805 bytes uncompressed).
Enjoy!
