Monrif 如何運用推測規則預先算繪和往返快取,將參與度提高 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 找出最常造訪的文章頁面,並為這些路徑套用預先算繪,結果最大內容繪製時間最多縮短 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 效能都大幅提升,Chrome 使用者體驗報告的電腦版資料顯示:

出版 LCP Mar 2025 LCP Min (日期範圍) LCP Jun 2025 最大改善幅度
Il Resto del Carlino 2419 毫秒 1986ms (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%)

這些改善措施與預先算繪活動的尖峰期密切相關。下表顯示桌機上每個網站的最高預先算繪次數,以及與平均次數相比的增加量和百分比:

出版 預先算繪發生次數上限 預先算繪活動上限
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 月初。這種同步性表示推測性預先算繪與實際效能提升之間有很強的關聯性。

參與度效應

在推出預先算繪功能的同時,Monrif 記錄到使用者參與度明顯提升。分析 Il Resto del CarlinoIl GiornoLa Nazione 的 GA4 資料後,我們發現預先算繪功能最活躍的幾週,參與度顯著提升。

以下是電腦版預先算繪強度、LCP 改善幅度與參與度提升之間的關聯性:

出版 預先算繪活動上限 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%

雖然就絕對值而言,這項改善幅度不大,但意義重大:即使可視度只提升一點,也能提高廣告空間的感知品質、增加刊登率,並提升廣告主信任度。

特別值得一提的是,這與效能提升息息相關。Monrif 縮短 LCP 並提升瀏覽速度,讓網頁載入速度更快,使用者參與度也更高。進而提高廣告在可視區域中停留的時間,以及獲得曝光的機會。

使用 bfcache 改善即時導覽功能

除了預先算繪,Monrif 也致力於支援瀏覽器的往返快取 (bfcache),這項效能機制可讓使用者透過瀏覽器的返回或前進按鈕瀏覽網頁時,立即還原網頁。

為確保與 bfcache 相容,開發人員解決了幾個常見的阻礙:

  • 移除 unload 事件監聽器,因為這些監聽器不可靠,且即將淘汰
  • 採用嚴格的 Permissions-Policy 標頭,防止重新導入 unload 事件監聽器 (尤其是第三方)。
  • 實作 pagehide 事件監聽器,安全地關閉連線 (例如 IndexedDB、WebSocket)。
  • 除非絕對必要,否則請避免使用 Cache-Control: no-store,因為這在許多情況下會封鎖 bfcache

雖然團隊尚未取得足夠資料,能以與預先算繪相同的統計嚴謹度,判斷 bfcache 的影響,但早期測試和 Chrome 開發人員工具追蹤記錄證實,相容的導覽作業已從記憶體完整還原,因此在返回先前瀏覽的文章時,載入時間不到一秒。

結論

Monrif 整合推測預先算繪功能後,新聞網站的 LCP 大幅改善,載入時間最多縮短 17.9%。這些強化功能不僅提升了使用者體驗,也讓核心遊戲的使用者參與度顯著提升。

此外,這個案例也顯示,以使用者為中心的成效最佳化作業,可改善影響廣告顯示方式和時間的條件,進而產生後續的營利效益。

本案例研究說明,即使在內容豐富的平台上,預先算繪等現代導覽最佳化功能也能大規模提升網站體驗核心指標,並轉化為可衡量的使用者體驗和業務成果改善。