如何正确延迟Calendly脚本 减少渲染阻塞优化Google PageSpeed得分

你写的延迟加载逻辑没有生效，本质是代码逻辑冲突：你在代码块里写了onload+setTimeout的延迟注入脚本逻辑，但代码块末尾还保留了一行直接引入Calendly脚本的静态标签：

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

浏览器解析到这行标签时会立刻发起脚本请求，完全绕开了你写的延迟逻辑，等于延迟代码白写。甚至等5秒后你写的延迟逻辑触发时，还会重复注入一次相同的脚本，平白多耗资源。

给两个生产环境验证过的方案，优先选第一个，性能收益最高：

• 方案1：滚动到预约区块时再加载（推荐）
  相比固定时长延迟，这个方案更合理：如果用户没有滚动到Calendly预约组件的位置，就永远不加载相关脚本，完全不占用首屏加载资源。直接把原有Calendly代码块全删掉，替换成下面的代码即可：

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" style="min-width: 320px; height: 600px;" data-url="https://calendly.com/markorangerocket/15-minute-meeting"></div>
<script>
const calendlyWidget = document.querySelector('.calendly-inline-widget');
function loadCalendlyScript() {
  // 避免重复加载脚本
  if (document.querySelector('script[src*="calendly.com/assets/external/widget.js"]')) return;
  const script = document.createElement('script');
  script.async = true;
  script.src = 'https://assets.calendly.com/assets/external/widget.js';
  document.head.appendChild(script);
}

if (window.IntersectionObserver) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadCalendlyScript();
        observer.disconnect();
      }
    })
  }, {rootMargin: '200px'}); // 距离视口还有200px时提前加载，减少用户等待
  document.addEventListener('DOMContentLoaded', () => observer.observe(calendlyWidget));
} else {
  // 老旧浏览器兼容降级：页面所有资源加载完成后再加载脚本
  window.addEventListener('load', loadCalendlyScript);
}
</script>
<!-- Calendly inline widget end -->

• 方案2：保留固定延迟加载逻辑
  如果你就是需要页面加载完固定等一段时间再加载脚本，直接删掉那行多余的静态脚本引入标签即可，修正后代码如下：

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" style="min-width: 320px; height: 600px;" data-url="https://calendly.com/markorangerocket/15-minute-meeting"></div>
<script>
window.addEventListener('load', () => {
  setTimeout(() => {
    if (!document.querySelector('script[src*="calendly.com/assets/external/widget.js"]')) {
      const script = document.createElement('script');
      script.async = true;
      script.src = 'https://assets.calendly.com/assets/external/widget.js';
      document.head.appendChild(script);
    }
  }, 3000); // 延迟时长可自行调整，不需要硬等5秒
})
</script>
<!-- Calendly inline widget end -->

1. 打开浏览器开发者工具，切换到「网络」面板，筛选JS类型资源
2. 硬刷新页面，观察widget.js的请求触发时机：如果是滚动到预约区块位置/你设置的延迟时间到了才出现该请求，说明逻辑运行正常
3. 如果页面刚刷新就出现该请求，说明站点其他位置还有直引Calendly脚本的代码，全局搜索calendly.com/assets/external/widget.js删掉多余的静态引入标签即可

内容的提问来源于stack exchange，提问作者theseoidiot