How do I adjust Speculation Rules API to fulfill different strategies ?
Introduction
透過 Speculation Rules API 設定 rule 進行 prerender，然後搭配 View Transition API 來做到不同頁面的完美轉場，就可以營造出「輕薄的假象」般的完美呈現～
如上 demo 所示，當 visitor 滿足條件後，瀏覽器便會在背景進行 prerender 行為，所以點擊該連結，頁面便可在彈指之間立即呈現，此再搭配 View Transition API 進行不同頁面轉場渲，營造出 web app 中順暢無礙的優質瀏覽體驗～
設置 Speculation Rules API 要非常小心，prerender 背後付出的代價其實等同 n user 瀏覽頁面，也就是說一個不小心也是有機會造成 page view 狂飆。
Issue
筆者日前於 TW Yahoo 拍賣導入上述的 Web API，監聽所有的 url，所以滿足 prerender 條件後，便能飛快地進行 next page 渲染。由於敝司 data team 會以商品頁的瀏覽紀錄作為 ML 推薦商品的主要準則，prerender 帶來的直接影響便剛好成了推薦不準確的墊背。筆者也因此成了頭號戰犯、眾矢之的。
如上所示，這是當前的 Speculation Rules API 設置，它監聽了所有的連結且 eagerness 設定 moderate，也就是說當 hover link 超過 200ms 或者 pointerdown event 發生時就會觸發 prerender 機制。
Solution
由於 visitor 可能因為 hover 到商品頁的連結且滿足觸發了 prender 的機制，所以成了失了準頭的墊背，也因此筆者選擇針對商品頁的網址進行例外處理，畢竟這種對瀏覽體驗有實質提升效益的神兵不該因為腦无決策者的無知就移除。
- LINE 4～LINE 12：監聽所有非商品頁網址，並維持 eagerness: moderate，即 hover link 超過 200ms 或者 pointerdown event 發生時就會觸發 prerender 機制。
- LINE 13～LINE 20：針對商品頁的網址設置 eagerness: conservative，即 pointer or touch down 發生時才會觸發 prerender 機制。
由於商品頁網址的特別處理，便能大大減少因為 hover 所造成的額外 background browing 行為。讓垃圾們再也找不著藉口。
Conclusion
Speculation Rules API 設定可以很寬鬆也可以依照自身當前情境進行各種細部調整，更能有效提升整體瀏覽體驗，絕對是服務不容錯過的神兵利器，真心推薦朋友試試看～