我们通常谈论因此您可

rmamin

能在页面中使用关键 内联 CSS，希望避免渲染阻塞的情况，但是当涉及到您的图像时，理想情况下您应该尽早请求该图像。也许这只是确保浏览器能够尽早在页面中发现该图像，因为现在我们很多人都依赖框架。

阿迪·奥斯马尼：如果您不一定使用 SSR、服务器端渲染、如果您正在等待浏览器发现某些 JavaScript 捆绑包、组件捆绑包、无论您是否有用于英雄图像或产品图像的组件、如果浏览器必须等待获取、解析、执行、编译和执行所有这些不同的文件才能发现图像，这可能意味着您最大的内容丰富的图像将需要一些时间才能被发现。

阿迪·奥斯马尼：现在，如果是这种情况，如果您发现自己处于较晚请 电报号码数据 求图像的位置，则可以利用称为 link rel preload 的浏览器功能来确保浏览器可以尽早发现该图像。现在，预加载是一个非常强大的功能。这也是您需要非常小心的一个。如今，您可能很容易听说我们建议对您的密钥进行预加载 -

阿迪·奥斯马尼：也许您听说我们建议预加载您的关键英雄图像、关键脚本以及关键字体。它变得非常大，需要确保你按照正确的顺序对事情进行排序。因此，LCP 图像绝对是值得牢记的一个关键位置。

阿迪·奥斯马尼：另一件事，正如我提到的四件事，另一件事是确保您使用源集和高效的现代图像格式。我认为该源集非常强大。我有时还看到，当人们使用它时，他们会尝试过度补偿，并且可能会针对每种可能的分辨率发送 10 个不同版本的图像。我们倾向于发现，至少在一些研究中，除了三幅图像之外，用户很难辨别图像质量、清晰度和细节的差异。因此，DPR 上限（设备像素比上限）当然是一个值得牢记的想法。

阿迪·奥斯马尼：然后，对于现代图像格式，我们之前讨论过格式，但请考虑您的 WebP、AVIF、JPEG XL。避免浪费像素。制定良好的质量策略非常重要。我认为在很多情况下，即使是默认质量有时也可能太多。因此，我会尝试降低比特率、降低质量设置，看看在保持清晰度的同时可以为用户带来多远的效果。



阿迪·奥斯马尼：然后，当我们谈论加载时，图像标签在过去几年中不断发展以支持的其他功能之一是延迟加载。因此，随着加载等于延迟加载，您不再需要使用 JavaScript 库来为图像添加延迟加载。您只需将其放到您的图像上即可。在 chromium 浏览器和 Firefox 中，您将能够延迟加载这些图像，而无需使用任何第三方依赖项。这也很好。

阿迪·奥斯马尼：所以，我们已经实现了延迟加载。我们已经支持了同步解码等其他功能，但我将继续保持下去，并快速讨论其他两个核心生命指标。

德鲁·麦克莱伦：去吧，是的。

阿迪·奥斯马尼：因此，摆脱布局变化。没有人喜欢在页面上跳跃的东西。我觉得，我最大的挫折之一就是打开一个网页。我将手指悬停在我想要点击的按钮上，然后突然弹出一堆没有尺寸设置的广告或图像或其他东西。这会导致非常不愉快的体验。