使用窗口onload或准備就緒的文檔推遲圖像以提高Pagespeed Scpre

Question

我一直在使用以下代碼延遲我網站上的所有圖像（普通圖像或背景圖像）

var imgDefer = document.querySelectorAll('img[data-deferred-image]');
for (var i=0; i < imgDefer.length; i++) {
    if(imgDefer[i].getAttribute('data-deferred-image')) {
        imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-deferred-image'));
    }
}

var backgroundImgDefer = document.querySelectorAll('[data-deferred-bg-image]');
for (var i=0; i < backgroundImgDefer.length; i++) {
    if(backgroundImgDefer[i].getAttribute('data-deferred-bg-image')) {
        backgroundImgDefer[i].style.backgroundImage = 'url("' + backgroundImgDefer[i].getAttribute('data-deferred-bg-image') + '")';
    }
}

目前，這是在window.onload標簽內運行的，該標簽應該可以工作，但是我注意到pagespeed忽略了它們被推遲的事實，而只是要求我推遲它們。

我在Google延遲圖片說明中注意到它指出

Lighthouse標記“互動時間（TTI）”事件之前請求的屏幕外圖像。

我什么時候應該調用延遲代碼，以便pagespeed / lighthouse審核實際上注意到我正在延遲它的事實？

該代碼絕對有效，我可以在頁面加載后主動看到它加載圖像。

Answer 1

如果不可用，您可能想嘗試使用requestIdleCallback和fallback到setTimeout 。

您也可以不全部加載它們，然后優先考慮它們。

Answer 2

當你知道它的屏外圖像處理這既可以使用像預制小型圖書館與lazysizes延遲加載屏外圖像或使用適當intersectionobserver

window.onlad不會幫助您克服互動時間

建議 ：默認情況下，您甚至可以顯示一個小的縮略圖或圖像占位符，並且在頁面加載后，您可以將它們替換為高質量的真實圖像，這樣瀏覽器就不會顯示離屏圖像問題，作為參考，您可以查看https：// medium .com /加載圖像。