使用LazyLoad时，最大的内容丰富的涂料急剧增加 修复步骤可能的原因/可能的解决方法

问题描述

我的一个网站的LCP确实很差，为4.6。我意识到，在没有主动延迟加载我的图像的情况下，LCP是2.0。通过使用lazyload也增加了TCB。因此，我认为这一定是我的不良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',{passive: true} );
window.addEventListener( 'slick',{passive: true} );

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

解决方法

为什么我的最大内容绘画（LCP）时间在删除惰性负载后会有所改善？

这往往是一个实现问题。

LCP测量最大的油漆出现在页面上的时间。如果使用延迟加载，并且图像在“折叠上方”可见（不滚动），并且它们是页面上最大的涂料，则它们将被报告为LCP。如果仅显示图像的顶部，也可能是这种情况。

现在，如果您懒惰地加载它们，并且JavaScript在页面加载顺序中延迟加载，则意味着图像将在以后下载，从而增加了LCP时间。

修复步骤

1. 不要懒散地加载出现在“首屏”上方的图像，而只需使用标准的<img>或<picture>元素。

2. 就是这样！懒惰地加载页面时看不到的所有内容，这是值得的，因为它可以提高性能（并提高带宽利用率等）。

为什么我的总阻止时间（TBT）受到影响？

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

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

因为这个原因，您的函数可能被快速连续多次调用并且使CPU处于瓶颈状态（请记住，CPU对移动评分应用了4倍的速度减慢，以模拟功能更弱的CPU的现实世界中的移动设备。 ）

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

由于您将事件监听器设置为在'scroll'上触发，因此它被多次触发，并且我认为您在页面上有多个图像。

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

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

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

以上内容可能无法解决您的TBT，但还是个好习惯。