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

Katie Hempenius
Katie Hempenius
X

延遲載入是一種等到有需要再載入資源的方法，而不是事先載入資源。這樣可以減少初次載入頁面時需要載入及剖析的資源數量，進而改善效能。

初次載入網頁時未顯示在畫面外的圖片是這個技巧的理想選擇。最棒的是，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 的「延遲載入畫面圖片」效能稽核會指出您是否忘記對任何螢幕外圖片新增延遲載入。

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

已通過 Lighthouse 的「有效率地編碼圖片」稽核

大功告成！您已使用延遲載入網頁上的圖片。