主要效能問題

如目前所知,圖片在總傳輸大小中,是網路上最大的資產 以及每個網頁的要求數量中位數網頁的總傳輸大小約為 截至 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"

請注意,fetchpriorityloading 的差異,它並不會變更瀏覽器的行為。不會指示瀏覽器 優先載入某些資產,而不是提供資源要求的重要背景資訊。

評估圖片的影響

最佳化圖片素材資源時,相較於總轉移量,「感知」的成效通常更重要,也更難評估 大小。

網站體驗指標提供可評估且可做為行動依據的指標和指引,協助您改善使用者的並突顯出 例如網路伺服器回應時間慢、轉譯問題和互動延遲。Core Web Vitals 是這類目標的一部分,著重於雷射 計算使用者在個別網頁的直接體驗後,系統會將這些技術評估機制一併納入考量,藉此判斷使用者體驗「感覺」對使用者的「速度」。

累計版面配置轉移

累計版面配置位移 (CLS) 是測量視覺穩定性的指標。這個指標可以用來 載入素材資源及顯示網頁時,內容的版面配置會隨之改變。消費金額很高的使用者 的使用者因網頁「跳轉」而在大量文字中消失了例如延遲網頁字型或圖片來源 或互動式元素突然從指標移開。CLS 偏高表示會造成乾擾 最糟的使用者發生錯誤 -「取消」按鈕移至先前佔用的「確認」空間使用者按下按鈕

由於載入時間過長和版面配置佔用的空間過多,這是導致圖片最常見的原因 每天都能獲得高 CLS 分數

新式瀏覽器相對近期的變更,可有效避免圖片因圖片而出現高 CLS 分數,現在要來得輕而易舉。

如果您會使用前端已有幾年的時間,可以熟悉 <img> 中的 widthheight 屬性: 在廣泛採用 CSS 之前,下列就是控制圖片尺寸的唯一方法。

<img src="image.jpg" height="200" width="400" alt="…">

這些屬性會減少使用,目的是將樣式問題與標記分開,尤其是回應式設計 網頁設計使得必須透過 CSS 指定百分比來調整大小。在採用回應式網頁設計的早期,「移除 未使用的 widthheight 屬性我們在 CSS 中指定值 (max-width: 100%) 和 height: auto—會覆寫它們。

<img src="image.jpg" alt="…">
img {
 
max-width: 100%;
 
height: auto;
}

和上一個範例一樣,移除 heightwidth 屬性,瀏覽器唯一判斷的方法 此時,圖片的高度是要求來源、剖析,並根據原始顯示比例算繪圖片 套用樣式表後,在版面配置中佔用的空間寬度。大部分程序都是在網頁 算繪,而新計算的高度會導致版面配置位移。

自 2019 年起,系統已更新瀏覽器行為,以不同的方式處理 widthheight 屬性。您不需要使用 屬性決定版面配置中 img 元素的固定大小、像素大小,那麼這些屬性可以考慮在 圖片的長寬比,但語法相同。新式瀏覽器會相互分割這些值, 在網頁算繪之前,決定 img 元素的內建顯示比例,保留圖片算繪時所佔用的空間。

原則上,請一律在 <img> 上使用 heightwidth 屬性,且其值與圖片來源的內建大小相符,因此 只要您有確定已使用 max-width: 100% 指定 height: auto 來覆寫 HTML 屬性中的高度,

<img src="image.jpg" height="200" width="400" alt="…">
img {
 
max-width: 100%;
 
height: auto;
}

<img> 元素上使用 widthheight 屬性,就能避免因圖片而提高 CLS 分數。

請特別注意,這種方法沒有缺點,因為這可以讓使用者根據長期的瀏覽器行為,任何瀏覽器 並照常使用基本 CSS 支援的功能,而標記中的 heightwidth 屬性會遭到樣式覆寫。

雖然 widthheight 屬性可為圖片保留必要的版面配置空間,以防止 CLS 問題發生, 空白間隔或低品質預留位置的使用者, 等候圖片資料轉移並轉譯,也不是最理想的情況。雖然您可以採取一些措施來減輕可評估的可評估和影響 對載入速度緩慢的圖片的影響,如要更快向使用者呈現完整圖片,只能縮減傳輸大小。

最大內容繪製

「Largest Contentful Paint (LCP)」用來評估在使用者可視區域中顯示最大「內容」元素所需的時間, 佔據可見網頁最大比例的內容元素。乍看之下,這似乎指標太過具體,但 元素則可做為實際 Proxy 處理,從使用者的角度而言,頁面佔據大部分顯示時間的時間點。LCP 衡量 (感知) 效能。

DOMContentLoadedwindow.onload 事件等指標可用於判斷載入目前頁面的程序 技術上已完成,但不一定能反映網頁使用者體驗。元素轉譯作業稍有延遲 至於使用者可視區域外的部分,則會計入這兩個指標,但實際上可能不會被真人偵測到的情況。 較長的 LCP 代表使用者對網頁的第一印象 (目前可視區域內最重要的內容),是指網頁載入速度過慢。 或損壞

LCP 擷取到的使用者認知會對使用者體驗產生直接影響。去年 Vodafone 完成的實驗 發現 LCP 提升 31% 的銷售量,不僅使業績提升 8% (單方面成效也很出色),使用者總數中也發現 15% 成為潛在客戶的訪客人數 (「訪客成為待開發客戶率」) 增幅,使用者數量則增加 11% 或逛過購物車的使用者 (「造訪購物車率」)。

在超過 70% 的網頁上,開頭元素是初始元素的最大元素 可視區域包含圖片,可以是獨立的 <img> 元素或含有背景圖片的元素。也就是 70% 的網頁LCP 分數取決於圖片效能。不必太多想像力,就能瞭解原因為何:引人注目、引人注意 圖片和標誌幾乎會顯示在「不需捲動位置」。

web.dev 頁面的控制台醒目顯示 LCP

建議您採取以下幾個步驟,避免 LCP 延遲:首先,切勿在「不需捲動位置」指定 loading="lazy"圖片、 因為延遲載入網頁才載入之後,可能會對 LCP 分數造成嚴重的負面影響。 第二,使用 fetchpriority="high" 可指示瀏覽器應優先轉移這張圖片,位置要放在網頁上其他位置的圖片上方。

審慎考量過這些規則後,如要提高網頁 LCP 分數,最重要的做法就是減少時間 轉移及轉譯這些圖片所需的時間為達成此目標,請讓圖片來源維持精簡且效率 在不犧牲品質的情況下,確保使用者只取得成效最佳的圖片素材資源 以便根據讀者瀏覽環境

結論

圖片素材資源是使用者耗電量最多的平台頻寬 - 轉移其他所有必要素材資源所佔用的頻寬 轉譯網頁圖片在網頁期間和之後都會帶來明顯的感知效能問題 版面配置畫面。簡而言之,圖片素材資源會遭到「損害」

痛苦了,雖然「減少圖片,網路反而會更好」可以說是真的 也會讓使用者感到驚艷網路是網路的重要一環,您不應犧牲圖片品質 以便單單單純提升成效

在本課程的其他部分中,您將瞭解 Google 圖片素材資源採用的技術,以及這類技術 ,且不影響品質。