谷歌教你如何说服老板为用户体验掏钱（2）提高收入18的实践案

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