Drift Chat: Speed Up Your Page Loading Speed by 3-4 Seconds

Here’s a neat trick to speed up your initial page loading time when you are using Drift.

If you use SpeedFactor 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 SpeedFactor 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.46KB uncompressed).
Compiled size: 503 bytes gzipped (805 bytes uncompressed).

Enjoy!