Monrif 如何通过 Speculation Rules 预渲染和往返缓存将互动度提高了 8.9%,并将 LCP 缩短了 17.9%

Fabrizio Guerra
Fabrizio Guerra
Gianni Onnis
Gianni Onnis

发布时间:2025 年 12 月 9 日

Monrif 是意大利领先的出版集团之一,旗下运营着 Il Resto del CarlinoIl GiornoLa NazioneQN Quotidiano.net 等高流量新闻品牌。数百万用户每次会话都会访问数十篇文章,因此优化导航速度和网页加载时间对于留住读者和提高读者互动度至关重要。

2025 年初,Monrif 启动了一项性能改进计划,旨在通过采用有效的预渲染策略(使用 Speculation Rules API)来提升 Largest Contentful Paint (LCP)。通过确定访问次数最多的文章页面并为这些路径应用预渲染,Monrif 实现了 LCP 提升 17.9%,从而显著提升了性能,并为用户带来了更友好的新闻体验。此外,这还显著提升了用户互动度,在某些细分群组中,用户互动度最高提升了 8.9%

在预渲染取得成功后,该团队还实现了对往返缓存 (bfcache) 的支持。这样一来,回访者在返回之前访问过的网页时,几乎可以立即加载网页,从而进一步提升浏览体验的流畅度和响应速度。

我们的起点

在推出之前,内部测试和 Chrome 用户体验报告 (CrUX) 数据表明,许多 Monrif 网页(尤其是文章和首页视图)的 LCP 得分并不理想。

在 2025 年 3 月之前开始优化工作之前,多个影视平台的首页浏览的第 75 百分位 LCP 范围为 2.333 秒到 2.419 秒。虽然从技术上讲,该值在“良好”阈值(2.5 秒或更短)范围内,但在高频导航模式下,仍有提升用户感知性能的空间。

我们如何改进 LCP

为了减少导航期间的延迟时间,Monrif 使用 Speculation Rules API 在所有桌面版和移动版网域上实现了推测性预渲染。该策略旨在平衡性能影响与技术安全性,仅当链接元素与特定选择器和条件匹配时才允许预渲染。

