Skip to content

Instantly share code, notes, and snippets.

@EdEichman
Last active May 19, 2022 12:54
Show Gist options
  • Save EdEichman/56ce1ee3aa8d811cc05c to your computer and use it in GitHub Desktop.
Save EdEichman/56ce1ee3aa8d811cc05c to your computer and use it in GitHub Desktop.
Defer Loading Zopim until page is loaded (to avoid long load delay), based on article http://www.feedthebot.com/pagespeed/defer-loading-javascript.html
//basic zopim widget code, from their site
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/?26Smu9lv0NXQEOOg8IAZrMPh9yQstAcV';z.t=+new Date;$.
type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');
//make sure zopim does not show till we know we have department agents
var intial_zopim_hiding_done = false;
//Make sure we only try to do settings once (we get called multiple times)
var intial_zopim_setting_done = false;
console.log("zopim_defer.js is loaded");
$zopim(function()
{
console.log("zopim function");
//only try to use the livechat object if it already exists
if (typeof($zopim.livechat) == 'object')
{
if (!intial_zopim_hiding_done)
{
//Before anything, hide everything. We want to make sure the widget only shows if someone is online,
//and NOT doing this causes the widget to appear and then disapper.
//Keeping it visible is also a viable option - I include this in case it's needed
$zopim.livechat.hideAll();
intial_zopim_hiding_done = true;
console.log("zopim initially hidden");
}
//Tell zopim to give us a call once they are fully initialized
$zopim.livechat.setOnConnected (function ()
{
if (!intial_zopim_setting_done)
{
if (typeof($zopim.livechat.departments) == 'object' &&
typeof($zopim.livechat.departments.getDepartment('myDepartment')) == 'object') {
if ($zopim.livechat.departments.getDepartment('myDepartment').status == 'online') {
$zopim.livechat.setLanguage('en');
$zopim.livechat.concierge.setName('Live Support');
$zopim.livechat.concierge.setTitle('Ask us anything');
$zopim.livechat.departments.filter('myDepartment');
$zopim.livechat.button.show();
console.log(livechat_department + ": Department Online. Lang: " + livechat_language);
//I've seen cases where Spain dept was listed offline even though Susana logged in.
//therefore, only indicate that we're done setup if dept is listed as online, otherwise
//try each time this callback is called.
intial_zopim_setting_done = true;
} else {
$zopim.livechat.hideAll();
console.log(livechat_department + ": Department Offline");
}
}
}
}
)
}
}
);
<html>
<body>
blah blah blah
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "http://www.example.com/zopim_defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else
window.onload = downloadJSAtOnload;
</script>
</body>
</html>
@jonnott
Copy link

jonnott commented Jan 12, 2016

I'm using jQuery, and I've wrapped the basic zopim embed code inside

$(window).load(function() { .. });

Which is definitely better than just an inline script tag.

What is it about your zopim_defer.js that makes it even better still? What am I missing?

Jon

@mkormendy
Copy link

@jonnott one reason is for those that want native JS support instead of using jQuery.

@Franck-Bugnet-SITOLOG
Copy link

Hi,

Thanks for sharing. I thought this article was the solution, but does not work for me, I get confused :

On my site (https://www.sitolog.com/fr/), with Zopim (and the official PrestaShop pluggin), I reach a PageSpeed Insights index of 92 (mobile) and 96 (desktop), pretty good, but I the page loading time is around 3s and I can clearly see with Uptrends in the waterfall, that 1.8s of it is due to Zopim widget loading.
Without Zopim, I can reach a wonderfull 100 index on desktop and a full page loading of 0,8s.

I do need Zopim, but cannot afford to triple the pages loading time just for it.

So I inactivated the Zopim pluggin, installed you zopim_defer.js script (with my own zopim id indeed) and your loader piece of code in the footer.tpl, just before the closure of the body part.

The Zopim widget is then loading and working fine, but instead of improving, the PageSpeed Insights index fall to 32(mobile) and 86(desktop). The page loading time is unchanged, about 3s, with still 1.8s due to Zopim.

What could I have missed ???
Could it be due to cache settings ? (I use OpCache and Cloudflare)

I'm puzzled and frustrated ...

Regards
Franck

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment