一起看 I/O | Core Web Vitals 与业务影响

您是否还在试图说服利益相关方采用 Core Web Vitals？或者说您是否想知道 Core Web Vitals 能否为您的业务带来实际帮助？本文将通过探讨已经在用户和业务方面产生积极影响的公司案例，帮助您了解 Core Web Vitals 如何与关键业务指标相关联。

• Core Web Vitals
  https://web.dev/learn-web-vitals/
  
  

• 腾讯视频链接
  
  https://v.qq.com/x/page/i3248nbt68n.html
• Bilibili 视频链接
  https://www.bilibili.com/video/BV1oV411j7f1/

团队中不同的利益相关方可能会有不同的优先级标准。而 Core Web Vitals 可通过专注于优化以用户为中心的指标及由此带来的业务增长，让所有利益相关方达成共识。

实现优秀 Core Web Vitals 的途径因网站而异，具体取决于它们在性能探索之旅中所处的位置和网站设计的复杂程度。优秀的 Core Web Vitals 可以是短期容易实现目标的有效探索结果，亦或是为了解决挑战性需求的复杂方案。无论花费的时间长短，决策者都应将其视为对业务增长的长期投资。只有为用户提供快速、流畅、满意的使用体验，才能将用户转化为忠实的回头客。对于产品经理而言，性能应该是定义新产品功能质量及成功与否的重要标准。对于开发者而言，面对有意思的挑战并打造出卓越的产品，也是一个富有成就感的过程。

• 将 Core Web Vitals 纳入排名衡量因素
  https://developers.google.cn/search/blog/2021/04/more-details-page-experience

技巧 

• 服务器端渲染关键 HTML。

• 减少阻塞渲染的 Javascript。

• 图像优化技术。

• 调整主视觉资源；延迟加载非关键资源。

重要知识点 

• A/B Test 是衡量价值投资的最佳方式。

• A/B Test 应在服务器端进行。

iCook 

技巧 

• 减少广告素材尺寸的变化，在 UI 中预先分配广告资源的固定尺寸。

• 优化广告脚本加载逻辑，优先加载头部竞价 (Header Bidding) 并延迟加载非关键 JS。

重要知识点 

填充率可能会受到影响，但最终收入会随着广告可见度的提高而增加。

Tokopedia 

Tokopedia 的 LCP 提高了 55%，平均会话时间延长了 23%。

• 服务器端渲染 (SSR) LCP 元素。

• 预加载 LCP 元素。

• 图像优化 (压缩、WebP、延迟加载非关键图像)。

重要知识点 

• 构建性能监测信息中心以监测团队间的工作进展和效果。
• 尝试不同的渲染技术 (例如，对比 SSR LCP 元素、SSR 首屏内容和完整客户端渲染)。

以上结果都是通过解决相对简单的目标而实现的，例如:

• 图像优化
  https://web.dev/fast/#i18n.paths.fast.topics.optimize_your_images
• JavaScript 优化
  https://web.dev/optimize-lcp/
• 广告和动态内容
  https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions
• 指定长宽比
  https://web.dev/image-aspect-ratio/

• Web Vitals 指南
  https://web.dev/learn-web-vitals
• PageSpeed Insights
  https://developers.google.cn/speed/pagespeed/insights/

  
  

• 纳入 Core Web Vitals 指标后，腾讯视频 (Tencent Video) 的视频点击率提高了 70%。
• Cdiscount 改善了三大指标后，其黑色星期五促销的收入提高了 6%。
• Wix 的移动设备源同比增长了 250%。
• Nykaa 的 LCP 提高了 40%，在二、三线城市中的自然流量提高了 28%。
• NIKKEI STYLE 的 LCP 提高了 18%，从而将每次访问时的网页浏览量提高了 9%。
• NDTV 在减少 50% 的 LCP，以及优化了其他产品后，跳出率降低了 50%:
  https://web.dev/ndtv

• 完整的案例研究显示，Agrofy Market 的 LCP 提升 70% 后，加载弃用率下降了 76%:

  https://web.dev/agrofy/
• Flipkart 在提升 Core Web Vitals 指标后，跳出率减少了 2.6%。
• Ameba Manga 在将 CLS 得分提高 10 倍后，漫画的阅读数量提高了 2 到 3 倍。
• Yahoo! Japan 优化了 CLS 后，将糟糕页面数量减少 98%，每次会话的网页浏览量提高 15%:
  https://web.dev/yahoo-japan-news/
• AliExpress 将 CLS 提高了 10 倍、LCP 提高了 2 倍，其跳出率减少了 15%。

首先使用相关工具评估您的网站！您可以使用由 Google 和其他供应商提供的多种工具。

Google 工具 

• Google Search Console 

• PageSpeed insights

• Web Vitals JS

• Chrome UX Report

• Cloudflare
• New Relic
• Akamai
• Calibre
• WebPageTest
• Blue Triangle
• Sentry
• SpeedCurve

• 告知项目成员采用 Core Web Vitals 改善用户体验的重要性，以及其与公司业务指标的相关性。
• 在团队内部开展小型测试。
• 在项目成员之间建立共同目标，以改善各个团队的 Core Web Vitals。

• 确定优先级: 选择一个高流量和/或值得转化的网页，让结果具有意义 (例如广告落地页、转化页或热门页面)。
• A/B 测试: 在服务器端进行测试，以省去渲染成本。比较优化测试和未优化测试间的结果差异。
• 监测: 连续进行监测，防止出现回归。

https://web.dev/handbook/quick-start/

----------------------------
本文由新墨整理并发布。转载来自互联网，若侵权则删除！
新墨5年开发经验，45名团队成员，上线已达100+产品，于北京和成都2个城市提供技术开发服务。致力于提供APP开发,小程序开发,微信开发,IOT物联网开发,电商系统开发,教育系统开发,H5开发,游戏开发,用户体验设计,课件设计