How to improve Zopim (Zendesk) or Smartsupp chat load time or any other external JavaScript

Did you like this post? Share it!
Share on whatsapp
Share on linkedin
Share on twitter
Share on email

For our client, Forliving.cz, we needed to solve one speed issue with Zendesk Chat (Zopim). Despite asynchronous loading, according to Google Page Speed Insight, the “Blocking time” was nearly 700 ms.

We changed the logic behind loading this script. The script loading starts when a user performs the first action. As an action we consider: scroll, mouse click, mouse move, touch on screen or keydown.

The script itself is a function that is launched based on the user action.

To avoid multiple script launches, we deregistered the script after it performs.

<script>
            document.addEventListener('scroll', zopimlaunch);
            document.addEventListener('mousedown', zopimlaunch);
            document.addEventListener('mousemove', zopimlaunch);
            document.addEventListener('touchstart', zopimlaunch);
            document.addEventListener('keydown', zopimlaunch);

            function zopimlaunch () {
                window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set._.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8');
                $.src='//v2.zopim.com/?yourid';z.t=+new Date;$.type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');

                document.removeEventListener('scroll', zopimlaunch);
                document.removeEventListener('mousedown', zopimlaunch);
                document.removeEventListener('mousemove', zopimlaunch);
                document.removeEventListener('touchstart', zopimlaunch);
                document.removeEventListener('keydown', zopimlaunch);
            }

</script>

This simple solution may improve any website load time where external scripts are neccessary. The example may be Zopim or any other chat, analytical, or marketing platform.

How to defer Smartsupp chat

For Smartsupp chat we need to make few changes in the script above.

<script>
            var _smartsupp = _smartsupp || {};
            _smartsupp.key = 'FILL YOUR SMARTSUPP CODE';
            _smartsupp.gaKey = 'FILL YOUR UA CODE';
            document.addEventListener('scroll', zopimlaunch);
            document.addEventListener('mousedown', zopimlaunch);
            document.addEventListener('mousemove', zopimlaunch);
            document.addEventListener('touchstart', zopimlaunch);
            document.addEventListener('keydown', zopimlaunch);

                function smartsupplaunch () {
                window.smartsupp||(function(d) {
                  var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
                  s=d.getElementsByTagName('script')[0];c=d.createElement('script');
                  c.type='text/javascript';c.charset='utf-8';c.async=true;
               c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
                })(document); 

                document.removeEventListener('scroll', zopimlaunch);
                document.removeEventListener('mousedown', zopimlaunch);
                document.removeEventListener('mousemove', zopimlaunch);
                document.removeEventListener('touchstart', zopimlaunch);
                document.removeEventListener('keydown', zopimlaunch);
            }

</script>

Image source: pixabay.com (user mohamed_hassan)

Subscribe to our newsletter
We send it 4 times a year.
Read more from our specialists