javascript - 使用 LazyLoad 时最大的 Contentful Paint 显着增加
问题描述
我的一个网站的 LCP 非常糟糕,4.6。我意识到如果没有主动延迟加载我的图像,LCP 是 2.0 。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', lazyLoad, {passive: true} );
window.addEventListener( 'slick', lazyLoad, {passive: true} );
我已经尝试过用观察者替换,但 tcb 或 lcp 没有任何改进。
解决方案
为什么删除延迟加载后我的最大内容绘制 (LCP) 时间会有所改善?
这往往是一个实施问题。
LCP 测量最大的油漆出现在页面上的时间。如果您使用延迟加载并且图像在“首屏”可见(不滚动)并且它们是页面上最大的绘制,那么它们将被报告为 LCP。如果仅显示图像的顶部,也可能是这种情况。
现在,如果您延迟加载它们并且您的 JavaScript 在页面加载顺序中加载较晚,则意味着图像将稍后下载,从而增加您的 LCP 时间。
修复步骤
不要延迟加载出现在“首屏”的图像,只使用标准
<img>
或<picture>
元素。而已!延迟加载页面加载时看不见的所有内容,因为性能提升是值得的(以及提高带宽使用率等)。
为什么我的总阻塞时间 (TBT) 会受到影响?
TBT 在 CPU 上寻找“安静时间”来确定页面上的主要工作何时完成。
测试还做的是将页面滚动到底部。
因此,您的函数可能会被快速连续调用多次并导致 CPU 出现瓶颈(请记住,CPU 对移动评分应用了 4 倍的减速,以模拟 CPU 功能较弱的现实世界移动设备。)
可能的原因/可能的解决方案
因为您将事件侦听器设置为触发'scroll'
它会被触发多次,并且我假设您在页面上有多个图像。
你可以做的一件事是改变你的实际功能,这样它就不必每次都做那么多循环。
即,一旦您设置了图像src
或背景,从您的列表中style
删除该项目。lazyImages
这会减少页面滚动时需要检查的项目数量,从而提高性能。
还只需检查滑块多久会slick
导致您的函数被调用,因为这也可能导致性能问题。
以上可能无法解决您的 TBT,但无论如何都是很好的做法。
推荐阅读
- xml - XQuery 关键字搜索问题
- c - 尝试在一行中对多个值(3 个字符串 + 整数)进行 fscanf
- python - 表函数导致 R 在 Python 熊猫中具有三个变量
- leaflet - 如何将传单地图插件添加到ionic4代码?
- java - 收到“com.microsoft.sqlserver.jdbc.SQLServerException:索引 1 超出范围”。尝试执行存储过程时
- javascript - 在 javascript 中将数据插入 Google 工作表
- java - Checkstyle 禁止对路径中包含特定包的文件进行所有检查
- iphone - 由于未捕获的异常'NSInvalidArgumentException'而终止应用程序,原因:'Receiver()没有标识符'pizzaSegue'的segue
- python - Azure 管道环境变量失败
- reactjs - 如何从 redux 形式的字段中获取价值?