原文链接：https://web.dev/netzwelt/

写在前面

文摘自谷歌上有关性能提升的真实案例，可摘抄其中数据，可发朋友圈，@老板或者技术负责人。

本文只有2.5千字，存在部分广告专业词汇，也有一些专业技术词语，未在文中进行解释，感兴趣的同学可自行百度。

希望本文对于还没使用核心指标的同学或公司，有所启发，从另一个角度，更多的关注用户体验，给前端同学更多的时间、资源和福利。

此外谷歌最近发布了有关核心指标和spa的一些内容，我看了后也是很出乎意料，我将尽快抓紧时间，把好的内容给大家尽快分享出来。

正文

网站核心指标提高广告收入18%

调整后网站可视性提高了75%，跳出率下降50%，访问量提升了27%；

谷歌启动核心网站指标计划后，德国广告商Netzwelt 敏锐的嗅到了新指标在用户体验和提高广告变现的巨大潜力。他们开启了网站调整之旅，既采用最佳性能实践也优化广告标签和投放。致力极致用户体验和更快的网站，这条路既改善了参与度、提高了广告收入，阅读量提高了27%，可视性提高了75%，最重要的是收入增加了18%。

挑战

和许多新闻出版商一样，一方面在优化性能和用户体验以及网站速度方面，另一方面又要维持高的广告收入，Netzwelt在寻找平衡点之间非常艰辛，他们遇到的困难基本是以下几点：

高累计布局偏移 (CLS),因为广告引发的布局偏移大，特别是multisize slot和顶部banner
最大内容渲染延迟 (LCP)指标延迟，因为广告是最大的渲染内容或者因为下载主页面图片
高首次输入延迟 (FID)，因为第三方广告、顶部投放和其他用途等js脚本
网站核心指标的副作用，第三方厂商的是否同意的弹窗，也在布局位移中，甚至可能是最后最大的渲染内容。

优化新闻页面的核心指标

在应用网站核心指标的过程中，Netzwelt很快就发现优化指标并不影响广告，但却能提高广告的可视性。因此Netzwelt团队优化后发现可视性提高了75%，能够带来更高的广告覆盖率（本来目标是总覆盖率不得低于50%）。

优化CLS

即便有懒加载，广告通常会导致加载延迟，而且因为其实是多尺寸和因为是流动投放，一般无法预知广告的真实大小。

这个问题可以分成两部分：顶部广告和底部广告

顶部广告 如果加载稍晚会因为尺寸未知引发大量的布局变化。霸占可能使用的大空间可能导致用户体验差，但是要求广告商提供固定尺寸可能导致广告收入减少。Netzwelt解决了这个问题，他们把顶部广告改成吸附式同时把banner中特别大的尺寸给去掉了一些。

历史数据和A/B测试能帮助Netwelt能为不同设备和不同尺寸屏幕找到合适的尺寸和定位，css媒体规则用于保留空间。

底部广告 有重大提升空间：

banner加载了，但看不到就会导致可视性低，同时页面体验也会不好。
banner加载了但同时滚屏导致了其他内容的变动

为了保证良好的网站体验和高广告可视性，Netzwelt使用了懒加载，预留了最小公分母的空间。banner请求的尺寸是300×600到300×600，预留了250px的空间。这就让布局偏移量变得很小，而且节省的大量空间可以放大尺寸的banner，虽然这种优化不是最完美的，但这无疑是一个美好的开始和一致。

为了持续优化，Neetzwelt使用Intersection Observer和Network Information API这两个api来控制广告的投放，因此也降低了布局偏移量。根据滚动条位置和网络连接状况，采用差异化广告位置和懒加载策略，而且有的广告从多种尺寸变成了固定大小。

这种优化的算法是为了让广告可视性最大化，同时还能将布局位移减到最小，浏览器如果不支持以上api就依照设备和从ip获取的网络信息来使用代理策略。这种策略，尤其是adaptive loading极大程度的降低了网络相对较慢用户的CLS。

改善FID

首次输入延迟可能会是出版商头疼的另一个点，因为广告通常引入很多额外的js包，一般都可能带来负面影响（谷歌实验室结果显示）。但是看2020 Web Almanac的实际数据，很多网站相应都非常快。

