Javascript 如何提高网站速度分数？

我开发了一个纯“HTML、CSS、JS”的网站，只包含文本和图像，虽然专门加载图像需要花费很多时间（所有5页图像的大小都是16MB），但其中一些图像（每页的主图像）大约是“3000px x高度”，这是因为它响应迅速，我想覆盖大部分屏幕大小，宽度和高度会随着屏幕大小的变化而变化，我尝试了google speed insights，但没有任何帮助

我也试过gtmetrix“

但它只是减少了少量的图像大小

如何提高我的网站速度特别是图片？

//1。使用转换所有图像的节点列表
//数组的数据src属性
常量imgs=[…document.querySelectorAll（'img[data src]'）；
// 2. 将代码包装到IntersectionObserver的功能测试上
如果（'IntersectionObserver'在窗口中）{
//3.创建IntersectionObserver并将其绑定到函数
//我们希望它与
let observer=新的IntersectionObserver（onChange）；
功能更改（更改）{
//4.对于我们要更改的每个图像
更改。forEach（（更改）=>{
//*从'data src'属性获取图像url
change.target.src=change.target.dataset.src；
//*停止观察当前目标
观察者不观察（改变目标）；
})
}
//5.观察从上述阵列中获得的每个图像
imgs.forEach（（img）=>observer.observe（img））；
}否则{
//6.如果浏览器不支持交叉点观察者
//我们登录到控制台并手动加载图像
console.log（“不支持交叉点观察员”）；
函数加载图像（imgs）{
imgs.forEach（（图像）=>{
image.src=image.dataset.src；
})
}
加载图像（imgs）；
}

.img atr{
宽度：400px；
}

 您可以考虑根据可用的屏幕大小提供不同大小的每个图像。这样做的目的是不要传递不必要的大图像。你可以考虑使用交叉观察器来下载屏幕图像。例如，根据您的图像质量要求，您可能希望压缩这些图像以节省一些KB。这是你能做的最大的事情，与动态大小调整相结合，以提高你的分数。一旦这些分数上升，谷歌的搜索引擎优化效益也会提高；你的搜索排名将会上升。