图片如何影响用 户体验和核心网络生命力

RAHIM22

为了降低对首次输入延迟的影响：避免图像导致与其他关键资源（如 CSS 和 JS）发生网络争用。虽然不会阻塞渲染，但它们会间接影响渲染性能。
注意：构建在 上的现代图像组件，如Next.js（用于 React）和Nuxt 图像（用于 Vue），默认情况下会尝试尽可能多地融入这些概念。我们稍后会介绍这个。您当然也可以直接使用元素手动执行此操作。如果将 11ty 用于您的静态站点，。


您可能听说过 Core Web Vitals (CWV)。这是 Google 的一项举措，旨在分享质量信号的统一指南，这些信号对于在网络上提供出色的用户体验至关重要。CWV 是Google 搜索将评估排名的一组页面体验信号的一部分。图像可以通过多种方式影响 CWV。


图片可以通过多种方式影响 Core Web Vitals。例如，LCP 测量用户视口中最大的内容元素 WhatsApp 数据库（图像、文本）（例如这些图像之一）何时变得可见。（大预览）

在许多现代网络体验中，图像往往是页面完成加载时最大的可见元素。其中包括英雄图片、轮播图片、故事和横幅。Largest Contentful Paint (LCP) 是一项 Core Web Vitals 指标，用于衡量用户视口中最大的内容元素（图像、文本）（例如这些图像之一）何时变得可见。


这允许浏览器确定页面的主要内容何时完成呈现。当图像是最大的内容元素时，图像加载的速度会影响 LCP。除了应用图像压缩（例如使用Squoosh、Sharp、ImageOptim或图像 CDN）和使用现代图像格式之外，您还可以调整元素以提供图像的最合适的响应版本或延迟加载它。