NDTV 针对网页指标进行了优化,从而增强了用户体验,从而提升留存率。
NDTV 是印度一家领先的新闻电视台和网站。通过实施 Web Vitals 计划,他们在短短一个月内将自己最重要的用户指标之一 Largest Contentful Paint (LCP) 提高了 55%。在这方面 跳出率降低了 50%
55%
LCP 提升
50%
跳出率降幅
突出显示机会
NDTV 每月有近 2 亿唯一身份用户,因此必须针对用户体验质量进行优化。虽然其互动率远高于行业平均水平,且在同行中最高,但 NDTV 团队仍然认为仍有改进空间,并决定投资 Web Vitals 以及其他产品改进,以进一步提高互动率。
他们采用的方法
NDTV 团队借助 PageSpeed Insights、web.dev/measure 和 WebPageTest 等工具分析了网站上有待改进的方面。这些明确定义的优化提示有助于他们重新确定具有重大影响的任务的优先级,并在改进核心网页指标方面立即取得成效。优化内容包括:
- 通过延迟第三方请求(包括针对非首屏广告位的广告调用和针对非首屏广告位的社交网络嵌入)优先展示最大的内容版块。
- 将静态内容的缓存时间从几分钟增加到 30 天。
-
使用
font-display
在下载字体时更快地显示文本。 - 为图标使用矢量图形,而不是使用 TrueType 字体 (TTF)。
- 延迟加载 JavaScript 和 CSS:使用尽可能少的 JS 和 CSS 加载网页,然后在页面滚动时延迟加载剩余的 JS 和 CSS。
- 预先连接到交付关键资产的源站。
![优化摘要:Largest Contentful Paint、Cach、CSS、矢量图形、延迟加载的 JS 和 CSS、预连接。](https://web.developers.google.cn/static/case-studies/ndtv/image/a-summary-the-optimizati-b938d496646d5.png?authuser=5&hl=sr)
影响
网页指标为团队提供了以指标为导向的信号,以便加快改善用户体验的过程。
在开始优化项目之前,NDTV 团队将 LCP 得分作为基准,将 LCP 得分设为 3.0 秒(根据 Chrome 用户体验报告字段数据,结果显示用户的第 75 百分位)。 完成优化项目后,缩短时间缩短至 1.6 秒。 此外,他们还将其 Cumulative Layout Shift (CLS) 得分降到了 0.05。WebPageTest 上的其他指标(例如“First Byte Time”和“有效使用 CDN”)也已提高为 A 级。
![CLS 得分为 0.05。](https://web.developers.google.cn/static/case-studies/ndtv/image/005-cls-score-63ecddcee9427.png?authuser=5&hl=sr)
投资回报率
尽管 ndtv.com 非常复杂和深度,但得益于团队长期关注性能和用户体验最佳实践,该网站已经取得了令人满意的 FID 和 CLS 得分。为了进一步改善用户体验,该团队重点关注 LCP,并且在开始优化工作后的几周内达到了阈值。
整体业务成效
- 针对核心网页指标进行优化后,LCP 提高了 55%。
- 针对 Core Web Vitals 进行优化及其他产品更改后,网站上的跳出率降低了 50%。
- 直接提高了内容的互动度和使用量,并相应地提高了网站的收入。
![LCP 提升 55%。跳出率降低了 50%。提高了互动度和使用量。](https://web.developers.google.cn/static/case-studies/ndtv/image/55-improvement-lcp-50-bbfb39b0c8352.png?authuser=5&hl=sr)
NDTV 一直以来都遵循最佳做法来提供优质的用户体验。我们目前考虑将衡量网页指标作为产品开发不可或缺的一部分,而我们发现的互动提升情况使其能够带来可观的投资回报率。
Kawaljit Singh Bedi,NDTV Group 首席技术和产品官
如需了解印度和东南亚的更多成功案例,请参阅在 Web 上扩展案例研究页面。