Load livechatinc code after webpage is fully loaded

Question

I have a WordPress website,I am using livechatinc as a chat application. Without the chat code, the homepage is loading within 0.9 to 1.2 seconds, but after placing the chat code, it goes up to 3.2 seconds. I want to load the js chat code after the webpage is fully loaded.

I have tried using several plugins, but nothing seems working. Here is the code provided from livechatnic

<!-- Start of LiveChat (www.livechatinc.com) code -->
<script type="text/javascript">
    window.__lc = window.__lc || {};
    window.__lc.license = 3254125;
    (function() {
        var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
        lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
    } )();
</script>

<!-- End of LiveChat code -->

Cytolysin

Answer 1

from what I see there, the code is served from their servers and loaded async, so it doesn't really slow down the website, I found this: https://www.livechatinc.com/kb/is-livechat-slowing-my-website/ - check it out, they explain it rather well.

Peddada

Despite the usual: Google Speed Test - WRONG, GTMetrix - WRONG, LiveChatInc - RIGHT, I am not sure what arguments they used in this article. OK - 'async does not slow page speed load time.' Yes it's coming from THEIR servers, but browser still has to process it somehow. Theirs or not theirs it still takes some time. Only on stats they say, ok, then why GA marks our pages having issues with them. GA bots know they are async. So is there a problem? According to GA there is. So LiveChat, could you make it optional at which point to load your script, without breaking all the data gathering. – Rocha

@Rocha is indeed correct. Parsing scripts that run on the main-thread is render blocking and will delay page paint. Source: developers.google.com/web/fundamentals/performance/… – Trireme

Answer 2

I like to load livechatinc.js 3 seconds after page load.

This can be accomplished with a little JS. Add this right before the closing </body> tag. Make sure to replace <YOUR_LICENSE_NUMBER> with your actual license number.

window.__lc = window.__lc || {};
window.__lc.license = <YOUR_LICENSE_NUMBER>;
window.onload = function() {
    setTimeout(function(){ 
        // Live Chat
        !function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"cdn.livechatinc.com/tracking.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();
    }, 3000);
};

You can adjust the 3000 ms if you want to load it sooner or later.

---

For those of you interested in using Google Tag Manager to defer loading, you can follow Live Chat Inc's instructions here:

https://www.livechat.com/help/google-tag-manager/

Weizmann

Answer 3

I have found a solution I have included, google tag manager on which I have included all additional javascript codes, and I do the following.

    <script>
    (function(){
        setTimeout(function(){
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5M93GPC');
        }, 5000);
    })()
</script>

Cytolysin

How did you solve it ? can you explain ? I have a similar issue. – Brookbrooke