如何优化您的 LCP（使用视觉效果！）

最大内容绘制 (LCP) 衡量的是页面加载速度。但它的意义远不止于此：它不仅影响用户体验（即跳出率），还会影响 SEO。

如果没有一些指导，优化可能会很困难，所以我希望以下提示对您有所帮助：

如何测量 LCP

首先，LCP 究竟是如何测量的？以下是web.dev 的描述：

最大内容绘制 (LCP) 指标报告视口内可见的最大图像或文本块的渲染时间，相对于页面首次开始加载的时间

使用 CDN 和预生成

尽可能使用 CDN 缓存预先生成所有页面和内容。这可以确保响应时间快速，内容能够尽快显示

了解更多：https://web.dev/optimize-lcp/#route-users-to-a-nearby-cdn

预先连接到重要来源

预连接到外部域以使用以下方式建立与重要来源的早期连接<link rel="preconnect">：

了解更多：https://web.dev/uses-rel-preconnect/

优化图像

重要的是，务必优化并优先处理您的图片。使用下一代格式、优化尺寸，并优先处理 LCP 图片，并延迟加载其他图片。

该主题详细介绍了推荐的图像优化最佳实践：

删除阻塞的 JS

现在是 2022 年了，已经没有理由再使用阻塞式 JS 了。确保所有 JS 都异步加载，或者更好的做法是，使用Partytown的 Worker 加载。

了解更多：

• https://web.dev/optimize-lcp/#render-blocking-resources
• https://web.dev/efficiently-load-third-party-javascript/

删除阻塞 CSS

同样，尽可能删除阻止外部获取的 CSS。

CSS-in-JS 库（例如 styled-components 或 emotion）可以对此提供很大帮助，或者可以使用可以提取和内联关键 CSS 的工具。

了解更多：https://web.dev/extract-critical-css/

减少 JS 执行

JS 执行时间也会严重影响你的 LCP 时间。请务必优化你的网站或应用，使其启动时所需的 JS 代码尽可能少。

一些可以帮助您自动化此操作的项目包括Qwik、Partytown、Marko和Astro

使用 API 驱动的服务

那么，如果没有内容管理和优化的方法，任何网站都是不完整的。为了获得最佳性能，尽可能选择 API 驱动的服务，而不是那些需要浏览器内 JS 的服务。

一些用于管理内容、资产和测试的优秀服务包括Builder.io、Cloudinary、LaunchDarkly和Contentful

测量，测量，测量！

一定要在真实世界的模拟设备上测量你的 LCP（注意：不是你强大的台式电脑！）。这里有一些很棒的工具可以做到这一点

• Builder.io 性能洞察- 可以告诉你哪些方面可以带来最大的改进
• Google Pagespeed Insights - 可以提供很多很棒的详细建议
• WebPageTest - 可以让您深入了解各种设备、浏览器和位置的性能

后续步骤

要了解有关优化 LCP 的更多信息 - 这是一篇很棒的文章，其中详细介绍了上述许多主题！

PS - 这篇文章的灵感来自Filip Rakowski 的这条精彩推文，快去关注他吧！