如何通过大量图像提高页面性能

问题描述 投票:2回答:1

我正在寻求提高页面速度。使用Masonry JS进行版式设计,其中约有100张图像。

使用惰性加载进行浏览或对图像使用CDN会更有益吗?

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

该页面目前挂起了一段时间,这是我希望改进的地方(平均15秒的加载时间)。

performance lazy-loading cdn
1个回答
0
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.