如目前所知,圖片在總傳輸大小中,是網路上最大的資產 以及每個網頁的要求數量中位數網頁的總傳輸大小約為 截至 2022 年 6 月 2 MB,僅佔整體圖片的一半。這不算是誇張 說到,圖片請求最佳化也許可帶來最大的成效最佳化。
稍後,您將瞭解回應式圖片如何演變,以便解決各種問題 (也就是嘗試放送所有事件的圖片)。 本節說明與圖片相關的主要成效指標,以及如何改善。
延遲圖片要求
此外,我們將說明如何透過多種方式確保圖片要求盡可能縮小且效率,也是最快的圖片請求
我們總是能不懈地精進因此,我想分享一下,這項異動能帶來最重大的改變
您向使用者提供圖片素材資源:loading="lazy"
屬性。
<img src="image.jpg" loading="lazy" alt="…">
這個屬性可確保圖片請求只有在與使用者可視區域接近時才會提出,並從初始時間延遲 就是載入網頁 (瀏覽器最忙碌的時間),並從重要的轉譯路徑移除這些要求。
顧名思義,使用這項屬性能對成效產生巨大的正面影響:不超出預期範圍的圖片 系統絕不會請求使用者的檢視區,也不會在使用者原本看不到的圖片上浪費任何頻寬。
但還有一個洞見:延遲這些要求意味著不善用瀏覽器」高度最佳化處理
及早上傳圖片如果將 loading="lazy"
用於 img
元素靠近版面配置頂端的位置,
顯示在使用者的可視區域中,這些圖片對使用者來說可能會大幅減慢。
擷取優先順序
loading
屬性是較大型的網路標準範例,可讓開發人員進一步掌控網路瀏覽器的運作方式
以處理要求的優先順序
你可能會知道擷取優先順序的基本方法:
舉例來說,如果要求文件 <head>
中的外部 CSS 檔案,這類請求就視為必須阻擋轉譯,
系統會延遲 </body>
上方的外部 JavaScript 檔案,直到轉譯完成為止。如果 <img>
上的 loading
屬性值為「lazy」,
觸發相關圖片要求,直到瀏覽器決定向使用者顯示該圖片為止。否則圖片就會
比網頁上任何其他圖片一樣。
fetchpriority
屬性的作用是
開發人員精細控管資產的優先順序,藉此標記資源
「高」和「low」做為優先順序fetchpriority
的用途與 loading
類似
屬性。舉例來說,您可以在只顯示使用者互動後的圖片上使用 fetchpriority="low"
(無論圖片是否位於使用者的可視區域中),藉此優先顯示網頁上其他位置的圖片,fetchpriority="high"
。
請注意,fetchpriority
與 loading
的差異,它並不會變更瀏覽器的行為。不會指示瀏覽器
優先載入某些資產,而不是提供資源要求的重要背景資訊。
評估圖片的影響
最佳化圖片素材資源時,相較於總轉移量,「感知」的成效通常更重要,也更難評估 大小。
網站體驗指標提供可評估且可做為行動依據的指標和指引,協助您改善使用者的並突顯出 例如網路伺服器回應時間慢、轉譯問題和互動延遲。Core Web Vitals 是這類目標的一部分,著重於雷射 計算使用者在個別網頁的直接體驗後,系統會將這些技術評估機制一併納入考量,藉此判斷使用者體驗「感覺」對使用者的「速度」。
累計版面配置轉移
累計版面配置位移 (CLS) 是測量視覺穩定性的指標。這個指標可以用來 載入素材資源及顯示網頁時,內容的版面配置會隨之改變。消費金額很高的使用者 的使用者因網頁「跳轉」而在大量文字中消失了例如延遲網頁字型或圖片來源 或互動式元素突然從指標移開。CLS 偏高表示會造成乾擾 最糟的使用者發生錯誤 -「取消」按鈕移至先前佔用的「確認」空間使用者按下按鈕
由於載入時間過長和版面配置佔用的空間過多,這是導致圖片最常見的原因 每天都能獲得高 CLS 分數
新式瀏覽器相對近期的變更,可有效避免圖片因圖片而出現高 CLS 分數,現在要來得輕而易舉。
如果您會使用前端已有幾年的時間,可以熟悉 <img>
中的 width
和 height
屬性:
在廣泛採用 CSS 之前,下列就是控制圖片尺寸的唯一方法。
<img src="image.jpg" height="200" width="400" alt="…">
這些屬性會減少使用,目的是將樣式問題與標記分開,尤其是回應式設計
網頁設計使得必須透過 CSS 指定百分比來調整大小。在採用回應式網頁設計的早期,「移除
未使用的 width
和 height
屬性我們在 CSS 中指定值 (max-width: 100%
) 和
height: auto
—會覆寫它們。
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
和上一個範例一樣,移除 height
和 width
屬性,瀏覽器唯一判斷的方法
此時,圖片的高度是要求來源、剖析,並根據原始顯示比例算繪圖片
套用樣式表後,在版面配置中佔用的空間寬度。大部分程序都是在網頁
算繪,而新計算的高度會導致版面配置位移。
自 2019 年起,系統已更新瀏覽器行為,以不同的方式處理 width
和 height
屬性。您不需要使用
屬性決定版面配置中 img
元素的固定大小、像素大小,那麼這些屬性可以考慮在
圖片的長寬比,但語法相同。新式瀏覽器會相互分割這些值,
在網頁算繪之前,決定 img
元素的內建顯示比例,保留圖片算繪時所佔用的空間。
原則上,請一律在 <img>
上使用 height
和 width
屬性,且其值與圖片來源的內建大小相符,因此
只要您有確定已使用 max-width: 100%
指定 height: auto
來覆寫 HTML 屬性中的高度,
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
在 <img>
元素上使用 width
和 height
屬性,就能避免因圖片而提高 CLS 分數。
請特別注意,這種方法沒有缺點,因為這可以讓使用者根據長期的瀏覽器行為,任何瀏覽器
並照常使用基本 CSS 支援的功能,而標記中的 height
和 width
屬性會遭到樣式覆寫。
雖然 width
和 height
屬性可為圖片保留必要的版面配置空間,以防止 CLS 問題發生,
空白間隔或低品質預留位置的使用者,
等候圖片資料轉移並轉譯,也不是最理想的情況。雖然您可以採取一些措施來減輕可評估的可評估和影響
對載入速度緩慢的圖片的影響,如要更快向使用者呈現完整圖片,只能縮減傳輸大小。
最大內容繪製
「Largest Contentful Paint (LCP)」用來評估在使用者可視區域中顯示最大「內容」元素所需的時間, 佔據可見網頁最大比例的內容元素。乍看之下,這似乎指標太過具體,但 元素則可做為實際 Proxy 處理,從使用者的角度而言,頁面佔據大部分顯示時間的時間點。LCP 衡量 (感知) 效能。
DOMContentLoaded
或 window.onload
事件等指標可用於判斷載入目前頁面的程序
技術上已完成,但不一定能反映網頁使用者體驗。元素轉譯作業稍有延遲
至於使用者可視區域外的部分,則會計入這兩個指標,但實際上可能不會被真人偵測到的情況。
較長的 LCP 代表使用者對網頁的第一印象 (目前可視區域內最重要的內容),是指網頁載入速度過慢。
或損壞
LCP 擷取到的使用者認知會對使用者體驗產生直接影響。去年 Vodafone 完成的實驗 發現 LCP 提升 31% 的銷售量,不僅使業績提升 8% (單方面成效也很出色),使用者總數中也發現 15% 成為潛在客戶的訪客人數 (「訪客成為待開發客戶率」) 增幅,使用者數量則增加 11% 或逛過購物車的使用者 (「造訪購物車率」)。
在超過 70% 的網頁上,開頭元素是初始元素的最大元素
可視區域包含圖片,可以是獨立的 <img>
元素或含有背景圖片的元素。也就是
70% 的網頁LCP 分數取決於圖片效能。不必太多想像力,就能瞭解原因為何:引人注目、引人注意
圖片和標誌幾乎會顯示在「不需捲動位置」。
建議您採取以下幾個步驟,避免 LCP 延遲:首先,切勿在「不需捲動位置」指定 loading="lazy"
圖片、
因為延遲載入網頁才載入之後,可能會對 LCP 分數造成嚴重的負面影響。
第二,使用 fetchpriority="high"
可指示瀏覽器應優先轉移這張圖片,位置要放在網頁上其他位置的圖片上方。
審慎考量過這些規則後,如要提高網頁 LCP 分數,最重要的做法就是減少時間 轉移及轉譯這些圖片所需的時間為達成此目標,請讓圖片來源維持精簡且效率 在不犧牲品質的情況下,確保使用者只取得成效最佳的圖片素材資源 以便根據讀者瀏覽環境
結論
圖片素材資源是使用者耗電量最多的平台頻寬 - 轉移其他所有必要素材資源所佔用的頻寬 轉譯網頁圖片在網頁期間和之後都會帶來明顯的感知效能問題 版面配置畫面。簡而言之,圖片素材資源會遭到「損害」。
痛苦了,雖然「減少圖片,網路反而會更好」可以說是真的 也會讓使用者感到驚艷網路是網路的重要一環,您不應犧牲圖片品質 以便單單單純提升成效
在本課程的其他部分中,您將瞭解 Google 圖片素材資源採用的技術,以及這類技術 ,且不影響品質。