鉴于 LCP 的复杂性，简单地列出单独的优化技术会适得其反。
相反，我们将 LCP 值分解为四个子部分，它们之间没有重叠或间隙，并且共同加起来就是完整的 LCP 时间：
- 第一个字节的时间 (TTFB)
- 资源加载延迟
- 资源加载时间
- 元素渲染延迟
＃1：减少第一个字节的时间（TTFB）
将 TTFB 视为良好 LCP 分数的 工程师数据库 基准 – 例如，如果 TTFB 为 1 秒，则无论您对其进行多少优化，您的 LCP 都不能低于 1 秒。
较低的 TTFB 需要一些基本要素来确保您的网站拥有高性能的生态系统，例如：
- 选择好的托管服务提供商
- 避免重定向
- 缓存您的网站
- 使用内容分发网络 (CDN)
#2：消除资源加载延迟
理想情况下，您希望 LCP 元素 10 个最佳内容营销技巧，助你实现业务巨大成功 与网页加载的第一个资源同时开始加载。
为了实现这一点，您应该使用优先级技术来告诉浏览器您希望何时获取 LCP 元素：
- link rel=”preload” 图像和字体（取决于你的情况）
- 从您为网页启用的任何延迟 CA 细胞数 加载中删除您的 LCP 元素
＃3：消除资源加载延迟
减少将资源传送到浏览器所需的时间对于减少 LCP 时间至关重要。结合使用几种众所周知的技术会有所帮助：
- 压缩和调整图像
- 使用WebP 等现代图像格式
- 减小字体文件大小
- 一般来说，尽量避免在 LCP 区域（即折叠上方）播放视频
＃4：消除元素渲染延迟
为了有效降低 LCP 分数，必须在 LCP 元素加载完成后立即呈现它。
为了确保没有其他元素阻止或延迟其渲染，您可以：
- 生成关键 CSS
- 推迟或完全消除阻塞渲染的 JavaScript
- 设置 font-display 属性以告诉浏览器使用系统字体，直到自定义字体准备就绪，然后在加载后将其换出
最大的内容绘制优化：前后示例
使用演示网站和实验室环境，我们从 13 秒的 LCP 分数开始，在应用上面讨论的所有优化后，我们能够将其降至 1.9 秒。
作为参考，低于 2.5 秒的 LCP 分数被视为“良好”，并将在您的核心 Web 指标评估中显示为“通过”。LCP
优化之前：13 秒的 LCP 值
LCP优化后：1.9秒LCP值
Google 和 NitroPack 最大的 Contentful Paint 常见问题解答
如果您有几张大小完全相同的图像，那么哪一个是 LCP？
最大内容绘制将整个元素视为主要候选。如果图像位于同一容器中，则所有图像都将被视为最大内容。如果不是，则首先出现的图像（页面较高位置）通常被视为 LCP。
如果我在移动设备和桌面上有不同的 LCP 图像，我应该针对哪一个进行优化？
优化两者很重要，但要重点关注大多数用户来自的平台。如果更多用户通过移动设备访问您的网站，请优先考虑移动优化。务必检查您网站的分析以指导您的决策。
如果您的网站是本地网站而非全球网站，是否真的需要 CDN？
如果您的网站资源不需要跨越国家/地区几百公里，CDN 可能被视为可选。但是，一个重要的细节是，通过跳过 CDN 服务，所有传入流量都会流向您的原始服务器，这通常会导致总体性能不佳，甚至在某些极端情况下导致服务器停机。总之，请考虑启用托管附带的 CDN，这是一个经济实惠的选择。
通过广告访问网站会影响 LCP 时间吗？
使用缩短链接（付费广告系列中很常见）时，用户通常要等待至少一次重定向才能进入您的页面。这一切都计入您的 LCP 分数。虽然这超出了您的控制范围，但您可以确保着陆页简单且经过优化，以尽快吸引用户。
