javascript - 鼠标移动后或 5 秒后加载外部 JS 文件以获得更好的页面速度优化

Question

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

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

满载时间2.6秒总页面大小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，我也有“利用浏览器缓存”问题，因为这个脚本。他们说:

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)

也许您可以找到解决所有这些问题的好方法。再次感谢您。

Answer 1

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

<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.7秒总页面大小650KB要求34

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