fetchpriority 和 preload 的差異
雖然前面的文章介紹過 fetchpriority 和 preload,但還是再獨立一篇文章出來,因為網路上太多 AI 廢文了,請先搞懂瀏覽器運作,再決定有沒有必要干預它。
要理解差異就必須知道 preload scanner,因為 preload 就是這個機制下的產物,只要不懂 preload scanner 就是在亂設定。
首先瀏覽器有 preload scanner,在主要的 HTML 解析器解析 HTML 的同時,preload scanner 同時也會掃描且幫資源排序請求順序和優先級,因此只要你的關鍵資源就已經放在 HTML 裡面,且 HTML 結構的編排順序合理(關鍵資源就在 HTML 結構的上方而不是莫名其妙放到很後面但是顯示在很前面),preload scanner 和瀏覽器就會很好的幫你的資源排好網路請求。
然而問題是,有時候關鍵資源會因為某些原因放到 JS/CSS 裡面,不在 HTML 裡面,那 preload scanner 看不到,就造成多一次網路來回 FCP/LCP 成效也因此被拖累,解決方案很簡單,就是把這些不被直接看到的內容用 preload 標記讓 preload scanner 發現他的存在,就這麼單純。
在使用 preload 之前應該先檢查 HTML 結構,你應該想想你的網站有什麼奇怪的需求需要搞到和瀏覽器的預設順序不一樣,才需要手動調整,比如為什麼會有一個 LCP 元素的 HTML 結構放到後面,這不只損害效能也損害 accessibility,只要你的 HTML 結構是對的通常就不用再設定,瞎設定的結果不會比 Google 十幾年來聚集全球頂尖工程師的 preload scanner 還聰明,請 Don't fight the browser preload scanner。
講完了 preload,那 fetchpriority 在做甚麼呢?就是瀏覽器本身就已經有一套機制對不同請求排序網路優先級,fetchpriority 則提供開發者進一步「建議」瀏覽器每個請求控制優先級,因為瀏覽器不見得會聽你的建議,這個功能就這麼單純,最有用的地方大概是 LCP 內容,就這樣,沒別的了。
fetchpriority 更重要的一點是,他不只是建議,還有很多硬性規則,很多時候你根本不需要手動設定他,絕大多數情況是沒用的,因為預設就已經足夠好,或是在規則下很多設定不會起作用,這些規則在 Optimize resource loading with the Fetch Priority API 都有寫。
總結本文,preload 讓瀏覽器提早「發現」資源存在,fetchpriority 「建議」瀏覽器網路請求的優先級,僅此而已。怎麼驗證本文說的是否正確呢,就是去看看那些 big tech 的網站看他們怎麼用
- google.com: preload JS
- about.google: preload font
- cloud.google.com: no preload
- store.google.com: no preload
- firefox.com: no preload
- openai.com: preload JS
- nvidia.com: preload font and js
- netflix.com: preload font and JS
- claude.com: preload 放在 JS 裡面的 LCP 圖片,JS/CSS chunks
- tesla.com: 首屏是 JS 輪播圖,因此 preload 所有圖片
結論很簡單,preload 最多就是 font 和 JS 而已,首屏特殊內容再 preload 一下,你不會說你的理解比 big tech 甚至瀏覽器開發商還好吧。fetchpriority 就不再一一寫出來了,一句話就是比用的很少的 preload 更少。
相關 web.dev 文章,只要讀者具備閱讀能力,看完這兩篇 web.dev 就能得出和本文一樣的結論:
這兩個表格讀之前一定要先看上下兩個藍框解釋,因為這表格格式是他自創的,不看解釋你會看不懂。第一個表格說預設的優先級,第二個表格說設定 fetchpriority 之後優先級的改變,上下箭頭代表從預設的圓圈設定 high/low 之後會變成哪一級。將每一種資源的預設、調高、調低的結果一一對應一遍,你會發現根本不需要設定,只要 HTML 結構正確,預設值就是最已經好的了,而且就算手動設定也沒用,規則鎖死了瀏覽器不會理建議值。唯一需要設定的只有 LCP 圖片手動指定讓 layout 之前就確定這是 high,也就是說,這 API 根本不用管他,也再一次證實了為什麼那些 big tech 網站幾乎沒用 fetchpriority。
我不反對 AI,然而比起未來 AI 統治人類或什麼 AI 毀滅世界的說法,此時此刻我直接感受到的是網路會先被 AI slop 淹沒。不過反過來說,AI 寫出一堆垃圾廢文代表他的訓練資料也是一堆垃圾廢文,搞不好還真的就一堆人不具備閱讀能力。