在最佳化資源載入的最後一個單元中,您已瞭解 CSS 和 JavaScript 等各種網頁資源如何影響網頁載入速度,以及如何改善網頁和提供方式以加快網頁轉譯速度。現在正是進一步進階資源載入的大好時機,這包括使用資源提示,協助瀏覽器加快載入速度。
資源提示可協助開發人員告知瀏覽器如何載入資源並決定優先順序,進一步縮短網頁載入時間。最先導入一組初始資源提示 (例如 preconnect
和 dns-prefetch
)。不過,隨著時間過去,preload
和 Fetch Priority API 仍能提供額外功能。
資源提示可指示瀏覽器預先執行可提升載入效能的特定動作。資源提示可以執行多項動作,例如執行早期 DNS 查詢、預先連線至伺服器,甚至可以在瀏覽器一般發現資源之前擷取資源。
資源提示可在 HTML 中指定 (通常位於 <head>
元素較早),或設為 HTTP 標頭。本單元涵蓋 preconnect
、dns-prefetch
和 preload
,以及 prefetch
提供的推測擷取行為。
preconnect
preconnect
提示可用來從擷取重要資源的其他位置連線至另一個來源。例如,您可能會將圖片或資產託管於 CDN 或其他跨來源:
<link rel="preconnect" href="https://example.com">
使用 preconnect
即可預期瀏覽器計劃於不久後連線至特定的跨來源伺服器,且瀏覽器應盡快開啟該連線,最好在等待 HTML 剖析器或預先載入掃描器完成此操作。
如果網頁上有大量的跨來源資源,請針對目前頁面最重要的資源使用 preconnect
。
![Chrome 開發人員工具網路面板中的資源連線時間螢幕截圖。連線設定包括停機時間、Proxy 交涉、DNS 查詢、連線設定和 TLS 交涉。](https://web.developers.google.cn/static/learn/performance/resource-hints/image/fig-1.png?authuser=6&hl=zh-tw)
preconnect
可更快建立連線,不必在發現跨來源資源時建立連線。preconnect
的常見用途是 Google 字型。Google Fonts 建議您將 preconnect
設為提供 @font-face
宣告的 https://fonts.googleapis.com
網域,以及提供字型檔案的 https://fonts.gstatic.com
網域。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
crossorigin
屬性可用來指出是否需要透過跨源資源共享 (CORS) 擷取資源。使用 preconnect
提示時,如果從來源下載的資源會使用 CORS (例如字型檔案),您必須在 preconnect
提示中加入 crossorigin
屬性。
dns-prefetch
雖然提早開啟跨來源伺服器的連線可以大幅縮短初始頁面載入時間,但不是合理或無法一次與多個跨來源伺服器建立連線。如果您擔心自己可能過度使用 preconnect
,dns-prefetch
提示就是成本較低的資源提示。
根據其名稱,dns-prefetch
不會與跨來源伺服器建立連線,只會事先執行 DNS 查詢。網域名稱解析至其基礎 IP 位址時,就會發生 DNS 查詢。雖然裝置和網路層級的 DNS 快取層有助於縮短處理速度,但還是需要一點時間才能完成。
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
DNS 查詢的費用相當低廉,且由於 DNS 查詢的費用較低,在某些情況下可能會比 preconnect
更適合。尤其是在您認為使用者可能前往的其他網站連結的情況下,建議您使用提示資源。dnstradamus 利用 JavaScript 自動執行此操作的其中一項工具,並且使用 Intersection Observer API,在使用者將連往其他網站的連結時,插入目前頁面的 HTML 提示。dns-prefetch
preload
preload
指令的用途是針對轉譯網頁所需的資源啟動早期要求:
<link rel="preload" href="/lcp-image.jpg" as="image">
preload
指令僅限於最近發現的重要資源。最常見的用途是字型檔案、透過 @import
宣告擷取的 CSS 檔案,或是可能為最大內容繪製 (LCP) 候選項目的 CSS background-image
資源。在這種情況下,由於外部資源會參照這些資源,因此預先載入掃描器無法探索這些檔案。
與 preconnect
類似,如果您要預先載入 CORS 資源 (例如字型),preload
指令需要 crossorigin
屬性。如果您未新增 crossorigin
屬性,或為非 CORS 要求新增該屬性,則瀏覽器會下載資源「兩次」,這會浪費在其他資源上花費的頻寬。
<link rel="preload" href="/font.woff2" as="font" crossorigin>
在上述 HTML 程式碼片段中,即使 /font.woff2
位於相同網域,瀏覽器也會指示瀏覽器使用 CORS 要求預先載入 /font.woff2
。
prefetch
prefetch
指令的用途是針對可能用於日後導覽的資源發出低優先順序要求:
<link rel="prefetch" href="/next-page.css" as="style">
這個指令與 preload
指令的格式大致相同,只有 <link>
元素的 rel
屬性會改用 "prefetch"
的值。但與 preload
指令不同的是,prefetch
主要進行推測,也就是您是否要為日後的導覽活動啟動資源擷取作業,以便日後 (不一定發生) 進行導覽。
prefetch
有時很有助益。例如,如果您發現大部分使用者會在網站上完成的使用者流程,那麼為日後的網頁指定轉譯關鍵資源的 prefetch
,都有助於縮短這些網頁的載入時間。
擷取 Priority API
您可以使用 Fetch Priority API
透過其 fetchpriority
屬性來提高資源的優先順序。您可以將屬性與 <link>
、<img>
和 <script>
元素搭配使用。
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
根據預設,圖片擷取的優先順序較低。完成版面配置後,如果圖片位於初始可視區域內,優先順序就會提高為「高」。在上述 HTML 程式碼片段中,fetchpriority
會立即指示瀏覽器以「高」優先順序下載較大的 LCP 圖片,下載重要性較低的縮圖圖片則會以較低的優先順序下載。
新式瀏覽器會分兩階段載入資源。第一階段會保留重要資源使用,並在所有封鎖指令碼都下載並執行後結束。在這個階段,「低」優先順序的資源可能會延遲下載。使用 fetchpriority="high"
即可提高資源的優先順序,讓瀏覽器在第一階段下載資源。
資源提示示範
學以致用
preconnect
資源提示的作用是什麼?
Fetch Priority API 的功能為何?
<link>
、<img>
和 <script>
元素的相對優先順序。
何時應使用 prefetch
提示?
下一項:圖片成效
您現在可能已經開始熟悉有關網頁 HTML、<head>
元素和資源提示的一般效能注意事項。不過,對於經常載入網頁的不同資源類型,還有其他專屬最佳化措施。接下來,下一個單元會介紹圖片效能,有助您盡可能加快網站圖片載入速度,無論使用者裝置為何都沒問題。