日本Yahoo如何實驗網站前端效能優化方法，用有限成本同時提升使用者體驗與廣告收入

新聞網站是日本Yahoo龐大流量集散地，累積7,770萬月活躍讀者，更是母公司LYC一年3千億日圓營收的展示型廣告業務中，不可或缺的重要廣告通路。今年LYC年度技術大會中，日本Yahoo分享自家提升網站前端效能的實驗歷程，探索如何用盡可能有限的資源，來改善使用者體驗及增加廣告收入。

日本Yahoo廣告工程師Imamiya Masaki說，這並不是他們第一次，利用提升網站前端效能來增加廣告收入。他們曾經針對Google提出的Core Web Vitals網站效能指標來優化，提升高達15%單一工作階段網頁瀏覽次數（Page View）。他們還在導入Back-Forward Cache（往返快取）技術後，提升高達9%的廣告營收。

這次，他們則希望強化預先渲染技術（Pre-render），來加速網站內容顯示速度，並觀察，內容顯示效率提升，能否增加閱讀量、停留時間、點擊率，或減少跳出率，進而對廣告業務指標做出貢獻。

預渲染技術是，預測可能即將載入的資源，提前請求並渲染頁面和執行JavaScript。如此，使用者點擊連結或開啟新內容時，瀏覽器就能立即呈現完整內容。這種做法的代價是，若預測使用者點擊不夠準確，會導致預先渲染內容，最後卻不會呈現給使用者，白白增加資源消耗。為了衡量這項代價，日本Yahoo在實驗中追蹤「預渲染命中率」指標，亦即「使用者真正看到的」預渲染項目數占總體比例。

日本Yahoo工程團隊導入Google開發的Speculation Rules API，來A/B測試不同預渲染預測規則下，網站前端表現及廣告收入如何受影響。這個API允許開發者透過宣告式JSON語法定義預渲染邏輯，包括針對哪些連結生效、需排除哪些條件等。開發者還可以調整Eagerness設定，決定不同觸發預渲染的規則。Immediate規則是立即預渲染下一個頁面；Moderate規則是滑鼠游標移動到連結上200毫秒後開始預渲染；Conservative規則則是在滑鼠按鈕按下（而非按下後釋放）連結後預渲染。

第一次實驗：在首頁預渲染新聞文章頁面

首次預渲染實驗對象是，使用者新聞網站首頁時，預先渲染個別新聞網站。他們採取Moderate規則，當使用者游標停留在文章連結200毫秒，即開始預渲染。結果顯示，點選連結後，平均畫面跳轉時間從0.8秒縮短至0.4秒。使用者設備性能不佳或網路連線不穩時，可以減少更多時間。

然而，當日本Yahoo工程團隊發現，使用者行為數據與廣告收入等業務指標並未明顯變化。不只如此，預渲染命中率只有15%，造成浪費許多資源浪費。他們推測，因為新聞首頁基礎延遲已經很低、文章頁廣告內容未預渲染、新聞連結密集排列導致大量觸發預渲染等原因，無法判斷Moderate規則是否有作用。

第二次實驗：預渲染新聞文章頁面的廣告內容

日本Yahoo工程團隊根據這些教訓，來設計第二次實驗。這次，他們將實驗對象聚焦到「閱讀全文」連結的點擊後行為，像是頁面重新整理並重新顯示文章內容，以及廣告內容。

這種設計下，觸發預渲染預測的前端UI元件只有閱讀全文連結，較不易造成誤判，也能測試更耗費資源的Immediate觸發規則。不只如此，他們希望廣告內容加速顯示，能吸引更多的讀者注意力。

新聞文章頁面中，有上方大型廣告，以及下方小型廣告兩種版位。下方小型廣告格式簡單、請求處理通訊量較少，採取預先處理廣告庫載入、廣告請求處理、廣告顯示的完整流程。上方大型廣告格式包括圖片及影片，且需要呼叫多個伺服器，包括不支援預渲染的伺服器，只能預先處理「廣告請求處理」階段。

點擊「閱讀全文」（紅色框）連結後，文章頁面會重新整理並顯示出來新文章內容及廣告內容（紫色框）。第二次實驗中，廣告內容也會被預渲染。

實驗結果，下方小型廣告，從原本平均3秒顯示時間縮短至僅0.3至0.5秒。上方大型廣告顯示時間，則從原本平均4秒降至約1.6秒。命中率方面，Moderate規則的效果達到44%，而Immediate規則的效果也提升至31%，相較於前一輪的15%已有顯著進步。

他們發現，並非所有廣告類型都出現業務指標提升。下方小型廣告雖然顯示加速，但業務指標並無變化。上方廣告中，僅支援影片格式的版本，在Immediate規則下，出現具統計意義的2至3%點擊率（CTR）增幅。以CTR通常只有個位數的新聞展示型廣告而言，幅度不小。

日本Yahoo新聞工程師Kiraku Tomoki表示，儘管先前提升網站效能時，都能為廣告收入帶來效益，不過在大規模導入新的網站效能提升法時，工程團隊仍謹慎透過兩輪A/B實驗，來找出確實能帶來廣告收入的預渲染模式。這次實驗中，他們意識到單純提升顯示速度，未必會提升使用者與廣告互動的行為。內容類型、廣告版位與視覺設計等因素，可能同樣甚至更為關鍵。他們推測，預渲染影片廣告之所以有效，可能為使用者帶來更強烈的感官體驗，進而帶動更多點擊行為。他們也透過實驗鎖定了這個能帶來收入的模式，並計畫正式導入影片廣告預渲染做法。