LCP优化的几种方法，一键优化LCP 插件 WP Meteor LCP指标优化

傻瓜式 LCP优化插件 WP Meteor ，详细解读优化LCP 的方法

优化LCP 可以使网站在搜索引擎中更多的展现，从而获取更多流量，LCP优化 最简单的方法就是安装 WP Meteor ，这个插件可以一键优化LCP的速度，延迟加载JS文件等，WP Meteor 没有复杂的设置，只有简单的一个按钮，开箱即用，简单上手，非常适合小白用户，下面给大家详细介绍 LCP优化的几种方法。

使用WP插件，进行 LCP优化后的LCP 指标低于2.5，在插件中搜索 WP Meteor 安装即可使用，WP Meteor 是优化页面速度的全新方式。它甚至可以在您现有的优化之上运行，包括：

自动优化
可湿性火箭
WP 总缓存
WP超级缓存
LiteSpeed缓存

LCP优化的几种方法

最大内容绘制(LCP) 衡量最大的折叠上方元素加载到页面上所需的时间。
减少您网站的LCP 有助于用户更快地查看您网站上的基本内容。
PageSpeed Insights 中的“诊断”部分会显示哪个元素触发LCP 指标。

DevTools 中的“性能”面板也可以做同样的工作。

要改善页面的LCP 时间，您必须优化该元素的加载时间。下面有五种有效的方法来可以来改善您的LCP 指数，修正之后当然也有助于改善FCP、CLS 和TTI这些分数。

1. 图像优化

图像优化是一组技术，可以改善所有负载指标并减少布局偏移(CLS)。图片压缩更是重要的一环。压缩意味着应用不同的算法来删除或分组图像的各个部分，使其在此过程中变得更小。而有两种类型的压缩- 有损和无损。

有损压缩会从文件中删除部分数据，从而导致质量较低的轻量级图像。JPEG 和GIF 是有损图像类型的示例。
无损压缩保持大致相同的图像质量，即它不会删除任何数据。它产生沉重、高质量的图像。RAW 和PNG 是无损图像类型。

现在已经有很多很棒的工具可以完成这项工作，像是imagemin或是Optimizilla。

另外，随着您网站的发展，可能会添加越来越多的图片。您将需要一个能够自动将图像优化到所需级别的工具。

选择正确的格式

关于图像格式之间进行选择棘手的事情是寻找质量和速度之间的平衡。高质量的图像很重但看起来很棒。低分辨率的看起来很糟但加载速度更快。

在某些情况下，需要高像素图像才能在竞争中脱颖而出，像是摄影和时尚网站。对于新闻网站和个人部落格等，低像素则完全没问题。这是可以用作指南的快速规则。

将SVG 用于由简单几何形状（如徽标）组成的图像；
牺牲速度同时保持质量时，请使用PNG；
在质量和UX 之间取得最佳平衡，使用WebP，同时保留原始格式作为备。因为WebP 没有100% 的浏览器支持。

不要忘记在选择图像类型后尝试压缩图片。

使用srcset 属性

处理图像时的一个典型错误是为所有设备的尺寸提供同一张很大的图像。大图像在较小的设备上看起来不错，但浏览速度非常慢。

更好的方法是提供不同的图像大小，让浏览器根据设备决定使用哪一个。为此，请使用srcset 属性并指定要提供的图像的不同宽度。下面是一个例子：

如您所见，对于srcset，我们使用w 而不是px。如果您希望图像版本为600px 宽，则必须编写600w。同样，这种方法将图像大小的选择外包给浏览器。您只需提供选项。

Airbnb 的网站采用了这种方法：

在决定正确的图片尺寸时，请使用Google Analytics（分析）来计算通过桌面或移动设备访问您网站的受众群体的百分比。“设备”报告还包含有关访问者使用的特定设备的深入信息。

您还应该使用DevTools 检查图像在不同视口上的外观。

当需要更改图像大小时，请使用Smart Resize批量调整大小。

WordPress 用户注意事项：从4.4 版开始，WP 会自动创建不同版本的图像。它还添加了srcset属性。如果您是WordPress 用户，您只需要提供正确的图像尺寸。

预加载 hero 图片

最后一个技巧是关于优化浏览器发现 hero 图像的速度。hero 图像通常是折叠元素上方最有意义的，因此更快地加载它们对于用户体验至关重要。

福布斯网站预载了首页最大的首屏图片：

这种技术告诉浏览器在呈现页面时优先考虑该特定图像。预加载可以显著改善LCP，尤其是在加载了以下内容的 hero 图像的页面上：

JavaScript；
CSS 中的background-image 属性。

2. CSS 和JavaScript 优化

在浏览器呈现页面之前，它必须加载、解析和执行在解析HTML 时找到的所有CSS 和JavaScript 文件。这就是默认情况下CSS 和JavaScript 都阻止渲染的原因。如果不加以优化，它们会减慢页面加载速度，从而损害您的LCP。以下是优化它们的方法:

缩小和压缩代码文件

缩小从代码文件中删除不必要的部分，如注释、空格和换行符。它可以减少中小型文件大小。另一方面，压缩通过应用不同的算法来减少文件中的数据量。它通常会大大减少文件大小。

在性能方面，这两种技术都是必须的。一些托管公司和CDN 提供商默认应用这些技术。值得检查一下它们是否已在您的网站上实施。

您可以使用DevTools 中的“网络”选项卡并分析文件的响应标头以查看是否是这种情况：

大多数缩小文件的名称中都有“.min” 。压缩文件有一个内容编码响应头，通常带有gzip 或br 值。

如果您网站的文件没有被缩小或压缩，我建议您立即开始。询问您的托管公司和CDN 提供商是否可以为您执行此操作。如果不能，有很多缩小和压缩工具。

实施关键CSS

实施关键CSS 是一个三步过程，包括：

在不同视口上查找折叠内容上方的样式的CSS；
将该CSS 直接放置（内联）到页面的head标签中；
推迟CSS 的其余部分。

您可以首先使用DevTools 中的“Coverage”面板来计算页面上每个CSS 文件的使用量。

您可以按类型排列资源并浏览每个CSS 和JS 文件。

显然，页面上未使用的CSS 并不重要。在这一点上，值得尝试删除或减少这个未使用的CSS，因为它会减慢渲染速度。

接下来，要提取关键CSS，您需要手动检查代码或使用工具。这项工作的两个很好的选择是criticalCSS和critical。

提取后，将关键CSS 内联到页面的head 标记中。

最后，异步加载其余的CSS。Google 建议使用link rel="preload" , as="style"，一个空的onload处理程序，并将样式表的链接嵌套在noscript元素中。

另外，不要忘记考虑不同的视口。桌面和移动用户在折叠内容上方看不到相同的内容。要充分利用此技术，您需要根据设备类型使用不同的关键CSS。

提供更小的JavaScript 负载

JavaScript 是整个网络加载时间缓慢的主要原因之一。像图像一样，如果您想要出色的性能，就必须优化网站的JavaScript。

对于LCP，拆分JavaScript 包是提高分数的好方法。这个想法是只发送初始路由所需的代码。未包含在初始捆绑包中的所有内容都应稍后提供。这样一来，需要一次解析和编译的JavaScript 就更少了。该工作有些流行工具的WebPack，汇总和browserify。有关代码拆分的更多信息，请查看web.dev 的这篇文章。