AI 生成内容的图像优化
AI 图像带来了一个独特的性能问题。在生成完成之前，你无法预知图像的大小、格式或内容。但你仍然需要防止加载缓慢和布局偏移。
在构建一个免费 AI 图像生成器时，我采用了以下步骤。
标准优化假设你可以预先知道图像。你可以在构建时计算尺寸并进行优化。但生成的图像打破了这一规则。在用户发起请求之前，图像并不存在。
如何处理交付：
- AI 的原始输出通常是 PNG。PNG 文件体积过大，通常在 800KB 到 1.2MB 之间。
- 将图像转换为 WebP。在相同质量下，WebP 文件比 PNG 小 25% 到 35%。
- WebP 使用 85 的质量设置。AI 图像具有天然的纹理噪声。更高的设置会增加文件大小，但不会提升视觉质量。
如何防止布局偏移：
用户在点击生成之前会选择宽高比。请利用好这一点。
- 根据所选比例（1:1、16:9 等）预设容器尺寸。
- 这可以让容器在图像到达之前保持正确的尺寸。
- 这可以消除累积布局偏移 (CLS)。
如何提高加载速度：
生成的图像通常是最大内容绘制 (LCP) 元素。
- 在代码中将该图像标记为优先级。
- 为你的 CDN 使用 preconnect 链接。这可以提前处理 DNS 和 TLS 握手。
- 使用占用最终图像精确空间的骨架屏 (skeleton loader)。
缓存策略：
- 不要通过推理层进行缓存。每一次请求都应该感觉是“新鲜”的。
- 在 CDN 层进行缓存以提高交付速度。
- 每张图像都有唯一的 URL，因此进行激进的缓存是安全的。
这些改进带来的结果：
- 平均大小：900KB 降至 200KB。
- LCP：4.1s 降至 1.9s。
- CLS：已消除。
行动总结：
- 以 85 的质量转换为 WebP。
- 使用选定的宽高比预设容器尺寸。
- 将主图像设置为优先加载。
- 在 CDN 层进行大量缓存。
- 仅对首屏以下 (below the fold) 的次要内容使用懒加载。
Optional learning community: https://t.me/GyaanSetuAi