LCP：大视觉效果

图像优化中的 LCP 焦点

在许多网站上，LCP 元素通常是主图像（英雄图像）。如果此图片加载较晚，则意味着您的网站在 Google 眼中速度很慢。提高 LCP 分数会直接影响用户体验和搜索排名。

LCP 改进策略

• 预加载：使用 尽早向浏览器声明主 LCP 图像。
• 现代格式：使用 WebP 或 AVIF 在不损失质量的情况下节省 50-70%而不是 JPG
• 响应式图像：使用 srcset 和 sizes 停止向移动用户发送巨大的桌面图像。
• CDN 使用：通过从边缘服务器提供图像来减少物理距离造成的延迟。

获取优先功能

您可以将 HTML5 附带的 fetchpriority="high" 属性添加到您的 LCP 图像中，以便浏览器优先处理该资源。 Chrome 101+ 版本支持此功能。

延迟加载警告

切勿将 loading="lazy" 添加到 LCP 映像！这会延迟图像加载，从而降低您的 LCP 分数。延迟加载只能用于非首屏图像。