2021 年网页图片加载的极致优化

Malte Ubl 的 列表 用于

8 种图片加载优化技巧，以最大程度地减少网页加载图片所需的带宽和图片显示的 CPU 使用率。

1. 在 CSS 中使用流体宽度图片，不要忘记 HTML 中的 height 和 width 属性，以便在首次渲染时获得正确的纵横比。
2. 使用 content-visibility: auto;
3. 在可以的情况下发送 AVIF。
4. 使用响应式图片语法。
5. 为图片设置较远的过期头，并制定缓存清除策略（例如更改文件名）。
6. 使用 loading="lazy"
7. 使用 decoding="async"
8. 使用内联 CSS/SVG 创建模糊占位符。

显然，只有一个工具可以做到这一切：eleventy-high-performance-blog。

我的想法

• 如果正在进行 lazy 加载，是否真的还需要使用 content-visibilty？它们看起来非常相关。
• 提供 AVIF 通常 很好，但它似乎不像 WebP 那样简单明了。您需要确保您的 AVIF 版本既更好又更小，这在目前感觉像是一个手动过程。更新：有人告诉我，总的来说，AVIF 实际上比 WebP（至少比 JPG）更可靠地更小。我仍然认为小心谨慎是值得的。这让我更希望将格式选择外包给云提供商，让他们提供他们能够生成的最小格式。
• 解码这方面看起来很奇怪。如果它是一个免费的性能提升，我一定会使用它，但如果它总是一个好主意，浏览器不应该总是这样做吗？
• 我不太相信模糊占位符与其他内容属于同一类别。感觉像是一种趋势。

直接链接 →