发布时间：2021 年 7 月 29 日
代码是指插入到网站中的第三方代码段，通常通过跟踪代码管理器插入。代码最常用于营销和分析。
代码和跟踪代码管理器对性能的影响因网站而异。跟踪代码管理器可比作信封：跟踪代码管理器提供了一个容器，但您要填充什么内容以及如何使用它，主要取决于您自己。
本文将介绍优化代码和代码管理器以提升性能和 Core Web Vitals 指标的相关技巧。虽然本文档提及了 Google 跟踪代码管理器，但其中讨论的许多概念也适用于其他跟踪代码管理器。
对 Core Web Vitals 的影响
代码管理器通常会消耗快速加载网页和确保其响应迅速所需的资源，从而间接影响 Core Web Vitals。带宽可能会用于下载网站的跟踪代码管理器 JavaScript，或用于此 JavaScript 进行的后续调用。主线程上的 CPU 时间可用于评估和执行代码管理器和代码中包含的 JavaScript。
Largest Contentful Paint (LCP) 在关键网页加载时间内容易受到带宽争用的影响。此外，阻塞主线程可能会延迟 LCP 渲染时间。
累积布局偏移 (CLS) 可能会受到以下因素的影响：在首次渲染之前延迟加载关键资源，或者代码管理器向网页注入内容。
Interaction to Next Paint (INP) 容易受到主线程上的 CPU 争用影响，我们发现跟踪代码管理器的大小与 INP 得分较低之间存在相关性。
选择合适的代码类型
代码对性能的影响因代码类型而异。一般来说，图片代码（“像素”）的效果最好，其次是自定义模板，最后是自定义 HTML 代码。供应商代码因其允许的功能而异。
请注意，代码的使用方式会极大地影响其性能影响。“像素”的性能非常出色，这在很大程度上是因为此类代码的性质对其使用方式施加了严格的限制；自定义 HTML 代码不一定总是会影响性能，但由于它们为用户提供了很大的自由度，因此很容易被滥用，从而影响性能。
在考虑代码时，请注意规模：单个代码对性能的影响可能微不足道，但如果同一网页上使用了数十个或数百个代码，则影响可能会变得显著。
并非所有脚本都应通过跟踪代码管理器加载
通常，代码管理器不是加载用于实现用户体验的即时视觉或功能方面的资源（例如 Cookie 通知、主推图片或网站功能）的最佳方式。使用跟踪代码管理器加载这些资源通常会延迟其传送。这不利于用户体验，还可能会增加 LCP 和 CLS 等指标。
此外，部分用户会屏蔽代码管理器。使用跟踪代码管理器实现用户体验功能可能会导致部分用户无法访问您的网站。
谨慎使用自定义 HTML 代码
自定义 HTML 代码已存在多年，在大多数网站上都被广泛使用。借助自定义 HTML 代码，您可以输入自己的代码，且限制很少，因为尽管名称如此，但此代码的主要用途是将自定义 <script> 元素添加到网页中。
自定义 HTML 代码的使用方式多种多样，对性能的影响也大不相同。在衡量网站的性能时，请注意，大多数工具会将自定义 HTML 代码的性能影响归因于注入该代码的代码管理器，而不是代码本身。