重新上线的网站还发现，广告可见度超过 75%，跳出率降低了 50%，网页浏览量提高了 27%。
当 Google 宣布 Core Web Vitals 计划时，德国发布商 Netzwelt 很快就看到了这些新指标的潜力，能够提供出色的网页体验并提高广告变现能力。他们开始重新推出网站，采用常见的效果最佳做法，同时同时优化广告代码和展示位置。事实证明，致力于打造卓越用户体验和提高网页加载速度，可以有效提高互动度和广告收入：网页浏览量提高了 27%，广告可见度超过 75%，广告收入提高了 18%。
27%
网页浏览量增幅
18%
广告收入增幅
75%
广告可见度
挑战
与许多其他新闻发布商一样，Netzwelt 努力在优化用户体验和网页速度之间寻求平衡，同时保持较高的广告收入。他们遇到的主要挑战包括：
- 由于广告（尤其是多尺寸广告位和顶部横幅）触发的布局偏移，Cumulative Layout Shift (CLS) 较高。
- Largest Contentful Paint (LCP) 之所以出现延迟，原因在于广告是最大的绘制渲染量，或因加载主打图片而占用了带宽。
- 因广告、标头出价和其他目的所需的第三方 JavaScript 而导致的 First Input Delay (FID) 较长。
- 由第三方供应商控制的意见征求对话框会对 Core Web Vitals 产生负面影响，这些副作用也会影响布局偏移，并且可能会被检测为延迟的最大渲染。
针对 Core Web Vitals 优化新闻网站
Netzwelt 开始研究核心网页指标后，他们很快就注意到，优化核心网页指标不需要对广告产生负面影响，但可以将其视为提高广告可见度的机会。因此，Netzwelt 团队对核心网页指标进行了优化，将广告可见度提升到 75% 以上，从而吸引价值更高的广告（展示广告的全球平均值低于 50%）。
优化 CLS
广告通常延迟加载（有时是通过延迟加载是有意为之），而且由于多尺寸和自适应广告展示位置，广告的实际尺寸往往无法提前知晓。
此问题可以分为两部分：首屏广告和非首屏广告。
首屏广告由于尺寸不明而延迟加载，可能会导致大量的布局跳跃。屏蔽他们可能需要的最大空间可能会导致用户体验不佳，而要求广告主提供固定尺寸可能会减少广告收入。Netzwelt 通过使顶部广告具有粘性，并移除了部分允许使用的横幅广告尺寸，解决了这个问题。叠加广告可以避免针对不同尺寸的广告触发布局跳转。 虽然符合条件的尺寸缩小确实会影响广告销售，但可见度越高，效果也会轻而易举。
历史数据和 A/B 测试帮助 Netzwelt 找到适合不同设备和屏幕尺寸的合适尺寸和位置，以及用于预留空间的 CSS 媒体规则。
非首屏广告有显著的改进空间：
- 如果横幅广告无法被用户看到但已加载，不仅会导致广告可见度不佳，还会使网页体验变差。
- 在用户滚动鼠标时加载的横幅广告可以引入其他内容跳转。
为了保持良好的网页体验和较高的广告可见度，Netzwelt 实施了延迟加载并预留空间来满足最小尺寸要求。在多尺寸区域中，请求的横幅广告尺寸为 300x250 到 300x600，预留高度为 250 像素。 这样可以消除较小尺寸的布局偏移；对于较大的横幅广告，则大幅减少布局偏移。 这种方法不是最优的，但它是一个开端，并且是一个不错的折衷。
为了进一步优化，Netzwelt 使用 Intersection Observer 和 Network Information API 来控制广告展示位置并减少布局偏移。系统会根据滚动位置和网络连接质量使用不同的广告位置和延迟加载策略，并且广告的尺寸可能会从多种更改为固定尺寸。该算法的目标是最大限度地提升广告可见度，同时最大限度地减少布局偏移。不支持 NetworkInfo API 的浏览器会根据设备和 IP 派生网络类型组合使用代理值。这种自适应加载策略尤其有助于降低互联网连接速度较慢的用户的 CLS。
优化 FID
First Input Delay 对新闻发布商来说可能是一个问题，因为广告通常附带许多额外的 JavaScript 库。从 Lighthouse 等实验室数据来看，这似乎确实会产生负面影响。 不过，从 2020 年网络年鉴中的实测数据可以看出，许多网站的响应速度都足够快。其中一部分原因是广告 JavaScript 加载延迟（在首次输入之后）、缓存良好（例如，得到 v8 代码缓存的处理方式），或广告供应商进行了妥善优化。供应商可见度跟踪器可确保避免耗时较长的任务，因此，即使运行时的总和过长，Total Blocking Time (TBT) 和 FID 也不会受到影响。虽然 FID 对 Netzwelt 而言并不是一个大问题，但仍需要进行一些优化：
- 减少广告脚本和提供商，尽可能集中在单个堆栈上。
- 使用 defer 或 async 加载所有脚本。
- 使用 webpack 或类似技术进行摇树优化和拆分。
- 使用类似于 BEM 的简单 CSS 规则。
- 避免长时间运行的任务，并使用 idle-until-urgent 模式。
- 在任何会影响布局的地方使用 RequestAnimationFrame。
优化 LCP
Largest Contentful Paint 可通过两种方式受到广告的影响：明确地将广告视为最大的渲染；间接地拥塞网络带宽或影响关键路径，以致实际的最大渲染（例如主打图片）无法足够快地加载。
Netzwelt 从顶部广告位中移除了中矩形广告，同时针对 CLS 进行优化。这还有一个好处：广告不会成为最大的元素。
Netzwelt 须遵循严格的政策，将内容放在广告之上。 Netzwelt 优先展示首屏使用的主打图片和字体，并优化关键路径，使其优先于广告脚本和广告。这种优先顺序有助于 LCP 免受广告的影响。
除了这些优化之外，Netzwelt 还遵循其他最佳实践：
- 将关键渲染路径的 CSS 拆分并放入标头中。
- 预加载最重要的字体、脚本和图片。
- 避免了延迟加载首屏图片。
- 已使用
font-display="swap"。
GDPR 意见征求和核心网页指标
意见征求对话框通常会对核心网页指标产生负面影响。 与广告一样，意见征求对话框可通过两种方式影响 Core Web Vitals：
- 明确表示是否被检测到最大绘制次数，或导致布局偏移。
- 隐式方式：通过从实际最大渲染程序窃取带宽、阻止关键路径到最大渲染程序，或延迟广告直到用户同意，这反过来又会触发布局偏移。
Netzwelt 与第三方用户意见征求提供方合作，后者也实现了优化。 首先，Netzwelt 努力避免简单易犯的错误：
- 意见征求脚本是异步加载的，以免阻塞关键资源。
- 已对用户意见征求进行格式设置，以使大型元素无法作为 LCP 内的最大元素。
- 意见征求叠加层使用
position: fixed来避免偏移。 - 虽然广告仅在征得用户同意后才展示，但系统会提前保留足够的空白，以避免在广告加载时布局偏移。
- 确保意见征求对话框的显示和位置不会触发布局偏移。 在这里，我们发现并解决了一个问题，即服务提供商的滚动锁定选项。该选项在显示同意情况时，会在滚动时移动文章的主要内容来停用滚动操作，从而导致布局偏移。
这项工作完成后，现场 CLS 与实验室的 CLS 之间仍然存在很大的差异。 虽然实验室 CLS 接近于零，但实测值明显高于阈值。 经过调查，发现的罪魁祸首是意见征求 iframe 中的布局偏移，目前只能正确捕获字段数据。Netzwelt 会继续与第三方用户意见征求提供商合作，以改善此问题。
新闻订阅模式和核心网页指标
新闻发布商正逐渐改用订阅模式来资助新闻业。 此模型与 Core Web Vitals 相关，因为用户不会订阅用户体验不佳的网站。此外，订阅者不希望在付费内容中看到广告，但隐藏广告可能会导致布局偏移。网站需要检查用户是否有权查看内容以及是否展示广告。 这些检查可能会导致额外的延迟，从而导致内容切换或用户体验不佳。
Netzwelt 使用的模型允许内容始终免费，但订阅者不会看到广告。他们研究了查询和存储使用权的不同方法，以减少延迟时间和布局偏移。
对使用权的初始查询始终会导致延迟，因此，如果查询使用权用时过长，网站会显示上次缓存的状态。对于新订阅者而言，这意味着付费用户只会看到一次广告的风险很小。 刚刚结束订阅的用户可能会看到一次无广告的加载，然后本地存储的许可才会更新。知道权限后，它们会使用 LocalStorage API 存储在本地，以避免在将来导航期间出现额外的延迟和布局偏移。
优化结果
Netzwelt 优化的结果不言自明。其 PageSpeed Insights 得分在世界各地的新闻发布商中是无可比拟的：
这些优化改善了网页体验，但着眼于业务，并且提升了广告体验、广告可见度和收入。重新启动经过优化的网页后，Netzwelt 的每千次展示费用提高了 20-30%，广告可见度超过 75%。不过，Netzwelt 假设总体收入提升会更高。自重新推出以来，流量增加了，这可能是由于用户互动度提高，而跳出率下降，原因在于用户体验得到改善。由于流量会自然波动，全球疫情也造成了这些影响，而且这些影响很难量化和确定与重新上线的因果关系。这些间接影响是 Netzwelt 在审核网站时始终会考虑所有数字（而不只是每千次展示费用）的原因之一，这可能具有误导性。核心网页指标和用户体验指标与所有广告相关指标相结合，可让您了解真实情况。
展望未来
Netzwelt 认为，在未来没有第三方 Cookie 的情况下，通过内容进行内容相关定位，以及良好的用户体验和网页体验（包括广告可见度）是新闻发布商取得成功的关键。
因此，Netzwelt 不会止步于核心网页指标，而是使用新的 Digital Goods API 实现许多现代 Web 功能，例如渐进式 Web 应用 (PWA)、离线内容、深色模式、Web Share API 和 Trusted Web Activity (TWA)。