One of the primary metrics of Google PageSpeed Insights is Time to Interactive, or TTI, which is defined as the point when:

• The page has displayed useful content, which is measured with First Contentful Paint.
• Event handlers are registered for most visible page elements.
• The page responds to user interactions within 50 milliseconds.

Once all these things are true, Google considers your site to be fully loaded.

The Drift Chat widget is a powerful tool but, like everything you add to your website, it comes at a performance cost.  By default, the widget will initialize on your page’s onload event, which occurs after your site’s content has finished loading.

We designed the widget this way so that users are able to interact with the widget as soon as they hit your site. Unfortunately, the widget has no way of knowing what other scripts might be running on your site at that time.

Using our API to Change What Page Event to Listen to

Every site loads differently, and you may have slightly different requirements for when you want the widget to load. By default, Drift will wait until the readystate of the page is complete, but that may not be the best strategy for you! You can use our new initialization options to customize when the widget loads on your page.

Add this snippet before the drift.load() line of the snippet with one of these options:

window.drift_init_options = { loadType: DEFAULT | EAGER | ON_INTERACTIVE }

• DEFAULT - The widget will load once the readyState is complete

• EAGER - The widget will wait to load for the first of either complete or interactive readyState events.

• ON_INTERACTIVE - The widget will load when the page becomes 'consistently interactive’. Uses the “Time To Interactive” or TTI to calculate event.
  
   

Example Code

<!-- 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';

window.drift_init_options = {loadType: 'EAGER'}

drift.load('xxxxxxxx');
</script>
<!-- End of Async Drift Code -->

 

Dynamically Change Based On Your Custom Requirements

If you have additional javascript running apart from the widget, the widget will start loading alongside the rest of your sites code resulting in a longer load time from Google’s perspective.  One way to avoid this is to be a bit clever about when you load the widget based on what other scripts you have running on your site.

Let's make some quick changes to the drift embed code to give us some more control.  We’re going to wrap the embed code in a function that we can run at any time.

Note: You'll want to enter code after the <!-- end of drift async code --> line.) You can find the full snippet at the bottom to copy.

 

 

Now we have a function, LoadDriftWidget(), that can be called at any time.  For example:

Clicking a button

<button onclick="LoadDriftWidget()"> Chat now </button>

On scroll

function loadDriftWidgetOnScroll() { 
     LoadDriftWidget()
     ; window.removeEventListener('scroll', loadDriftWidgetOnScroll)
; } window.addEventListener('scroll', loadDriftWidgetOnScroll); 

On some event triggered by your code

window.addEventListener("myEvent", function(){  
    LoadDriftWidget()
});

After some amount of time 
 

//load after waiting 5000 milliseconds, 5 seconds
setTimeout(function(){ 
     LoadDriftWidget() 
}, 5000)

You will need to look at your site's javascript and decide what makes sense for you. Depending on your use case, you may need to make some additional adjustments in order to boost your site's performance.
 

Below is the full adjusted installation snippet. Remember to substitute your own embedId within drift.load, which can be found on your widget installation page.

<!-- Start of Async Drift Code -->
<script>
"use strict";

function LoadDriftWidget() {
  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('xxxxxxx');
};
</script>
<!-- End of Async Drift Code -->

<!-- your custom code, example shown -->
window.addEventListener("myEvent", function(){  
    LoadDriftWidget()
});