使用链接中的预览图像预加载图像以提高性能

Posted 2023-03-28

【中文标题】使用链接中的预览图像预加载图像以提高性能

【英文标题】：Preloading Images With A Preview Image Like Linked In To Improve Performance

【发布时间】：2021-11-19 10:10:40

【问题描述】：

我正在寻找预加载图像的最有效方式。我熟悉延迟加载等，但我正在寻找特定的东西。例如，LinkedIn 在加载时会在加载物理帖子图像之前为所有帖子预加载通用 svg 图像。

我想为网站做同样的事情，并使用单一图像或背景颜色，同时预加载图像直到准备好。我也很想知道这是否是符合核心网络生命力的最佳方法。

也许我在谷歌上搜索了错误的术语，但据我了解，该方法可能是使用 src 和 data 属性的组合，或者可能用 JQuery 覆盖图像加载以加载占位符。我不确定，但如果有人可以向我指出一些文档或给我一个很棒的演示。

提前致谢

【参考方案1】：

我认为您正在寻找的术语是“占位符”或可能是“低质量图像占位符”。预加载通常是指using preload resource hints 提前加载资源。对于 Core Web Vitals，如果您决定对图像使用预加载，您可能应该将其使用限制为单个图像 - 可能是主图像。 这些链接可能会有所帮助：

https://jmperezperez.com/medium-image-progressive-loading-placeholder/ https://web.dev/patterns/web-vitals-patterns/placeholders/placeholders/

【讨论】：

是的，所以我不是在谈论 LCP 的整体图像，正如您所说的基于占位符 svg 的图像甚至是背景颜色，直到图像可用。我应该解释得更好一点。我去看看你引用的资源，谢谢