延遲載入是一種等到有需要再載入資源的方法,而不是事先載入資源。這樣可以減少初次載入頁面時需要載入及剖析的資源數量,進而改善效能。
初次載入網頁時未顯示在畫面外的圖片是這個技巧的理想選擇。最棒的是,Lazysize 讓這項實作策略非常簡單。
在網頁中加入延遲指令碼
- 按一下「Remix to Edit」即可編輯專案。
已下載「lazysizes.min.js
」並新增至此 Glitch。如果要在頁面中加入這個字串,請按照下列指示操作:
- 在
index.html
中新增下列<script>
標記:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
延遲大小會在使用者捲動頁面時聰明地載入圖片,並優先顯示使用者即將看到的圖片。
指定圖片要延遲載入
- 將
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
。
實例觀摩
大功告成!如要實際查看變更,請按照下列步驟操作:
如要預覽網站,請按下「View App」,然後按下「Fullscreen」。
開啟控制台並找出剛新增的映像檔。向下捲動頁面時,這些類別的類別應從
lazyload
變更為lazyloaded
。
- 觀看網路面板,瞭解在頁面向下捲動時個別載入的圖片檔。
使用 Lighthouse 進行驗證
最後,建議使用 Lighthouse 驗證這些變更。Lighthouse 的「延遲載入畫面圖片」效能稽核會指出您是否忘記對任何螢幕外圖片新增延遲載入。
- 如要預覽網站,請按下「View App」,然後按下「Fullscreen」。
- 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 確認您已在「類別」清單中勾選「成效」核取方塊。
- 按一下「產生報表」按鈕。
- 確認已通過延遲畫面圖片稽核。
大功告成!您已使用延遲載入網頁上的圖片。