瀏覽器會先顯示網頁內容,之後才顯示部分內容。使用 Fetch Priority API 時,可將重要資源的初始擷取優先順序告知瀏覽器,最佳化資源載入。
觀看影片,瞭解如何:
- 在「效能」面板中找出「載入指標」「最大內容繪製 (LCP)」。
- 請查看「網路」面板中的初始和最終優先順序,以及「效能」追蹤記錄的「聯播網」追蹤。
- 使用本機覆寫值測試
<img>
、<link>
和<script>
元素中的fetchpriority
屬性。 - 瞭解
loading
和fetchpriority
屬性的差異。 - 瞭解降低資源優先順序的時機。
LCP 圖片可明顯受益於 fetchpriority="high"
。另一個提示是瀏覽器會自動提高圖片的優先順序,因此一開始就設定圖片優先順序是合理的。
詳情請參閱: