延迟脚本以减少渲染阻塞(谷歌页面速度洞察)

Question

我遇到了客户网站上Calendly预订脚本的问题。

它为页面加载速度增加了一些重要的时间。

我试图用下面的方法来延迟脚本，这是我从一个类似的问题中获得的。这似乎没有帮助，而且，老实说，我还不知道有多远，甚至不知道它一开始是否起作用。

<!-- Calendly inline widget begin -->
<script>
window.onload = function() {
 window.setTimeout(function () { 
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://assets.calendly.com/assets/external/widget.js';
  document.querySelector('head').appendChild(script);
 }, 5000);
};
</script>
<div class="calendly-inline-widget" style="min-width: 320px; height: 600px;" data-url="https://calendly.com/markorangerocket/15-minute-meeting"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->

如果有人曾经处理过这个问题，并且有解决办法，我将非常感激。

Answer 1

我知道这是有点过时，但张贴，以防任何人在未来遇到这种情况。动态创建脚本的思想是在页面加载后移动脚本添加和评估，以防止呈现阻塞。您将希望删除第13行中的脚本，并让它通过包含<script>的代码顶部的document.createElement('script')创建。我删除了timeout函数，因此它将在window.onload之后立即执行。下面的示例脚本

<!-- Calendly inline widget begin -->
<script async>
window.onload = function() {
  let script = document.createElement('script');
  script.async = true;
  script.src = 'https://assets.calendly.com/assets/external/widget.js';
  document.querySelector('.calendly-inline-widget').appendChild(script);
};
</script>
<div class="calendly-inline-widget" style="min-width: 320px; height: 600px;" data-url="https://calendly.com/markorangerocket/15-minute-meeting"></div>
<!-- Calendly inline widget end -->