{
  "prerender": [
    {
      "where": {
        "and": [
          {
            "not": {
              "selector_matches": "[rel~=nofollow]"
            }
          },
          {
            "not": {
              "selector_matches": ".no-prerender"
            }
          },
          {
            "selector_matches": "a"
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}

对于任何链接(某些链接除外),热切程度都设置为 moderate。此设置会根据悬停(在桌面设备上)和基于视口启发式方法(在移动设备上)进行推测。这种方法使团队能够将预渲染范围控制在最可能需要的链接上,从而最大限度地减少资源使用量。

成果

为了评估预渲染的影响,我们使用 GA4 数据和 CrUX 指标,重点分析了 Monrif 的三份主要出版物,即 Il Resto del CarlinoIl GiornoLa Nazione

虽然桌面设备和移动设备上都启用了预渲染,但桌面设备上的发生率明显更高,因为 "moderate" 允许在悬停时将更多链接纳入范围。例如,在 La Nazione 上,13.9% 的网页(桌面版)浏览触发了预渲染,而移动版网页的这一比例仅为 2.9%。因此,桌面平台上的性能改进更加明显且一致,这成为了本研究的主要范围。

截至 2025 年 5 月底,所有三家媒体的 LCP 表现均有显著改善,如 CrUX 桌面设备数据显示:

发布 LCP 2025 年 3 月 LCP 最小值(日期范围) LCP Jun 2025 最大改进
Il Resto del Carlino 2419 毫秒 1986 年(5 月 3 日至 5 月 30 日) 1998 毫秒 −433 毫秒(−17.9%)
Il Giorno 2379 毫秒 1972 年(5 月 10 日至 6 月 5 日) 2068 毫秒 −407 毫秒(−17.1%)
La Nazione 2333 毫秒 1983ms(5 月 3 日至 5 月 30 日) 2140 毫秒 -350 毫秒(-15.0%)

这些改进与预渲染活动的峰值密切相关。下表显示了每种桌面版网站的最高预渲染次数(按数量和相对于平均值的百分比增幅):

发布 预渲染发生次数上限 最大限度地预渲染 activity
Il Resto del Carlino 2025 年 5 月 22 日 比平均水平高出 39.5%
Il Giorno 2025 年 6 月 5 日 比平均值高出 36.3%
La Nazione 2025 年 6 月 5 日 比平均水平高出 40.4%

在所有影视内容中,最低 LCP 值与最高预渲染事件的时间范围高度重叠,尤其是在 2025 年 5 月中旬至 6 月初之间。这种同步性表明,推测性预渲染与实际性能提升之间存在很强的相关性。

互动效应

在 LCP 提升的同时,Monrif 在预渲染推出期间记录到用户互动度有了可衡量的提高。通过分析 Il Resto del CarlinoIl GiornoLa Nazione 的 GA4 数据,我们发现,在预渲染最活跃的周内,互动率显著提高。

下表详细列出了桌面设备上预渲染强度、LCP 改进和互动度提升之间的相关性:

发布 最大限度地预渲染 activity LCP 最小范围 互动提升幅度*
Il Resto del Carlino 2025 年 5 月 22 日(+39.5%) 5 月 3 日至 5 月 30 日 +8.9%
Il Giorno 2025 年 6 月 5 日(+36.3%) 5 月 10 日至 6 月 5 日 +6.7%
La Nazione 2025 年 6 月 5 日(+40.4%) 5 月 3 日至 5 月 30 日 +5.3%
*互动度提升:与 2025 年 3 月基准(预渲染前)相比,感兴趣的会话率(如 GA4 中所定义)的相对提升。

虽然互动度受多种因素影响,但紧密的时间相关性表明,预渲染带来的感知性能提升可促使用户进行更深入、更持久的互动。

广告影响

虽然 Monrif 的主要目标是改善用户体验和效果,但这项举措似乎也对广告指标产生了积极影响。

特别是,公开市场中的可见度(衡量广告可见度和广告资源质量的关键指标)在预渲染功能推出期间呈现出小幅但持续的提升。在三个核心刊物中,平均可视性提高了 1.03%,紧随预渲染活动最频繁的周之后。与效果和互动分析一样,这些数据侧重于桌面设备流量,以确保数据集的一致性。

广告素材加载时间为 0 - 500 毫秒的平均百分比
导航类型 navigate prerender 增量
桌面设备 76.1% 84.1% 10.4%
移动设备 66.6% 78.0% 17.1%

虽然从绝对意义上来说,这种改进并不显著,但却意义重大:即使可视性略有提高,也能提升广告资源的感知质量、提高填充率并增强广告客户的信任度。

尤其值得注意的是,这与性能增强功能息息相关。通过缩短 LCP 和提高导航速度,Monrif 帮助网页更快地加载,并让用户保持更高的参与度。这反过来会增加广告在视口中停留的时间,从而提高广告的曝光度。

通过 bfcache 改进即时导航

除了预渲染之外,Monrif 还致力于解锁对浏览器往返缓存 (bfcache) 的支持。这是一种性能机制,可在用户使用浏览器的“返回”或“前进”按钮导航时实现即时网页恢复。

为了确保与 bfcache 兼容,开发者解决了几个常见的阻碍因素:

  • 移除了 unload 事件监听器,因为这些监听器不可靠,很快就会被弃用
  • 采用了严格的 Permissions-Policy 标头,以防止重新引入 unload 事件监听器(尤其是第三方)。
  • 实现了 pagehide 事件监听器,以安全地关闭连接(例如 IndexedDB、WebSocket)。
  • 除非绝对必要,否则避免使用 Cache-Control: no-store,因为在许多情况下,这会阻止 bfcache

虽然该团队尚未获得足够的数据来以与预渲染相同的统计严谨性隔离 bfcache 影响,但早期测试和 Chrome 开发者工具轨迹证实,兼容的导航已从内存中完全恢复,从而在返回到之前查看过的文章时实现了亚秒级加载时间。

总结

通过集成推测性预渲染,Monrif 显著改进了其新闻网站上的 LCP,将加载时间缩短了 17.9%。这些增强功能不仅提升了感知性能,还带来了可衡量的用户互动度提升,涵盖了其核心游戏。

此外,此案例表明,以用户为中心的性能优化可以通过改善影响广告展示方式和时间的条件,带来下游创收效益。

此案例研究展示了预渲染等现代导航优化技术如何大规模提升核心网页指标,即使在内容丰富的平台上也是如此,并转化为可衡量的用户体验和业务成果改进。