因此累积布局变化试图

rmamin

衡量内容的不稳定性。很多时候，推动布局转变的常见因素是页面上没有设置尺寸的图像或其他元素。我认为这是人们通常可以直接设置图像尺寸的地方之一。也许这不是我们历史上做过的事情，但肯定值得您花时间去做。像lighthouse这样的工具会尽力帮助你收集，比如你的页面上需要尺寸的图像列表是什么？所以你可以去设置它们。
德鲁·麦克莱伦：我想说，这是一个非常有趣的观点，因为当响应式网页设计成为一种事物时，我们都浏览了我们的网站并去掉了图像尺寸，因为我们可以使用的工具来完成这项工作，但我们没有我们图像的高度和宽度属性。但现在这是个坏主意，不是吗？
阿迪·奥斯马尼：旧的又是新的我想说，在图像上设置尺 电报号码数据 寸绝对值得。在广告、眼睛框架以及任何可能会改变尺寸的动态内容上设置尺寸都值设置尺寸。
阿迪·奥斯马尼：对于那些正在构建真正有趣的体验的人来说，有一个错误的短语，真正有趣的布局体验，也许你需要在响应式卡片等方面做更多的工作；我会考虑使用 CSS 宽高比或宽高比框来保留您的空间。这可以补充这些图像上的尺寸设置，并确保当您试图避免布局变化时，事情尽可能固定。
阿迪·奥斯马尼：最后，最后一个 Core Web Vital 是第一个输入延迟。这是人们在涉及图像时不一定总是考虑的事情。因此，图像事实上有可能在页面加载时阻塞用户的带宽和 CPU。它们可能会妨碍其他关键资源的加载，特别是在非常慢的连接或可能导致带宽饱和的低端移动设备上。
阿迪·奥斯马尼：因此，首次输入延迟是一个核心 Web 重要指标，它捕获用户对网站交互性和响应能力的第一印象。因此，通过减少主线程 CPU 使用率，您的首次输入延迟也可以最小化。因此，一般来说，只要避免可能导致网络争用的图像即可。它们不会阻塞渲染。但它们仍然可以间接影响您的渲染性能。
德鲁·麦克莱伦：我们可以对图像做些什么来阻止它们渲染阻塞吗？我们能否在初始阶段减轻浏览器的负载，使我们能够更快地进行交互？



阿迪·奥斯马尼：我认为，如今，充分了解用于显示首屏内容的最佳图像序列变得越来越重要。我知道首屏是一个重载的术语，但就像在用户的第一个视图端口中一样。很多时候，我们最终可能会尝试请求大量资源，其中一些是图像，这对于用户立即看到的内容来说并不是真正必要的。这些往往是页面生命周期后期加载的绝佳候选者，是延迟加载到位的好东西。但是，如果您在很早的时候请求大量图像，例如一整串事物，那么这些图像可能会产生影响。
德鲁·麦克莱伦：是的。所以，我的意思是，你提到了我们历史上需要 JavaScript 库来完成的延迟加载图像，我认为这有其自身的缺点，因为浏览器优化加载图像的历史方式，几乎不可能阻止它们加载图像，除非你不给它来源。如果你不给它一个来源，然后尝试用 JavaScript 纠正它，如果 JavaScript 不运行，你就得不到图像。所以延迟加载，本机延迟加载就是这一切的答案。
阿迪·奥斯马尼：是的，绝对是。我认为这是我们去年尝试改进跨浏览器的本地延迟加载体验的地方。如您所知，这是我们早期发布的功能之一，我们能够利用与行业思想领袖的对话来理解，“哦，嘿，您实际上手动设置的阈值是什么？如果您正在使用延迟大小或正在使用其他 JavaScript 的延迟加载库？” 然后我们调整了阈值，尝试稍微接近您期望的值。