為瀏覽器提供資源提示

在「將資源載入最佳化」的上一個單元中，您已瞭解 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 可 而不是一開始就建立關係 以及探索跨來源資源的功能

Google Fonts 是 preconnect 的常見用途。Google Fonts 的建議 您preconnect至目前所屬 https://fonts.googleapis.com 網域 @font-face 宣告，以及宣告的 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 (例如字型檔案)，您必須將 crossorigin 屬性新增至 preconnect 個提示。

dns-prefetch

雖然及早開啟跨來源伺服器的連線，可以大幅提高連線速度 縮短初始網頁載入時間，這可能不是合理或不可行 一次與多個跨來源伺服器建立連線。如果你有疑慮 您可能過度使用 preconnect，但資源提示成本較低 dns-prefetch 個提示。

根據名稱，dns-prefetch 不會建立與跨來源的「連線」 而是直接執行 DNS 查詢。DNS lookup 會在網域名稱解析為基礎 IP 位址時執行。 雖然裝置層級和網路層級的 DNS 快取層 一般來說，這項程序仍會花費一些時間

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

DNS 查詢相當昂貴 而且由於其成本相對較低 某些情況下，這些 API 可能比 preconnect 更適合。於 而當您遇到 前往您認為使用者可能追蹤的其他網站。 dnstradamus 是使用 JavaScript 來自動執行此作業的工具。 並使用 Intersection Observer API 將 dns-prefetch 提示插入 當前網頁的 HTML 程式碼 (如果連至其他網站的連結捲動網頁) 檢視區域

preload

preload 指令可用來啟動資源的早期要求 轉譯網頁所需的步驟：

<link rel="preload" href="/lcp-image.jpg" as="image">

preload 指令應限制在僅發現後發現的重要資源。 最常見的用途是字型檔案、透過 @import 擷取的 CSS 檔案 或 CSS background-image 資源，表示可能為最大 內容繪製 (LCP) 候選人。在這種情況下，這些檔案 由於資源在外部參照，預先載入掃描器所發現的 再複習一下，機構節點 是所有 Google Cloud Platform 資源的根節點

與 preconnect 類似，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，有助於達成以下目標： 縮短載入時間

擷取優先順序 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 查詢。 及服務容器在運作時需要進行連線 否則就會發現這些東西。
答對了！
只會針對跨來源伺服器執行 DNS 查詢。
請再試一次。

Fetch Priority API 有什麼用途？

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

何時該使用 prefetch 提示？

針對使用者所需的所有資源或網頁，不論是否 日後才真正需要這些內容
請再試一次。
您對資源或網頁的可信度較高 需要預先擷取。
答對了！
如果使用者未明確表示偏好減少資料 。
答對了！

下一項：圖片成效

到目前為止，你可能已經很自信地掌握自己的知識 說明網頁 HTML 的一般效能考量；<head> 元素和資源提示不過，還有其他最佳化功能 是針對網頁經常載入的各種資源類型而建立的廣告。接下來 映像檔成效將會在下一個單元中說明 無論 使用者的裝置。