延遲載入是指等到需要載入資源後再載入,而非預先載入資源。這樣可以減少初始頁面載入及剖析時需要載入及剖析的資源量,進而改善效能。
在初始頁面載入期間,畫面外的圖片非常適合使用這項技巧。最棒的是,Lazysize 可讓這項實作方式非常簡單。
在網頁中加入 Lazysizes 指令碼
- 按一下「Remix to Edit」,讓專案可供編輯。
已下載「lazysizes.min.js
」,並新增至這個 Glitch。如要在頁面中加入這個程式庫,請按照下列步驟操作:
- 在
index.html
中新增下列<script>
標記:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
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
。
實例觀摩
大功告成!如要查看這些變更實際運作情形,請按照下列步驟操作:
如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
開啟控制台並找出剛剛新增的映像檔。當您向下捲動頁面時,他們的類別應從
lazyload
變更為lazyloaded
。
- 觀察網路面板,可看到當您向下捲動頁面時,圖片檔會個別載入。
使用 Lighthouse 進行驗證
最後,建議使用 Lighthouse 驗證這些變更。Lighthouse 的「延遲載入畫面外圖片」效能稽核會指出您是否忘記為所有螢幕外圖片新增延遲載入功能。
- 如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
- 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 確認您已在「類別」清單中勾選「成效」核取方塊。
- 按一下「產生報表」按鈕。
- 確認已通過延遲畫面映像檔稽核。
太好了,您已經使用延遲載入網頁上的圖片。