預載入主要圖片（首屏圖片）有助於減少Core Web Vitals中的最大內容繪製(LCP) 時間。這些通常是影象，如徽標、部落格文章上的特色影象、登入頁面上的Hero影象等。通過預載入它們，您將它們移動到瀑布的頂部，並基本上告訴瀏覽器這些具有優先順序並且應該立即載入。
最大的內容繪製時間
重要的是要了解Chrome有兩個影象預載入的限制，它們將出現在瀑布的最頂部。在這兩個影象之後的任何內容仍然會在瀑布中顯示得更高，但不會被視為高優先順序，這完全取決於Chrome。我們通常建議預載入2-3個影象。這通常會預載入您的徽標並在部落格文章中顯示特色圖片。
如果您在頁面上有手動影象預載入，這將優先於自動預載入之一。
預載入關鍵影象功能還將自動從延遲載入中排除這些影象。
從Chrome 73開始，連結 和響應式影象可以結合起來，以便更快地載入影象。
預載入概述
Preload讓您可以在HTML中發現關鍵資源之前儘快告訴瀏覽器您想要載入的關鍵資源。這對於不容易發現的資源特別有用，例如樣式表中包含的字型、背景影象或從指令碼載入的資源。
<link as="image" href="important.png">
響應式影象 + 預載入 = 更快的影象載入
響應式影象和預載入在過去幾年中一直可用，但同時缺少一些東西：無法預載入響應式影象。從Chrome 73開始，瀏覽器可以在發現標籤img之前預載入srcset指定的響應影象的正確變體！
根據您網站的結構，這可能意味著影象顯示速度顯著加快！我們在一個使用JavaScript延遲載入響應式影象的網站上進行了測試。預載入導致影象載入速度提高了1.2秒。
所有現代瀏覽器都支援響應式影象，而僅在基於Chromium的瀏覽器中支援預載入它們。
imagesrcset和imagesizes
為了預載入響應式影象，最近向<link>元素新增了新屬性：imagesrcset和imagesizes. 它們與 <link rel="preload">一起使用，並與 <img>元素中使用的srcset和sizes語法相匹配。
例如，如果您想預載入指定的響應式影象：
<img src="wolf.jpg" alt="A rad wolf">
您可以通過將以下內容新增到您的HTML的<head>來做到這一點：
<link as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
這將使用srcset和sizes將應用的相同資源選擇邏輯啟動請求。
用例
預載入動態注入的響應影象
假設您正在動態載入主影象作為幻燈片的一部分，並且知道將首先顯示哪個影象。在這種情況下，您可能希望避免在載入相關影象之前等待指令碼，因為這會延遲使用者看到它的時間。
您可以在具有動態載入的圖片庫的網站上檢查此問題：
- 在新選項卡中開啟此示例網站。
- 按 `Control+Shift+J`（或 Mac 上的 `Command+Option+J`）開啟DevTools。
- 單擊網路選項卡。
- 在Throttling下拉選單中，選擇Fast 3G。
- 禁用禁用快取覈取方塊。
- 重新載入頁面。
此瀑布顯示影象僅在瀏覽器完成執行指令碼後才開始載入，從而對最初向使用者顯示影象的時間引入了不必要的延遲。
在此處使用preload幫助是因為影象會提前開始載入，並且在瀏覽器需要顯示它時可能已經存在。
此瀑布顯示第一張圖片與指令碼同時開始載入，避免了不必要的延遲並加快了圖片的顯示速度。
要檢視預載入的不同之處，您可以按照第一個示例中的步驟檢查相同的動態載入的影象庫，但預載入了第一張影象。
避免該問題的另一種方法是使用基於標記的輪播並讓瀏覽器的預載入器獲取所需的資源。然而，這種方法可能並不總是實用的。（例如，如果您正在重用現有的元件，它不是基於標記的。）
使用影象集預載入背景影象
如果對於不同的螢幕密度有不同的背景影象，則可以在CSS中使用image-set語法指定它們。然後瀏覽器可以根據螢幕的DPR選擇顯示哪一個。
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
上述語法忽略了在基於Chromium和WebKit的瀏覽器中此功能需要供應商字首這一事實。如果您打算使用此功能，則應考慮使用Autoprefixer（作為線上工具提供）來自動解決該問題。
CSS背景圖片的問題在於，它們只有在瀏覽器下載並處理了頁面<head>中的所有CSS之後才會被瀏覽器發現，這可能是很多CSS……
您可以在具有響應式背景影象的示例網站上檢查此問題。
在此示例中，直到 CSS 完全下載後才開始影象下載，從而導致影象顯示出現不必要的延遲。
響應式影象預載入提供了一種簡單且無需破解的方式來更快地載入這些影象。
<link rel=preload href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">
您可以檢查前面的示例如何處理預載入的響應式背景影象。
在這裡，影象和CSS同時開始下載，避免了延遲，從而加快了影象的載入速度。
預載入響應式影象
理論上，預載入響應式影象可以加快速度，但實際上它有什麼作用呢？
為了回答這個問題，我們來看看建立了一個演示PWA商店的兩個副本：一個不預載入影象，另一個預載入其中的一些。由於該站點使用JavaScript延遲載入影象，因此可能會從預載入將在初始視口中的影象受益。
這給了我以下關於no preload和image preload的結果。檢視原始資料，我們看到Start Render保持不變，速度指數略有提高（273 毫秒，因為影象到達速度更快，但不佔用大量畫素區域），但捕捉差異的真實指標是最後繪製的Hero指標，提高了1.2 秒。
當然，沒有什麼比幻燈片比較更能捕捉視覺差異了：
幻燈片顯示，影象在預載入時的到達速度明顯更快，從而極大地改善了使用者體驗。
預載入和<picture>？
如果您熟悉響應式影象，您可能想知道“怎麼<picture>辦？”。
Web效能工作組正在討論為srcsetand新增一個等效的預載入sizes，但不是為處理 “art direction” 用例的<picture>元素。
為什麼這個用例被“忽視”？
儘管也有興趣解決該用例，但仍有許多技術問題需要解決，這意味著這裡的解決方案將具有很大的複雜性。最重要的是，在大多數情況下，用例似乎可以在今天得到解決，即使是以一種hacky的方式（見下文）。
鑑於此，Web Performance WG決定srcset先發布，看看是否需要同等picture支援。
如果您確實發現自己可以預載入<picture>，則可以使用以下技術作為解決方法。
鑑於以下情況：
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
<picture>元素的邏輯（或者確切地說是影象源選擇邏輯）是按順序檢查<source>元素的media屬性，找到第一個匹配的，然後使用附加的資源。
因為響應式預載入沒有“順序”或“第一次匹配”的概念，所以需要將斷點轉換為以下內容：
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)"> <link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)"> <link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
小結
響應式影象預載入為我們提供了新的和令人興奮的可能性，以以前只能使用hack的方式預載入響應式影象。它是對速度敏感的開發人員工具箱的重要新增功能，使我們能夠確保我們希望儘快呈現在使用者面前的重要影象在我們需要時會出現。
評論留言
脣槍舌劍 (1)
九凌网络
2022.8.5 16:08
感谢分享，文章很精彩