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

我希望提高页面速度。 它在中有大约100个图像，使用砌体JS进行布局

探索使用延迟加载还是使用CDN处理图像更有益

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

---

该页面目前已挂起多年，这是我希望改进的（平均15秒加载时间）。

您可以对所有图像使用新的

加载

属性，然后在滚动过程中使用一个来即时提供图像，给人一种图像已经可用的印象。浏览器将完成其他所有操作。您甚至不需要javascript lazyload库来处理这个问题

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

---

然而，目前只有Chrome支持此功能，并且很快将在Edge中登陆。对于无法识别加载属性的浏览器，如果用户有足够的带宽来并行图像传输，CDN仍将加快图像传输速度。

对图像同时使用延迟加载和CDN以提高性能。为什么不同时使用这两种方法呢。从CDN延迟加载听起来像是一个成功的组合…原因是客户端。我需要选择一个来推荐，至少一开始是这样。什么样的形象？决议照片？文件大小？如果是15秒的初始加载时间，那么如果您现在必须只选择一个，则选择延迟加载