重新发布的网站的广告可见度也超过了 75%，跳出率降低了 50%，网页浏览量增加了 27%。
当 Google 宣布推出 Core Web Vitals 计划时，德国发布商 Netzwelt 很快意识到，这些新指标有助于提升网页体验并改进基于广告的创收效果。他们开始着手重新发布网站，在应用常见的效果提升最佳实践的同时，并行优化广告代码和展示位置。事实证明，致力于提供出色的用户体验和快速的网页加载速度，是同时提升互动度和广告收入的有效途径。该网站的网页浏览量增加了 27%，广告可见率超过 75%，广告收入提高了 18%。
27%
网页浏览量增加
18%
广告收入增加
75%
广告可见度
挑战
与许多其他新闻发布商一样，Netzwelt 在优化用户体验和网页速度的同时，也一直在努力保持较高的广告收入。他们遇到的主要挑战包括：
- 由于广告触发的布局偏移（尤其是来自多尺寸广告位和顶部横幅广告）而导致 Cumulative Layout Shift (CLS) 偏高。
- Largest Contentful Paint (LCP) 延迟，因为广告是最大的绘制内容，或者广告占用了主推图片加载的带宽。
- 由于广告、标头出价和其他用途所需的第三方 JavaScript 而导致的首次输入延迟 (FID) 较高。
- 由第三方供应商控制的意见征求对话框对 Core Web Vitals 的影响，这还会增加布局偏移，并且可能会被检测为延迟的 Largest Paint。
针对 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
第一输入延迟对新闻发布商而言似乎是一个问题，因为广告通常会附带许多额外的 JavaScript 库。而且，查看 Lighthouse 等实验室数据时，似乎确实会受到负面影响。不过，查看 2020 年网络年鉴中的实地数据后，我们发现许多网站的响应速度足够快。这在一定程度上是因为广告 JavaScript 加载较晚（在首次输入后），缓存效果良好（例如采用 v8 代码缓存处理），或者广告供应商对其进行了良好优化。供应商可见度跟踪器会确保避免执行长时间的任务，因此即使运行时间总和很长，总屏蔽时间 (TBT) 和 FID 也不会受到影响。虽然 FID 对 Netzwelt 来说不是大问题，但仍需要进行一些优化：
- 减少广告脚本和提供商，尽可能专注于单个堆栈。
- 使用 defer 或 async 加载所有脚本。
- 使用 webpack 或类似技术进行 treeshaking 和解包。
- 使用类似 BEM 的简单 CSS 规则。
- 避免长时间运行的任务，并使用空闲到紧急模式。
- 在布局受到影响的任何位置使用 RequestAnimationFrame。
优化 LCP
广告会以两种方式影响 Largest Contentful Paint：显式地将广告识别为 Largest Contentful Paint，以及间接地使网络带宽拥塞或影响关键路径，以致于实际的 Largest Contentful Paint（例如主打图片）无法足够快地加载。
在针对 CLS 进行优化时，Netzwelt 已从顶部广告位移除中等矩形广告。这还有一个额外的好处，即广告不会成为最大的元素。
Netzwelt 遵循严格的政策，将内容置于广告之上。 Netzwelt 优先考虑了首屏上使用的主打图片和字体，并优化了关键路径，使其优先于广告脚本和广告。这种优先级设置有助于确保 LCP 不受广告影响。
除了这些优化之外，Netzwelt 还遵循了其他最佳实践：
- 为关键渲染路径分离 CSS，并将其放入标头中。
- 预加载了最重要的字体、脚本和图片。
- 避免了在折叠线上方延迟加载图片。
- 使用了
font-display="swap"。
GDPR 意见征求和 Core Web Vitals
意见征求对话框通常会对 Core Web Vitals 产生负面影响。与广告一样，意见征求对话框也会通过以下两种方式影响 Core Web Vitals：
- 如果被检测为最大的绘制操作或导致布局偏移，则为显式绘制操作。
- 隐式地，通过从实际的 Largest Contentful Paint 窃取带宽、阻塞到 Largest Contentful Paint 的关键路径，或延迟广告投放，直到用户同意，这反过来可能会触发布局偏移。
Netzwelt 与第三方意见征求服务提供商合作，该服务提供商也实施了优化措施。首先，Netzwelt 确保避免了一些简单的陷阱：
- 意见征求脚本以异步方式加载，以免阻塞关键资源。
- 意见征求的格式设置为，大型元素不符合 LCP 中最大元素的条件。
- 意见征求叠加层使用
position: fixed来避免偏移。 - 虽然广告仅在用户同意后才会展示，但系统会预先保留足够的空白，以免广告加载时出现布局偏移。
- 确保意见征求对话框的显示和定位不会触发布局偏移。我们在此处发现并解决了一个问题，即服务提供商的滚动锁定选项会在用户滚动浏览时移动文章的主要内容，从而导致布局发生偏移，从而导致用户无法滚动浏览。
完成这项工作后，现场 CLS 与实验室 CLS 之间仍存在较大差异。虽然实验室 CLS 接近零，但现场值明显高于阈值。经过调查，我们发现问题出在意见征求 iframe 中的布局偏移上，这些偏移目前只能在现场数据中正确捕获。Netzwelt 将继续与第三方意见征求服务提供商合作，解决此问题。
新闻订阅模式和 Core Web Vitals
新闻发布商正在转向订阅模式，以资助新闻事业。 此模型与 Core Web Vitals 相关，因为用户不会订阅用户体验较差的网站。 此外，订阅者不希望在付费内容中看到广告，但隐藏广告可能会导致布局发生变化。网站需要检查用户是否有权查看相应内容以及是否显示广告。这些检查可能会导致额外的延迟，从而导致内容偏移或用户体验不佳。
Netzwelt 采用的是内容始终免费的模式，但订阅者不会看到广告。他们研究了查询和存储权限的不同方法，以减少延迟时间和布局偏移。
对使用权的初始查询始终会导致延迟，因此，如果查询使用权花费的时间过长，网站将显示上次缓存的状态。对于新订阅者，这意味着付费用户看到一次广告的风险很小。刚刚取消订阅的用户可能会在本地存储的使用权更新之前看到一次不含广告的加载。确定权限后，系统会使用 LocalStorage API 将其存储在本地，以避免在日后的导航过程中出现额外的延迟和布局偏移。
优化结果
Netzwelt 的优化成效不言自明。 在全球新闻发布商中，他们的 PageSpeed Insights 得分无与伦比：
这些优化不仅改善了网页体验，还着眼于提升广告体验、广告曝光度和收入，从而为商家带来更理想的成效。重新发布经过优化的网页后，Netzwelt 的每千次展示费用提高了 20-30%，广告可见率超过了 75%。不过，Netzwelt 认为总体收入提升幅度会更高。自重新发布以来，流量有所增加，这可能是因为用户互动度更高，以及由于用户体验得到改善而导致的跳出率更低。这些影响难以量化，也难以与重新发布建立因果关系，因为流量会自然波动，而且全球疫情也产生了影响。正是由于这些间接影响，Netzwelt 在审核其网站时，总是会查看所有数据，而不仅仅是可能具有误导性的每千次展示费用。核心 Web 指标和用户体验指标与所有与广告相关的指标相结合，可提供真实情况。
展望未来
Netzwelt 认为，在无法使用第三方 Cookie 的未来，通过内容进行内容相关定位，再结合良好的用户体验和网页体验（包括广告可见度），是新闻发布商取得成功的关键。
因此，Netzwelt 不仅仅满足于核心网页指标，而是通过使用新的 Digital Goods API 实现了许多现代 Web 功能，例如渐进式 Web 应用 (PWA)、离线内容、深色模式、Web Share API 和 Trusted Web Activity (TWA)。