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

πŸ™‚ Like
πŸ™‚Like πŸ₯°Love 🧐Watching this 🀨Suspicious πŸ˜’Meh 😑Angry

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!

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Added by Ciprian on Thursday, October 8, 2020 in Blog, JavaScript, SpeedFactor

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started

Related Articles

%d bloggers like this:
Privacy Policy