為瀏覽器提供資源提示

在「將資源載入最佳化」的上一個單元中,您已瞭解 CSS 和 JavaScript 等網頁資源可能會影響網頁載入速度,以及 可最佳化廣告單元和放送方式 加快網頁顯示速度 現在正是進化更進階資源的最佳時機 包括運用 以及資源提示

資源提示可協助開發人員進一步最佳化網頁載入時間 瀏覽器載入資源及排列資源的優先順序一組初始資源 preconnectdns-prefetch 等提示是第一個採用的。 不過,隨著時間過去,preload 和 Fetch Priority API 必須遵循 並提供額外功能

資源提示會指示瀏覽器預先執行特定動作 有助於提高載入效能資源提示可以執行 及早執行 DNS 查詢、提前連線至伺服器, 讓瀏覽器通常更容易發現這些資源

您可以在 HTML 中指定資源提示,通常位於 <head> 中 元素) 或設為 HTTP 標頭。本單元的範圍 涵蓋 preconnectdns-prefetchpreload,以及 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 APIdns-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 APIfetchpriority 屬性, 可增加資源的優先順序屬性可與 <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 有什麼用途?

指定 <link> 的相對優先順序。 <img><script> 元素。
指定目前網頁 HTML 的下載優先順序。

何時該使用 prefetch 提示?

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

下一項:圖片成效

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