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忽略了它们被推迟的事实，只是要求我推迟它们。

我注意到在谷歌延迟的图像说明它规定

灯塔标记在互动时间（TTI）事件之前请求的屏幕外图像。

我什么时候应该调用我的延迟代码，以便pagespeed / lighthouse审核实际上注意到我正在延迟它的事实？

该代码肯定有效，我可以在页面加载后主动看到它加载图像。

Answer 1

您可能想尝试使用requestIdleCallback，并退回到setTimeout如果不可用。

您也可以不全部加载它们，然后优先查看它们。

Answer 2

如您所知，处理该问题的方法是屏幕外图像，或者使用预制的小型图书馆，例如Lazy load offscreen images with lazysizes或使用适当的 intersectionobserver

window.onlad不会帮助你克服的时间互动

建议：默认情况下，您甚至可以显示一个小的缩略图或图像占位符，并且在加载页面后，您可以用高质量的真实图像替换它们，这样浏览器就不会显示偏僻的图像问题，例如参考，您可以了解https://medium.com/如何加载图像。

使用窗口的onload或文档准备提高的PageSpeed scpre推迟图片

2 个答案: