Loading External JS Files After Mouse Move or 5 Seconds Later for Better Page Speed Optimization

Question

I am using smartsupp live chat script for my website. It is good however it dramatically increases my page loading time.

According to gtmetrix.com, my normal page load details:

Fully Loaded Time 2.6s Total Page Size 751KB Requests 42

But when I add this script: Fully Loaded Time 20.6s Total Page Size 2.00MB Requests 66

So, I want to use this script but I don't want to load it firstly. I want to load it when visitors mouse move or 3-5 seconds later.

Do you have any solution for this? Thank you.

Default smartsupp codes like this:

<!-- Smartsupp Live Chat script -->
<script type="text/javascript">
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'mykeynumber';
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.defer=true;
  c.src='//www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
</script>

EDIT:

I think this is not related with my question but I think this is another side of this problem too. According to gtmetrix.com I have "Leverage browser caching" problem beacuse of this script too. They said:

Leverage browser caching for the following cacheable resources:

https://s2.smartlook.com/rec/check (expiration not specified)
https://s2.smartlook.com/rec/init (expiration not specified)
https://s2.smartlook.com/rec/tag (expiration not specified)
https://static.smartsupp.co/chats/112939/avatar-gasqccul5z.png (expiration not specified)
https://rec-src.smartlook.com/recorder.js (5 minutes)
https://www.google-analytics.com/analytics.js (2 hours)

Maybe you can find a good solution for all of these problems. Thank you very much again.

possible duplicate of https://stackoverflow.com/questions/7718935/load-scripts-asynchronously — Nishanth Matha, Aug 30 '17 at 05:20

score 2 · Answer 1 · answered Aug 30 '17 at 07:41

Unfortunately other solutions are not fit for my problem. So I found a code like this:

<script>
 window.onload = function(){
   setTimeout(loadAfterTime, 5000)
};

function loadAfterTime() { 
// your code here
}
</script>

And used it like:

<script>
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'mykeynumber';
 window.onload = function(){
   setTimeout(loadAfterTime, 5000)
};

function loadAfterTime() { 
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='//www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
}
</script>

After that, gtmetrix.com results:

Fully Loaded Time 2.7s Total Page Size 650KB Requests 34

So, it works! I recommend this solutions for all webmasters.

score 1 · Answer 2 · answered Aug 30 '17 at 05:22

You can use javascript onload native method or document.ready from jquery library.

It is hard to accept that those loading time will be same or more or less same all the time, since it depends on internet speed and server capability.Instead of depending on setTimeout you can rely on window.onload

window.onload fires when the resource has loaded.

window.onload = function() {
  // script for Smartsupp Live Chat

};

Saurabh · Answer 3 · 2017-08-30T05:44:59.790

Its easy to do achieve this with jQuery. You just need to get the external js file after the document is ready and apply a set timeout function for your external script.

<script>
 $(document).ready(function() {
     setTimeout(function() {
         var _smartsupp = _smartsupp || {};
         _smartsupp.key = 'mykeynumber';
         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.defer = true;
             c.src = '//www.smartsuppchat.com/loader.js?';
             s.parentNode.insertBefore(c, s);
         })(document);
         console.log("External js file loaded");
     }, 5 * 1000) //calls the external chat after 5 seconds
 });
</script>

Edit #1

Leverage browser caching doesn't works on external resources :)

Thanks @Saurabh for the helps but It didn't work, page couldn't load the chat script. — Alberto, Aug 30 '17 at 05:23
@Alberto Sorry there were some typos in my code. I have updated my answer, can you please try it. — Saurabh, Aug 30 '17 at 05:45

Loading External JS Files After Mouse Move or 5 Seconds Later for Better Page Speed Optimization

3 Answers3