网页优化
图片与 Core Web Vitals：改善 LCP 和 CLS
图片影响哪些指标
大幅首屏图片可能成为 LCP 元素，其请求发现时间、传输体积及解码过程都会影响主要内容出现。未预留空间的图片会引起布局移动，影响 CLS。图片相关脚本的工作量也应控制，避免阻塞交互。
让关键图片及时加载
不要延迟加载首屏关键图片。尽量在初始 HTML 中提供可发现的资源地址，避免必须等待脚本运行后才开始请求。仅在确有必要时设置高优先级或预加载，并确保没有重复请求同一内容。
降低传输与解码负担
按布局选择合适尺寸，提供响应式候选资源，比较现代格式和压缩质量。巨大的原图即使使用 CSS 缩小，仍可能产生较大的传输及解码负担。CDN 可以改善交付，但不替代源文件优化。
减少布局移动
图片标签应声明正确的尺寸，或者容器提供稳定的宽高比。懒加载的图片和广告区域也要预留空间。检查移动端断点，避免媒体查询切换时占位比例发生意外变化。
测量与回归检查
使用 PageSpeed Insights、浏览器性能面板及实际用户数据定位瓶颈。实验室测试与真实用户数据观察角度不同，不应只看一次分数。修改后比较同一页面、相似条件下的加载记录和视觉效果。
动手处理文件
保留原始文件，先用一个样本检查结果，再处理其他文件。imgpact 在您的浏览器中处理所选文件；首次加载软件仍需要网络连接。