页面加载时间-预加载图像和延迟加载

Question

您好，我正在创建一个电子商务网站。但是，我们添加的产品越多，我们需要在页面上显示的图像就越多，这开始使网站速度变慢。

到目前为止，我为解决这个问题所做的工作是，首先我将所有PHP图像预加载为：

foreach(glob("media/product_images/*") as $file) {
    if(filetype($file) != 'dir'){
        echo '<link rel="preload" href="'.$file.'" as="image">';
    }
}

然后，我尝试使用JS/jquery/CSS在网上找到的这种延迟加载技术，如下所示：

JS / jquery：

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img){
    img.setAttribute('src', img.getAttribute('data-src'));
    img.onload = function(){
        img.removeAttribute('data-src');
    };
});

HTML：

<img data-src='../path/to/image.png'>

CSS：

img{
    opacity:1;
    transition:opacity 0.3s;
}
img[data-src]{
    opacity:0;
}

我不确定这是什么最佳实践，我已经找到了几种不同的方法来做到这一点，但是不确定什么是最好的。

任何帮助或建议，将不胜感激。