可能是因为广告性质的js加载时间靠后（在首次输入以后），缓存效果好（比如按照v8 code caching进行缓存治理），或者广告提供商进行了优化，比如广告商可视性的追踪器能够保证避免出现长耗时任务。所以计算广告时长时，长阻塞时间 (TBT)和FID都没有受影响。虽然对Netzwelt来讲，FID不是一个大问题，仍然需要做出一些优化：

减少广告脚本和库，聚焦在单个执行栈。
所有脚本使用defer或者async属性
使用webpack或者相似技术做treeshaking和unbundling
使用简单的BEM类css规则
避免长耗时任务，使用idle-until-urgent 。
利用RequestAnimationFrame优化防止影响布局

优化 LCP

LCP被广告影响的情况有两种，第一种是直接被作为最大内容渲染，第二种是间接占用带宽或者影响关键路径，导致最大内容渲染延迟。

Netzwelt已经从顶部广告组件中删除了中等尺寸的长方形广告以优化CLS。这就能防止广告成为最大元素。

Netzwelt严格遵守内容优先广告的原则，将主要内容的图片和字体在顶部广告上使用，这样在广告脚本和内容前优化了关键路径。这种优先策略让LCP免受广告影响。

除了这些优化，Netzwelt也最受最佳实践：

分离css用于关键路径渲染，放在头部。
预加载最重要的字体、脚本和图片
避免被懒加载的顶部区域的广告
使用font-display="swap"

GDPR同意弹窗和核心指标

同意弹窗总会降低网站指标，在广告行业，同意弹窗对CWV的影响可以分为两方面：

直接上讲，被认定为最大元素，或者导致布局偏移
间接上讲，占用实际最大元素的带宽，阻塞关键路径，或者延迟广告出现的时间，进而又导致布局偏移。

Netwelt和第三方内容提供商合作，第三方也做了一系列优化。首先，Netzwelt要保证避免比较直观的隐患：

内容脚本异步加载，不阻塞关键资源
内容格式化，大量元素不会被识别为最大元素。
内容使用position: fixed避免便宜
只有同意后才会展示广告，预留充足空白避免加载广告时有布局偏移

解决完这些，cls数据和实验数据还有很大差异，虽然实验数据接近于0，但得到的数据却远远超过边界值。经调查后，原来是iframe的同意弹窗，Netzwelt还将持续于内容提供商优化这个问题。

新用户注册模型

新闻

新闻出版商正朝着订阅模型的方向以满足出版资金。这个模型好比核心网站指标和用户体验一样，如果用户体验差或者一般，订阅量就会差。此外，订阅者也不太希望在付费内容中看到广告，但是隐藏广告可能导致布局偏移。网站需要检查用户访问内容和是否展示广告，这些检查可能又会导致延迟，内容偏移或者草稿的用户体验。

Netzwelt使用的模型中内容总是空白的，但是订阅者却看不到广告。他们调研了很多请求和存储方法，减少了延迟和布局偏移。

早点请求可能导致延迟，因此如果请求内容耗时久，网站将会展示最近一次缓存的状态。对于新的订阅者，这就有可能有一些风险，比如可能付费客户又看到了广告，那些付费过期用户可能又没有看到广告。

改善的结果

Netzwelt优化的结果非常明显，网站的检测分数在全球出版界拔得头筹。
Screenshot of PageSpeed Insights for the Netzwelt.de site, showing a score of 100.
上图是结果截图。

改善措施提高了用户体验，而且改善措施都是从业务角度出发，还提高了广告的体验、可视性以及收入。改进页面上线后，Netzwelt发现CPM提高了20%到30%，可视性提高超过75%。而且Netzwelt估计整体收入提高可能更多。上线后流量增多，可能是因为用户参与增加，而且因为体验增加页面的跳出率也降低了。虽然这些都很难量化，但改善后流量自然波动，而且还要考虑全球疫情缘故。但对于Newzet来讲，重新审查网站情况，而不只是关注CPM（CPM很容易误导人），实行的改善措施就是原因之一。核心网站指标和体验指标，结合所有的广告相关的指标，给整个情况提出了真实写照。