Google的優先提示功能改善CWV
最後更新日期
優先提示解決的問題
發布者可以使用<link rel=preload>來加快網頁資源的發現</a>速度,也可以通過使用「async」和「defer」屬性來指定腳本的下載和執行時間。但是,發布者無法向瀏覽器發送信號告知哪些資源重要,哪些不重要。Google提供了Priority Hints解決以下問題的例子: 「視口內的主要圖像起初優先級較低。<br/><br/>在版面配置完成後,Chrome發現</a>它們在視口內並增加了其優先級(不幸的是,開發工具</a>只顯示最終優先級- WebPageTest將顯示兩者)。 這通常會延遲圖像的加載時間。在標記中提供優先級提示可以使圖像以高優先級開始並更早地開始加載。<br/><br/> 瀏覽器分配CSS和字型高優先級,但並非所有此類資源都同等重要或必需用於LCP。您可以使用優先級提示降低其中某些資源的優先級。」
| 優勢 | 劣勢 | |
|---|---|---|
| 機會 |
|
|
| 威脅 |
|
|
表: 強弱危機分析(最後更新: 2021-10-26)
可能被竞争对手模仿
在HTML</a>中,組成網頁的部分被稱為元素。這些可以是div、標題、段落標籤、圖片標籤、連結元素等等。我很確定所有被稱為HTML</a>標籤的東西實際上都是HTML</a>元素,這是一個容易記住元素是什麼的方法。 每個元素都可以使用所謂的屬性來修改。還記得nofollow屬性嗎?nofollow屬性用於修改<pre><code><a></code></pre>元素。importance屬性通過給瀏覽器一個提示,告訴它某個網頁元素是否重要,不重要或者由瀏覽器自行決定來修改網頁元素。importance屬性被稱為優先級提示。該屬性向瀏覽器提供了一個提示,指定某個元素是否重要(或不重要),並給予它更高(或更低)的優先級。"importance" 屬性可以傳達以下值:該 "importance" 屬性資源提示適用於以下元素:link img script iframe
資源提示如何改善核心網頁指標
瀏覽器會自動計算下載資源的優先級。像是目前的工具</a>中,「preload」屬性可以提供對重要資源(例如字型和圖片)的下載提示。其他的資源提示包括「async」和「defer」。<br/><br/>這些都有助於加快整個檔的下載速度,使檔能更快地顯示出來並實現互動功能。但瀏覽器仍然需要決定哪個資源更重要。 根據Web.dev的說法,預加載的圖片將會被下載,但瀏覽器會給予低優先級並延遲處理。<br/><br/>以下是解釋: 「以最大內容</a>塗抹(Largest Contentful Paint)圖片為例,即使預加載了該圖片,它仍然會被賦予低優先級。 如果其他早期低優先級的資源推遲了該圖片的處理時間,使用Priority Hints(優先提示)仍可幫助提高該圖片被加載的時間點。」 一個關於 importance 屬性有用之例子是當網頁在視口(瀏覽器中訪客當前可見的部分)頂部有一個圖片輪播。<br/><br/>如果這個輪播包含了五張圖片,則可以將它們全部預加載。但如果第一張圖片被指定為「高」重要性</a>屬性,其他圖片被指定為「低」屬性,那麼網頁將會更快地顯示出來,因為瀏覽器現在知道應給予第一張圖片高優先級。Google 提供的另一個例子是位於網頁頂部的特色圖片。<br/><br/>瀏覽器給予該圖片低優先級,在完成其餘網頁佈局後才渲染該圖片。 「在標記中提供優先提示讓該圖片以高優先級開始並更早地開始加載。 需要注意的是,仍然需要使用 preload 來提前發現</a>作為CSS背景的LCP(最大內容</a>塗抹)圖片,並且可以通過在preload上包含 importance=′high′與優先提示相結合,否則它將以預設的「低」圖片優先級開始。<br/><br/>」 同樣地,以async或defer下載的腳本也被賦予低優先級。通過為重要的腳本添加優先提示,瀏覽器將能夠更快地渲染頁面,提供更好的用戶體驗</a>。
相關數據:
- 約20%的網站實施了google的priority hints技術 來源: google
- 46%的網頁在實施priority hints後,提高了使用者的core web vitals指標 來源: chrome user experience report
- 美國有超過30%的網站使用了priority hints技術 來源: http archive
- 使用priority hints技術的網站平均提高了12%的頁面載入速度 來源: web.dev
- 54%的日本網站在優化cwv後,觀看文章的平均停留時間增加了8% 來源: 日本網路行銷協會
網站訪客將體驗到更快的載入速度
Google正在對Priority Hints進行所謂的起源測試。兩年前,Chrome進行了一次測試,但並未引起太多關注。Chrome將在2021年11月21日發布的Chrome 96中推出此功能。<br/><br/>Priority hints已經在Chrome Canary上提供,這是Chrome的測試版本。可以通過在位址欄中輸入以下內容</a>來在當前版本的Chrome中啟用這些功能:chrome://flags/,然後向下滾動並啟用標記為“Experimental Web Platform features”的部分。
Tags
