Question

我正在寻求提高网页速度。它有大约100张图像，使用Masonry JS进行布局。

探索使用延迟加载或为图像使用CDN会更有益吗？

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

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

Answer 1

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

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

但是，此功能目前仅在Chrome中受支持，它将很快在Edge中启用。对于无法识别加载属性的浏览器，如果用户有足够的带宽来并行化图像传送，CDN仍将加快图像传送。