使用 LazyLoad 时，Largest Contentful Paint 显着增加

Question

我的一个网站有一个非常糟糕的 LCP，4.6。我意识到如果没有主动延迟加载我的图像，LCP 是 2.0 。 TCB 也通过使用 lazyload 增加了。所以我认为这一定是我的 JS 技能不好，所以你们中的任何人都可以给我提示吗？

我的实际代码：

let lazyImages = [...document.querySelectorAll('img[data-src],iframe[data-src],div[data-bg],header[data-bg]')];
let inAdvance = 300;

function lazyLoad() {
   lazyImages.forEach(image => {
       if ( !image.classList.contains( 'lazyloaded' ) && !image.classList.contains( 'none' ) && image.getBoundingClientRect().top <= window.innerHeight + inAdvance && image.getBoundingClientRect().bottom >= 0) {
           if( image.hasAttribute( 'data-src' ) ){
               image.src = image.dataset.src;
           }

           if( image.hasAttribute( 'data-bg' ) ){
               image.setAttribute( 'style', 'background-image:url( ' + image.dataset.bg + ' );' );
           }

           image.classList.add('lazyloaded');
           //image.onload = () => image.classList.add('lazyloaded');
       }
   })
}

window.addEventListener( 'scroll', lazyLoad, {passive: true} );
window.addEventListener( 'resize', lazyLoad, {passive: true} );
window.addEventListener( 'slick', lazyLoad, {passive: true} );

我已经尝试用观察者替代，但 tcb 或 lcp 没有任何改进。

Answer 1

为什么移除延迟加载后我的 Largest Contentful Paint (LCP) 时间会缩短？

这往往是一个实施问题。

LCP 测量页面上出现最大绘画的时间。如果您使用延迟加载并且图像在“折叠上方”可见（无需滚动）并且它们是页面上最大的绘图，那么它们将被报告为 LCP。如果只显示图像的顶部，也可能是这种情况。

现在，如果您延迟加载它们并且您的 JavaScript 在页面加载顺序中加载较晚，这意味着图像将稍后下载，从而增加了您的 LCP 时间。

修复步骤

不要延迟加载出现在“首屏”的图像，只需使用标准 <img> 或 <picture> 元素即可。
就是这样！延迟加载页面加载时不可见的所有内容，因为性能提升是值得的（以及改善带宽使用等）。

为什么我的总阻塞时间 (TBT) 会受到影响？

TBT 正在 CPU 上寻找“安静时间”以确定页面上的主要工作何时完成。

测试还做的是将页面滚动到底部。

因此，您的函数可能会被快速连续调用多次，并且 bottle-necking CPU（请记住，CPU 对移动评分应用了 4 倍的减速模拟功能较弱的真实世界移动设备 CPU。）

可能的原因/可能的解决方案

因为您将事件侦听器设置为在 'scroll' 上触发，所以它被触发了多次，我假设您在页面上有多个图像。

你可以做的一件事是改变你的实际功能，这样它就不必每次都做那么多循环。

即一旦您设置了图像 src 或背景 style，请从 lazyImages 列表中删除该项目。这样可以减少滚动页面时需要检查的项目数量，从而提高性能。

还要检查 slick 滑块导致您的函数被调用的频率，因为这也可能导致性能问题。

以上内容可能无法解决您的 TBT，但无论如何都是很好的做法。

使用 LazyLoad 时，Largest Contentful Paint 显着增加

Largest Contentful Paint increased dramatically when using LazyLoad

javascript

lazy-loading

pagespeed

google-pagespeed

为什么移除延迟加载后我的 Largest Contentful Paint (LCP) 时间会缩短？

修复步骤

为什么我的总阻塞时间 (TBT) 会受到影响？

可能的原因/可能的解决方案