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

Posted 2021-04-09

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

减少第三方代码的影响第三方代码阻止了主线程持续[number] ms

此数字每次运行测试时都会更改，有时是1,000，有时是1,400等。

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

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

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

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

Google CDN | 40 KB | 1,001毫秒

Bootstrap 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毫秒，我的分数增加了

答案

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

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