修复由自动尺寸图片引起的 Layout Shift

修复由自动尺寸图片引起的 Layout Shift

您是否知道，仅凭一条 CSS 声明就能轻松毁掉您的 Core Web Vitals？这种方法非常简单且极为常见。它在实际项目中随处可见，我已经见过很多次了，它会严重破坏您的 CLS。

就是它：这小段代码会自动让页面上所有图片发生位移。即使图片的宽度和高度已经被明确设置，它仍然会导致 layout shift！即使设置了正确的 aspect-ratio CSS 值也无法修复这个问题！

这是一个隐蔽的 Layout Shift 问题，因为它只会在首次访问时发生。由于您作为网站管理员，浏览器缓存中可能已经有该图片，所以您可能不会立即注意到 Layout Shift。

我们是如何发现这个问题的？

这类问题很难检测，因为它们主要出现在使用低带宽移动设备的新访客身上。答案是 RUM 监测。RUM 监测为真实用户追踪 Core Web Vitals 并将结果报告给您。 RUM 监测非常适合发现隐藏的 Core Web Vitals 问题！

它是如何工作的？

这小段 CSS 代码有时用于响应式图片。当图片未被浏览器预缓存时，浏览器无法知道图片的固有宽度和高度。使用这段代码，浏览器会忽略设置的宽度和高度，尝试用固有宽度和高度来渲染页面。由于固有尺寸未知，图片会先以 0x0 像素渲染，只有当图片下载并解码完成后，才会重新渲染并占据正确的像素空间。

1. height: auto; 确保图片在调整大小时始终具有正确的高度。
2. max-width:100%; 确保图片永远不会大于可见视口。
3. width:auto; 部分会为未缓存的图片生成 layout shift，即使您明确设置了宽度和高度或 aspect ratio。

如何修复？

修复方法很简单。只需移除 width:auto。这将强制浏览器使用给定的图片宽度，并根据高度计算自动高度。

所以帮自己一个忙，花 15 秒钟，检查您网站上的任意一张图片（右键点击，检查元素），查看是否有 width:auto; 和 height:auto;。如果有，赶紧修复它！