原文链接：web.dev/netzwelt/
写在前面
文摘自谷歌上有关性能提升的真实案例，可摘抄其中数据，可发朋友圈，@老板或者技术负责人。
本文只有2.5千字，存在部分广告专业词汇，也有一些专业技术词语，未在文中进行解释，感兴趣的同学可自行百度。
希望本文对于还没使用核心指标的同学或公司，有所启发，从另一个角度，更多的关注用户体验，给前端同学更多的时间、资源和福利。
此外谷歌最近发布了有关核心指标和spa的一些内容，我看了后也是很出乎意料，我将尽快抓紧时间，把好的内容给大家尽快分享出来。
正文网站核心指标提高广告收入18%
调整后网站可视性提高了75%，跳出率下降50%，访问量提升了27%；
谷歌启动核心网站指标计划后寻求web网页代理速度要快，德国广告商Netzwelt 敏锐的嗅到了新指标在用户体验和提高广告变现的巨大潜力。他们开启了网站调整之旅，既采用最佳性能实践也优化广告标签和投放。致力极致用户体验和更快的网站，这条路既改善了参与度、提高了广告收入，阅读量提高了27%，可视性提高了75%，最重要的是收入增加了18%。
挑战
和许多新闻出版商一样，一方面在优化性能和用户体验以及网站速度方面，另一方面又要维持高的广告收入，Netzwelt在寻找平衡点之间非常艰辛，他们遇到的困难基本是以下几点：
优化新闻页面的核心指标
在应用网站核心指标的过程中，Netzwelt很快就发现优化指标并不影响广告，但却能提高广告的可视性。因此Netzwelt团队优化后发现可视性提高了75%，能够带来更高的广告覆盖率（本来目标是总覆盖率不得低于50%）。
优化CLS
即便有懒加载，广告通常会导致加载延迟，而且因为其实是多尺寸和因为是流动投放，一般无法预知广告的真实大小。
这个问题可以分成两部分：顶部广告和底部广告
顶部广告 如果加载稍晚会因为尺寸未知引发大量的布局变化。霸占可能使用的大空间可能导致用户体验差，但是要求广告商提供固定尺寸可能导致广告收入减少。Netzwelt解决了这个问题，他们把顶部广告改成吸附式同时把banner中特别大的尺寸给去掉了一些。
历史数据和A/B测试能帮助Netwelt能为不同设备和不同尺寸屏幕找到合适的尺寸和定位，css媒体规则用于保留空间。
底部广告 有重大提升空间：
为了保证良好的网站体验和高广告可视性，Netzwelt使用了懒加载，预留了最小公分母的空间。banner请求的尺寸是300x600到300x600，预留了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不是一个大问题，仍然需要做出一些优化：
优化 LCP
LCP被广告影响的情况有两种，第一种是直接被作为最大内容渲染，第二种是间接占用带宽或者影响关键路径，导致最大内容渲染延迟。
Netzwelt已经从顶部广告组件中删除了中等尺寸的长方形广告以优化CLS。这就能防止广告成为最大元素。
Netzwelt严格遵守内容优先广告的原则，将主要内容的图片和字体在顶部广告上使用，这样在广告脚本和内容前优化了关键路径。这种优先策略让LCP免受广告影响。
除了这些优化，Netzwelt也最受最佳实践：
GDPR同意弹窗和核心指标
同意弹窗总会降低网站指标，在广告行业，同意弹窗对CWV的影响可以分为两方面：
Netwelt和第三方内容提供商合作，第三方也做了一系列优化。首先，Netzwelt要保证避免比较直观的隐患：
解决完这些，cls数据和实验数据还有很大差异，虽然实验数据接近于0，但得到的数据却远远超过边界值。经调查后，原来是iframe的同意弹窗，Netzwelt还将持续于内容提供商优化这个问题。
新用户注册模型新闻
新闻出版商正朝着订阅模型的方向以满足出版资金。这个模型好比核心网站指标和用户体验一样，如果用户体验差或者一般，订阅量就会差。此外，订阅者也不太希望在付费内容中看到广告，但是隐藏广告可能导致布局偏移。网站需要检查用户访问内容和是否展示广告，这些检查可能又会导致延迟，内容偏移或者草稿的用户体验。
Netzwelt使用的模型中内容总是空白的，但是订阅者却看不到广告。他们调研了很多请求和存储方法，减少了延迟和布局偏移。
早点请求可能导致延迟，因此如果请求内容耗时久，网站将会展示最近一次缓存的状态。对于新的订阅者，这就有可能有一些风险，比如可能付费客户又看到了广告，那些付费过期用户可能又没有看到广告。
改善的结果
Netzwelt优化的结果非常明显，网站的检测分数在全球出版界拔得头筹。
上图是结果截图。
改善措施提高了用户体验，而且改善措施都是从业务角度出发，还提高了广告的体验、可视性以及收入。改进页面上线后，Netzwelt发现CPM提高了20%到30%，可视性提高超过75%。而且Netzwelt估计整体收入提高可能更多。上线后流量增多，可能是因为用户参与增加，而且因为体验增加页面的跳出率也降低了。虽然这些都很难量化，但改善后流量自然波动，而且还要考虑全球疫情缘故。但对于Newzet来讲，重新审查网站情况，而不只是关注CPM（CPM很容易误导人），实行的改善措施就是原因之一。核心网站指标和体验指标，结合所有的广告相关的指标，给整个情况提出了真实写照。
展望未来
Netzwelt确信在未来，没有第三方cookies，上下文targeting，通过内容，结合良好的用户体验（包含广告可是绿），就能赢得未来，成为出色的出版商。
因此寻求web网页代理速度要快，Netzwelt绝不会止步于核心网站指标，还会走的更远，尝试更多的网站新功能，比如pwa，离线内容，暗黑模式，网站分享api还有TWA(Trusted Web Activities)。
往期文章（包含部分掘金上榜文章）
《谷歌教你如何说服老板为用户体验掏钱(1)- 电商品牌的最佳实践》
《国内第一篇讲如何减少卡顿的代码级别详细文章
《前端同学如何快速制定业务大盘
《巧用火焰图快速分析链路性能》
《前端可观测性的几个基础指标-1022
《某费控独角兽公司的技术分享--如何提高用户体验》
《对前端性能优化的一些小看法
《网站性能优化技巧》
《前端应用性能应该采集的数据》
《网站性能之单页面应用的杂谈》
《web应用简析》
《裸奔的前端绿皮车
《快速搭建全链路平台
《报错/卡顿是制约产品体验的关键因素
《VIP客户用户体验-追踪方案草稿》
《四个简单例子教你提高用户体验》
版权声明
本文仅代表作者观点。
本文系作者授权发表，未经许可，不得转载。
发表评论