减少第三方代码的影响 - Google CDN

Question

看来我的页面速度得分受到此问题的严重影响：

减少第三方代码的影响 第三方代码阻塞主线程 [number] 毫秒

每次运行测试时这个数字都会变化，有时是 1,000，有时是 1,400 等。

从 Google CDN 我只加载 jquery 插件并加载 Web Font 脚本来延迟加载字体，这里是相关代码：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: ['Open Sans:400,600','Roboto:400,500,700']
    }
  });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

这是来自页面速度洞察的信息：

第三方| 尺寸| 主线程阻塞时间

谷歌CDN | 40 KB | 1,001 毫秒

引导 CDN | 70 KB| 0毫秒

我应该做什么来提高速度？

我注意到向我的网站添加更多 JS 代码或删除它会影响这个“主线程阻塞时间”，即使该代码不是来自 Google CDN。

例如，如果删除一些 javascript 块，例如这些本地脚本：

<script src="/js/d3.v5.min.js"></script>
<script src="/js/billboard.min.js"></script>
<script defer src="/js/moment.min.js"></script>

Google CDN 的主线程阻塞时间减少到 500 毫秒，我的分数增加

Answer 1

您可以采取一些措施来改进您的网站：-

1. 将该属性添加async到 JS（或者defer如果async由于未设置为允许异步加载而不遇到竞争条件而破坏您的站点）。这样做的目的是为了消除阻塞JS。
2. 在第三部分域上使用<link rel="preconnect" href="itemURL" />，通过尽早执行所有 DNS、TLS 和 TCP 魔法来减少脚本源的查找时间。
3. 如果脚本特别重并且对于页面操作不是必需的，请考虑在几秒钟后延迟加载它，以便让主线程完成重要的工作（只需插入脚本或在短暂的时间后初始化它setTimeout）。
4. 如果所有其他方法都失败 - 替换脚本，某些脚本只是资源消耗，可能有更轻量级的替代方案（尝试http://microjs.com/作为灵感来源）