如何使用大量图像提高页面性能答案

【问题标题】：How to improve a pages performance with lots of images如何使用大量图像提高页面性能
【发布时间】：2018-07-13 04:20:29
【问题描述】：

我希望提高页面速度。它有大约 100 张图片，使用 Masonry JS 进行布局。

使用延迟加载进行探索，还是使用 CDN 来存储图像会更有益吗？

编辑：图像在 50-130k 之间变化。大约 600 像素宽，高度不同。 72dpi。

页面当前挂起很长时间，这是我希望改进的（平均加载时间为 15 秒）。

【问题讨论】：

【解决方案1】：

您可以对所有图像使用新的loading 属性，然后使用CDN 在滚动期间立即提供图像，给人一种图像已经可用的印象。浏览器将执行其他所有操作。您甚至不需要 javascript 延迟加载库来处理此问题。

<img src="https://pagecdn.io/lib/browser-logos/chrome.png" loading="lazy" />

但是，目前只有 Chrome 支持此功能，并将很快登陆 Edge。对于不识别loading属性的浏览器，如果用户有足够的带宽来并行图片分发，CDN仍然会加速图片分发。

【讨论】：