延遲載入畫面外圖片並延遲

Katie Hempenius

如要按照本程式碼研究室的說明操作，請在第二個分頁中開啟這個 Glitch。

延遲載入是指等到需要載入資源後再載入，而非預先載入資源。這樣可以減少初始頁面載入及剖析時需要載入及剖析的資源量，進而改善效能。

在初始頁面載入期間，畫面外的圖片非常適合使用這項技巧。最棒的是，Lazysize 可讓這項實作方式非常簡單。

在網頁中加入 Lazysizes 指令碼

• 按一下「Remix to Edit」，讓專案可供編輯。

已下載「lazysizes.min.js」，並新增至這個 Glitch。如要在頁面中加入這個程式庫，請按照下列步驟操作：

• 在 index.html 中新增下列 <script> 標記：

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

注意： lazysizes.min.js 檔案已新增至這項專案，無須另外新增。您剛新增的指令碼可使用這個指令碼。

Lazysize 會在使用者捲動網頁時聰明地載入圖片，並優先顯示使用者即將看到的圖片。

指示要延遲載入的圖片

• 將 lazyload 類別新增至應延遲載入的圖片。此外，請將 src 屬性變更為 data-src。

例如，flower3.png 的變更看起來會像這樣：

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

在這個範例中，請嘗試延遲載入 flower3.png、flower4.jpg 和 flower5.jpg。

注意： 您可能想知道將 src 屬性變更為 data-src 的原因。如未變更這項屬性，系統會立即載入所有圖片，而不會延遲載入。data-src 不是瀏覽器可識別的屬性，因此如果遇到具有此屬性的圖片標記，就不會載入圖片。在這種情況下，這是個好消息，因為如此可讓延遲指令碼決定圖片的載入時間，而不是瀏覽器。

實例觀摩

大功告成！如要查看這些變更實際運作情形，請按照下列步驟操作：

• 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 。

• 開啟控制台並找出剛剛新增的映像檔。當您向下捲動頁面時，他們的類別應從 lazyload 變更為 lazyloaded。

• 觀察網路面板，可看到當您向下捲動頁面時，圖片檔會個別載入。

使用 Lighthouse 進行驗證

最後，建議使用 Lighthouse 驗證這些變更。Lighthouse 的「延遲載入畫面外圖片」效能稽核會指出您是否忘記為所有螢幕外圖片新增延遲載入功能。

1. 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 。
2. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
3. 按一下「Lighthouse」分頁標籤。
4. 確認您已在「類別」清單中勾選「成效」核取方塊。
5. 按一下「產生報表」按鈕。
6. 確認已通過延遲畫面映像檔稽核。

太好了，您已經使用延遲載入網頁上的圖片。