為瀏覽器提供資源提示

在最佳化資源載入的最後一個單元中，您已瞭解 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 交涉。
Chrome 開發人員工具網路面板中顯示的連線時間示意圖。紅色方塊中顯示的時間涉及設定跨來源伺服器的連線，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 資源提示的作用是什麼？

開啟連至包含 DNS 查詢等跨來源伺服器的連線，並在瀏覽器可能發現額外來源時預先進行連線和 TLS 交涉。
答對了！
僅針對跨來源伺服器執行 DNS 查詢。
請再試一次。

Fetch Priority API 的功能為何？

指定目前網頁 HTML 的下載優先順序。
請再試一次。
指定 <link>、<img> 和 <script> 元素的相對優先順序。
答對了！

何時應使用 prefetch 提示？

適用於使用者需要的所有資源或頁面，無論使用者日後是否實際需要這些資源或頁面。
請再試一次。
如果您非常有信心，使用者需要預先擷取的資源或網頁。
答對了！
使用者尚未明確表示會降低數據用量。
答對了！

下一項：圖片成效

您現在可能已經開始熟悉有關網頁 HTML、<head> 元素和資源提示的一般效能注意事項。不過，對於經常載入網頁的不同資源類型，還有其他專屬最佳化措施。接下來，下一個單元會介紹圖片效能，有助您盡可能加快網站圖片載入速度，無論使用者裝置為何都沒問題。