鼠标移动或5秒后加载外部JS文件，以实现更好的页面速度优化

Question

我正在为我的网站使用smartsupp实时聊天脚本。 很好，但是它大大增加了我的页面加载时间。

根据gtmetrix.com，我的正常页面加载详细信息：

完全加载时间2.6s总页面大小751KB请求42

但是，当我添加此脚本时：完全加载时间20.6s总页面大小2.00MB请求66

因此，我想使用此脚本，但我不想首先加载它。 我想在访客鼠标移动或3-5秒后加载它。

您对此有什么解决方案吗？ 谢谢。

默认的smartsupp代码如下：

<!-- 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>

编辑：

我认为这与我的问题无关，但我认为这也是该问题的另一方面。 根据gtmetrix.com，我也由于该脚本而出现“利用浏览器缓存”问题。 他们说：

利用浏览器缓存获取以下可缓存资源：

 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) 

也许您可以为所有这些问题找到一个好的解决方案。 再一次非常感谢你。

Answer 1

您可以使用jquery库中的javascript onload本机方法或document.ready 。

很难接受这些加载时间总是相同或多或少相同，因为它取决于Internet速度和服务器功能，而不是依赖setTimeout而是可以依赖window.onload

资源加载window.onload触发window.onload 。

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

};

Answer 2

不幸的是，其他解决方案不适合我的问题。 所以我发现了这样的代码：

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

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

并像这样使用它：

<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>

之后，gtmetrix.com结果：

满载时间2.7s总页面大小650KB请求34

因此，它有效！ 我向所有网站管理员推荐此解决方案。

Answer 3

使用jQuery可以轻松实现这一目标。 您只需在文档准备好后获取外部js文件，然后为您的外部脚本应用设置的超时功能即可。

<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>

编辑＃1

利用浏览器缓存不适用于外部资源：）