图片与字体优化：提升渲染速度的细节实践

视觉资源往往是页面体积的大头。针对图片与字体进行系统优化，能显著提升 FCP 与 LCP 等关键体验指标。

图片优化要点

• 格式选择：优先使用 WebP/AVIF，必要时提供回退格式。
• 响应式图片：使用 srcset 和 sizes，按视口提供不同分辨率图像。
• 懒加载：对可滚动区域以外的图片延迟加载，减少首屏请求。

字体优化要点

• 子集化：仅打包页面使用的字形，特别是多语言项目。
• font-display：使用 font-display: swap 减少字体加载时的阻塞渲染。

构建链中自动化处理

• 在构建阶段生成不同尺寸、格式的图片，并使用 manifest 或工具自动注入正确资源。
• 对字体做二次打包与缓存策略，避免每次页面切换都重新下载字体。

小结

图片与字体优化看似琐碎，但对于提升感知性能至关重要。把这些优化纳入构建流程和 CI 检查，可以长期提升用户体验。