网站如何优化内容(什么是最大内容涂料(LCP)?也就是说大多数现代网站详解)
优采云 发布时间: 2021-11-03 20:02网站如何优化内容(什么是最大内容涂料(LCP)?也就是说大多数现代网站详解)
什么是最大含量涂料 (LCP)?
在大多数网页上,都有一个元素因其大小和突出程度而引人注目。例如,考虑这个登陆页面,其中英雄部分在视口中占主导地位:
那个英雄部分代表这个特定页面的最大内容绘图(LCP)。换句话说,LCP 是 网站 渲染收录最多内容的元素所需的时间。
如果你想知道这个页面的LCP,你需要测量加载英雄部分所花费的时间。理论上,如果你的 LCP 分数低,说明你的 网站 优化得很好,可以为用户快速加载。
重要的是要了解 LCP 分数可能(并且希望会)与您的 网站 整体加载时间不同。您可能有一个页面需要 3 秒才能完全加载,但它的 LCP 可能只有 2 秒。这是因为大多数现代 网站 也在文本和媒体文件之上加载脚本。
通常,LCP 与 First Contentful Paint (FCP) 齐头并进。这是一个指示器,它告诉您当有人访问您的 网站 时,第一个元素呈现任何内容需要多长时间。综合起来,这些指标(或 Google 的 Core Web Vitals)可以让您比整体加载时间更深入地了解 网站 的性能。
请记住,Google 在衡量您的 网站 LCP 时不会考虑所有内容。它将忽略可缩放矢量图形 (SVG) 文件和视频等元素,但这些元素可能会收录在 Google 的 Core Web Vitals 中,在未来的更新中。
如何测量 LCP
通常,很容易确定 网站 上最大的内容元素。您所要做的就是等待页面完全加载并环顾四周。在大多数情况下,一个部分或元素比其他部分或元素更突出。正如我们上面提到的,它可能是英雄部分,也可能是博客中的实际帖子内容。
它通常是一张图片或一段文本(例如上面的英雄部分或一般的博客内容)。LCP 也因用户而异,因为它基于他们的视口(或折叠内容上方)。
LCP 的真正技巧是测量加载特定元素所需的时间。(不是页面本身。)幸运的是,如果您曾经使用过可以测量加载时间的工具或服务,那么它很可能还收录详细的指标,例如 FCP 和 LCP 分数。
例如,考虑 PageSpeed Insights。您可以输入任意网址,服务将对页面进行完整的性能测试。在结果中,您将看到整体性能得分。其他指标也会在字段数据部分细分——包括LCP:
PageSpeed Insights 会从多个用户那里采集真实的性能数据,并使用它为您提供一段时间内的汇总分数。这种方法比使用单一测试来确定您的 网站 性能要准确得多。
此*敏*感*词*内。这意味着对于某些用户,LCP 将需要更长的时间来解决。
重要的是要了解,即使您的 网站 优化得很好,加载时间也会因您的用户群而异。某些访问者的 Internet 连接速度可能较慢,或者可能离您的服务器太远。这些只是在某些情况下加载时间可能更长的众多原因中的两个。这就是为什么将平均分数作为参考很重要的原因。
如果您进一步向下滚动 PageSpeed Insights 结果页面,您将看到实验数据部分。在这里,Google 为您提供它刚刚在您的网页上运行的测试的精确结果:
PageSpeed Insights 使用此实验数据为您提供您在结果开始时看到的总分。实验数据不能提供综合的现场信息等综合信息。但是,它仍然可以让您很好地了解 网站 的性能。
理想情况下,您的 LCP 分数应小于 2.5 秒(相比之下,FCP 是理想的 1.8 秒)。这次越低越好。为了获得最佳分数和体验,您的整体加载时间应保持在 3 秒以下。之后,您通常会开始看到跳出率显着增加。
根据我们的经验,PageSpeed Insights 是您可以用来衡量 LCP 和整体加载时间的最佳工具。但是,如果您为 网站 设置了 Search Console,您也可以访问相同的信息,我们绝对推荐它用于搜索引擎优化 (SEO) 目的。
如果想查看谷歌以外的内容,也可以使用浏览器的开发工具手动测量LCP时间。大多数开发工具包使您能够测量页面加载时间,提供有关加载每个元素和处理每个请求所需时间的详细信息。但是,与使用第三方服务相比,这种手动方法涉及的工作要多得多。
您还可以使用 GT Metrix 和 Pingdom 的速度测试等服务来查看有关 LCP 和其他页面加载指标的更多信息。
如何优化您的 LCP 分数
如果您可以识别页面上最大的元素,则应该能够对其进行优化。例如,如果元素是图像,您始终可以使用压缩工具来减小其文件大小并提高 LCP 分数。
但是,这个方法只适用于你的网站没有很好的优化。如果您已经采取措施提高 网站 的性能,那么您需要考虑不同的方法来优化其 LCP 分数。
根据我们的经验,您可以通过以下最有效的优化来提高 网站 的 LCP 分数:
一般来说,如果你正在以任何方式提高 网站 的性能,所有这些优化方法都是标准建议。如果你花时间优化你的 网站,你的 LCP 分数应该会相应下降,你的用户会因此而高兴。
如果您是 Divi 用户,其中许多事情都是自动为您完成的。例如,Divi 主题的关键 CSS 特性会自动取出阻止渲染并延迟加载的资源。这就是为什么 Divi 如此之快并且开箱即用地获得出色 LCP 分数的众多原因之一!
关于最大内容绘制 (LCP) 的常见问题
理解 LCP 之类的概念不如理解单个页面的整体加载时间直观。考虑到这一点,以下是我们看到的有关 LCP 分数的一些最常见问题。
LCP如何适应我网站的整体表现?
在衡量你的网站的性能时,单一的整体加载时间并不能让你准确地了解你的页面的优化程度。关注 LCP 等特定指标可以让您更好地了解服务器的响应方式。它还告诉您用户需要多长时间才能完全查看您的 网站。关注 LCP 或其他指标只会提高 网站 的整体表现,因为它们是更大整体的一部分。
WordPress Garden 建议您也阅读此文章 以简化您的在线预订系统
LCP 与页面加载时间相同吗?
网站 所有者通常会测试他们的页面并检查每个页面的加载时间。一些性能测量工具给你一个单一的数字,没有别的。但是,LCP 等个别指标可以帮助您更好地了解用户访问您的 网站 时实际发生的情况。
LCP 很可能在整个页面加载之前发生。并且某些元素可能会在它之后填充(较大的文件大小或图像)。理想情况下,您的 LCP 时间将比您的整体页面加载时间快。
除了LCP,还有哪些核心的web元素?
Core Web Vitals 是 Google 在尝试确定 网站 是否提供强大的用户体验 (UX) 时考虑的一个指标。LCP 只是其中之一。其他包括首次输入延迟 (FID) 和累积布局偏移 (CLS)。您还可以检查 First Contentful Paint (FCP),它与用户对页面加载速度的看法更相关。
综上所述
在评估您的 网站 性能时,最好不要关注单个数字,例如加载主页所需的时间。虽然这很重要,但 LCP 等个别指标可以帮助您确定可能需要改进的特定元素和领域。
每个页面的最大内容绘制让您知道访问者必须等待页面加载到足以让他们理解它的时间。有了FCP,就是查看页面所需的时间。即便如此,他们可能需要等待更长的时间,直到它变成可交互的,这可能会出现在 LCP 之后。这个指标是个难题。但是,通过优化此分数,您可以在 网站 上提供更好的用户体验。
您对如何衡量或提高您的 网站 LCP 分数有任何疑问吗?让我们在下面的评论部分讨论它们!
来自 NeMaria/ 的精选图片