Contents
1 前言
在互联网时代，网页加载速度已经成为影响用户体验和SEO排名的关键因素。而其中，TBT(Total Blocking Time，完全阻塞时间)则是衡量网页性能的一个重要指标。
TBT 衡量的是浏览器在加载网页时，因脚本执行而无法响应用户交互的时间。显而易见，影响 TBT 的主要因素就是网页中的 JavaScript 脚本：浏览器需要加载并执行所有 JS 脚本，才能完成页面的渲染和其他内容的加载(CSS也影响渲染，只是相对JS来说影响得小一些)。因此，网页上脚本(和CSS)的数量和复杂性越高，加载完成的时间就越有可能受到影响。
在下图中，TBT时间超过710毫秒，直接导致谷歌的PageSpeed Insights评分大福下降：
而当TBT时间少的时候，评分则大幅上升，下图中，在其他几个参数都与上图中差不多的情况下，TBT大幅降低到90毫秒后，评分直接提高了到了80，可见在谷歌眼中TBT时间有多重要：
注：PageSpeed Insights的评分标准其实对使用了CDN的站点并不友好，证据就是连续几次检测分数可能会相差很大，这是因为 CDN 的缓存机制和地理分布会影响网站的加载时间。在不同的检测时刻，PageSpeed Insights 会从不同的服务器节点获取资源，这些节点的响应速度会因为网络状况、CDN 缓存的更新或地域差异而有所不同。因此，评分波动是很常见的现象，尤其是当站点的资源依赖于外部 CDN 时，所以最好是多测几次取其中最高分(其实看平均分相对准确一些)。
再多嘴一句，虽然用连通性好的VPS直接建站很可能直接获得较高的PageSpeed Insights评分，但是，真不推荐在互联网上裸奔～。
对于使用 WordPress 搭建的网站（以我自己的博客为例），许多插件的核心功能其实就是插入脚本，例如 Google Analytics(流量分析)、Disqus 评论插件(第三方评论系统)、Instant.page 插件(通过监控鼠标悬停预加载内容)等。此外，还有一些类似功能的工具，如 Umami(网站访问流量统计)，同样通过在网站代码中插入前端脚本，同时搭配后端服务来实现。
这些插入的脚本(无论是通过插件动态生成还是直接嵌入源码)，都可能会对网页加载性能产生负面影响，尤其是当多个脚本并行加载时，它们会占用浏览器计算资源，延迟页面渲染，增加 TBT 时间(网页在所有 JavaScript 执行完毕前无法响应用户操作)。此外，这些脚本会消耗大量线程和内存，可能导致页面交互性下降，尤其在低性能设备或网络环境下，影响用户访问体验。
那么，假如能够将这些插入类脚本从网页本身的加载过程中剥离出来，由云端来加载和管理，理论上就可以减少页面主线程的阻塞，优化脚本加载顺序并实现异步加载，进而降低浏览器的负担。通过这种方式，不仅能加速资源的加载过程，还能减少对网页渲染的影响，从而有效降低 TBT 时间。
那么，有没有这种能将插入类的脚本放到云端去实现的方法呢？有，那就是Cloudflare的Zaraz。
2 Cloudflare Zaraz部署
2.1 Zaraz简介
Cloudflare Zaraz 是一款通过 Cloudflare 边缘网络管理和加速第三方脚本和代码的服务，它允许网站管理员将多个外部脚本(如分析、广告、社交分享等)从网页的加载过程中剥离出来，并通过 Cloudflare 的边缘网络执行(其原理就是：对于浏览器而言，脚本是从网页代码里加载还是从其他什么地方塞过来进行加载，其实都没什么区别～)。
Zaraz优势：
1、集中管理
Zaraz 使得网站脚本管理变得更加集中和高效，特别是在需要集成多个第三方脚本(如 Google Analytics、Ggoogle AdSense、UMami 、instant.page等)时，用户可以通过 Zaraz 在 Cloudflare 边缘网络上轻松地管理和优化这些脚本的加载，再也不会像以前一样，过了一段时间就把运行了什么脚本以及脚本插入在哪里忘记得一干二净。
2、异步加载
Zaraz得核心优势在于”异步加载”，其避免了脚本阻塞页面渲染，从而提升了访客的 主观体验，特别是在 首屏加载速度方面，即便在某些没有Cloudflare数据中心的地区加载速度较慢，Zaraz 仍能通过确保页面内容优先渲染，减少对用户体验的负面影响。此外，Zaraz 还能有效优化 PageSpeed Insights 等性能评分，帮助网站提升整体表现(虽然在没有 Cloudflare 数据中心的地区，Zaraz 可能因为网络延迟造成加载时间稍长，但由于其异步加载的设计，这对页面渲染的影响较小，整体用户体验依然是正面的)。
2.2 Zaraz配置模板介绍
Cloudflare Zaraz默认就提供了一些常见的第三方脚本的插入配置模板，如下图：
而最关键的，是上图红框中的”Custom HTML”配置模板，其作用是允许你将 自定义的 HTML 代码 或 JavaScript 代码插入到页面中，通过 Custom HTML 插件，”理论上”来说，你可以在不直接修改 WordPress 主题文件的情况下，向页面注入任何 HTML 或 JavaScript 代码！这个一听就比较牛逼有没有？！
借助 Zaraz，WordPress 网站能够实现更加高效的性能优化，减少对多余插件的依赖，简化代码管理，同时保持高度的灵活性和可扩展性。
所以，在这篇文章中，我会梳理一下目前博客所在的WordPress中的各种插入代码类插件以及脚本，将适合迁移的脚本都迁移到Zaraz上。
2.3 梳理适合迁移到Zaraz上的插入类脚本
在正常加载页面的时候，如果使用开发者工具，可以看到加载了众多的JS和CSS：
理论上这些都可以通过 Zaraz 来迁移并管理。Zaraz 可以集中管理和优化这些插入类的代码，减少它们对页面加载的影响，特别是对于 异步加载 和 延迟加载 的优化。
然而，完全迁移所有的 CSS 和 JS 到 Zaraz 上并不现实，原因有以下几点：
1. 性能和加载优化的边界：
• Zaraz 主要针对的是第三方 代码 或 脚本，例如 Google Analytics、广告脚本、站长工具 等。对于大多数 自定义的主题或插件脚本，它们通常在页面加载过程中承担更重要的作用，迁移到 Zaraz 上可能会影响它们的正常执行，尤其是一些 必须在 DOM 完全加载前执行的脚本（如某些 CSS 样式、关键 JS 功能）。
2. 自定义 CSS 和 JS 的特殊性：
• 网站的 本地 CSS 和 JS（特别是涉及到主题样式、互动效果等）通常是 关键渲染路径 的一部分，这些文件可能需要尽早加载才能保证页面的正确渲染。将它们放到 Zaraz 上可能会导致它们的加载延迟，从而影响用户的 首次渲染 体验。
3. Zaraz 的定位与适用范围：
• Zaraz 更适合用于 第三方脚本的集中管理，例如 Google Fonts、广告脚本、统计脚本 等。对于这些脚本，Zaraz 通过 异步加载 和 延迟加载 来优化性能。
• 对于 本地主题或插件的 CSS/JS 文件，建议还是保留它们在源站或 CDN 上进行加载，尤其是对于那些对页面渲染至关重要的文件。
总结：
• 迁移第三方脚本（如 Google Analytics、广告、站长工具等）到 Zaraz 是有利于性能的，尤其是在 异步加载 和 集中管理 上有显著优化。
• 对于 本地主题或插件的 CSS 和 JS 文件，迁移到 Zaraz 可能会影响加载顺序和关键渲染路径，因此这些文件建议 保留在源站或 CDN 上。
基于以上原则，最终我决定将以下4个插入型脚本的功能采用异步加载方式，以尽量减少对页面渲染的阻塞影响为标准，迁移到Zaraz上：
1、Font Awesome插件(Free)，采用”Custom HTML”模板，对应的CDN网址：
https://kit.fontawesome.com/xxxxxxxxxx.js
Font Awesome的图标字体属于页面的视觉元素，不过相对来说图标字体不那么显眼，就算异步加载影响也不算大。
注：xxxxxxxxxx.js中的xxxxxxxxxx就是你的Font Awesome账号的ID。
2、Umami，采用”Custom HTML”模板，对应的网址：
https://umami.tangwudi.com/tangwudi
Umami是页面访问流量的第三方分析工具，和页面渲染无关，放到页面的最后部分异步加载即可。
3、Google AdSense，采用”Custom HTML”模板，对应的网址：
https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=xxxxxxxxxxxxxxx" crossorigin="anonymous
广告通常在页面渲染后加载，以免干扰页面的快速显示，因此也可将其放在页面的最后部分异步加载。
注1：上述地址中的xxxxxxxxxxxxxxx是Google AdSense 帐号的”发布者 ID”
注2：Zaraz上只有Google Ads的模板，而那个是广告发布者用的。
4、Google Analytics，采用Zaraz的官方模板
对于Google Analytics脚本的处理方式和其他脚本不完全一样，要分场景来判断：如果你对 Google Analytics 的实时性和准确性有较高要求(比如依赖 Google Analytics 实时收集用户行为数据来优化广告投放、进行A/B测试或者实时调整策略)，建议将其放在页面加载早期，这样虽然会稍微影响页面性能，但是能确保数据准确及时地被采集和分析，避免延迟导致数据缺失或错误，进而影响决策和优化效果；而如果对实时性要求不高，或者不太关注数据的即时性(比如个人博客)，可以使用 Zaraz 异步加载Google Analytics，从而减少其对页面渲染的干扰，提高页面加载速度(适合对性能要求较高的站点)。
其实，最开始我还想将instant.pagee的js脚本也迁移到Zaraz上，不过后来想想并不妥当：Instant.page 依赖于尽早加载并执行脚本，以便通过预加载即将访问的页面来加速用户体验，这要求脚本在页面 DOM 完全加载前就开始执行。然而，Zaraz 会异步加载脚本并可能导致执行顺序与预期不一致，从而影响 Instant.page 的触发时机，进而影响其效果。此外，Zaraz 并未保证即时执行，这与 Instant.page 对时机的敏感性产生冲突，所以最后还是放弃了迁移。
2.4 正式开始迁移
2.4.1 迁移Font Awesome到Zaraz
我之前是直接在WordPress安装的Font Awesome插件(Free账号)，该插件的实现方式是在WordPress的header.php文件的<head>标签中插入Font Awesome 提供的 CDN 链接以及以你的Font Awesome 账号的ID命名的js：
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
如下图：
迁移到Zaraz之后还是使用这个脚本(Zaraz没有提供FontAwesome的现成模板)，但是需要加上defer参数使其在HTML解析完成后再执行，这样能确保页面加载不会被阻塞，最终的脚本如下：
<script defer src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
具体步骤按照如下图片教程一步一步操作即可：
将文章2.3节内容中Font Awesome插件对应的CDN地址以
<script>标签的方式：
<script defer src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
填入下图中HTML Code框内：
最后配置完成：
之后，在WordPress本地禁用Font Awesome插件，并删除插件在WordPress的”header.php”文件中插入的那行代码(注意，这类直接在主题文件中插入代码来实现功能的插件，禁用插件并不会自动删除主题文件中插入的代码，所以需要手动操作)，然后清除浏览器缓存(如果使用了CDN，最好也清一下CDN缓存)后重新载入，在开发者工具中过滤zaraz字样，可以看到如下结果：
同时，Font Awesome相关的脚本依旧和之前使用Font Awesome插件时一样的正常加载：
2.4.2 迁移Umami到Zaraz
重新创建一个新的工具Umami，按照第一部分的流程重新来一遍，对应的HTML Code代码如下：
<script defer src="https://umami.tangwudi.com/tangwudi" data-website-id="填写自己umami站点的ID" data-domains="填写自己站点的域名"></script>
最后添加操作的部分如下图：
然后和之前一样，删除原站点中umami的脚本代码，清除浏览器缓存(如果使用了CDN，最好也清一下CDN缓存)后重新载入，最后在开发者工具的”网络”中确认umami脚本依旧正常加载：
2.4.3 迁移Google AdSense到Zaraz
重新创建一个新的工具Google AdSense，按照第一部分的流程重新来一遍，对应的HTML Code代码如下：
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxx" crossorigin="anonymous"></script>
最后的操作部分如下：
然后和之前一样，删除原站点中Google AdSense的脚本代码，清除浏览器缓存(如果使用了CDN，最好也清一下CDN缓存)后重新载入，最后在开发者工具的”网络”中确认还是可以看到发布者ID：
2.4.4 迁移Google Analytics 4到Zaraz
我之前的Google Analytics 4功能是依靠Rank Math SEO插件来实现的，由于Google Analytics 4在Zaraz有现成的配置模板，所以这次就不使用”Custom HTML”这种万金油方式了(有现成的不用白不用)，改为使用官方配置模板。按照如下图文流程操作：
配置完成：
此后再将Rank Math中Google Analytics 4相关的功能关闭，然后清除缓存(如果使用了CDN，最好也清一下CDN缓存)并重新加载即可。
Google Analytics 4的衡量ID在Google Analytics仪表盘的如下位置获取：
完成所有配置后Zaraz上所有的第三方工具如下：
注：其实还可以只添加一个第三方工具，然后把各个脚本以操作的方式都添加在一个第三方工具中，只不过一般也没啥意义(除非有什么特殊的需求)，还不如为每个脚本新建一个第三方工具来得顺眼。
3 其他设置项
在Zaraz的”设置”选项卡中有常规设置和高级设置项：
同时，在”监视”选项卡下还能看到Zaraz的使用情况：
4 总结
将第三方脚本迁移到 Zaraz 上可以带来多重好处：首先，它通过集中管理，简化了脚本更新和修改，避免了在多个主题文件中寻找和修改脚本的麻烦；其次，Zaraz 的异步加载方式有助于减少页面加载过程中的阻塞时间，显著提升页面性能和用户体验，比如将文章前面提到的4个第三方脚本都迁移到Zaraz子后，我博客的PageSpeed Insights评分又有所进步，TBT时间进一步降到了50毫秒(TBT ≤ 50 毫秒：通常被视为优秀，表示页面加载期间的交互性非常好)：
最关键是另一个重要的衡量参数”移除阻塞渲染的资源”，现在已经减无可减了：
这说明”将第三方脚本迁移到Zaraz以实现减少页面主线程的阻塞”的战略目标完全实现了。
“移除阻塞渲染的资源”通常是指那些阻止页面渲染的 JavaScript、CSS 文件，或者是需要等待这些文件加载和执行后才能继续渲染页面的资源。如果该项显示 0 毫秒，就意味着在谷歌看来：
* 页面上所有资源的加载顺序已经进行了优化(比如，使用了 async 或 defer 加载脚本)。
* 页面渲染不再因为外部资源的加载顺序而受到阻塞，用户能够更快地看到页面内容。
* 已经采用了合适的策略(比如通过 Cloudflare Zaraz、异步加载等方式)来减少阻塞资源。
除此之外，Zaraz 还可以帮助同一个二级域名下的多个子域名对应的站点共享脚本配置(比如需要同时在多个子站点加载相同的脚本，现在只需要在Zaraz上加载一次即可，当然，绑定访问域名的脚本除外)，从而提升维护效率，并通过提供详细的调试和统计工具，便于优化脚本加载时机和性能。
不过，如之前所说，Zaraz只适合运行一些不直接影响页面核心内容渲染的第三方脚本，并不是万能的，所以大家在选择要迁移到Zaraz上的脚本时一定要仔细衡量，否则选择不当可能会导致反效果。
另，Zaraz免费计划提供每月100万次事件的额度，个人站点根本用不完～～：
Zaraz很好用，我现在GA也是放在Zaraz上面
就是，我现在都在考虑要不要把那些搜索引擎站长工具的验证码都放上去了，方便集中管理，本地以后就啥也不加了。
这功能挺不错的
是的，非常有用。