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)
