如何改进最大的满足油漆(LCP)和SEO

WebDesignerDepot员工 经过 WDD员工  |  7月21日,2020年

满足;韦伯斯特的词典定义了“满足”,因为找不到......显然有人弥补了这个词,但这并不一定是坏事。

用户体验度量的世界正在快速移动,因此需要新的术语。最大的满足油漆(LCP)是测量网页上呈现内容渲染时间的多项度量之一。

 

什么是最大的满足油漆?

谷歌将LCP定义为“视口中最大内容元素的渲染时间”。对于我们在这个博客中谈论的内容,我们将考虑“内容”是球彩,通常是JPEG或PNG文件。在大多数情况下,“最大”指向“折叠以上”的英雄球彩,并且是装载页面时的第一个球彩中的第一个球彩之一。对这种最大内容的应用优化对于改善LCP至关重要。

将LCP相对于其他指标观看LCP可能更具赋意。例如,第一个满足油漆(FCP)和视觉上完整的书籍结束LCP。

每个指标都有它的利弊,但LCP是一个快乐的媒介。 LCP标记当网页加载开始对用户体验产生重大影响时。

在Google的意见中,为了提供良好的用户体验,LCP应在页面首先开始加载时发生在2.5秒内。差的值是大于4秒的任何东西。

 

最大的满足油漆如何影响灯塔分数和SEO?

LCP现在是几个“核心网络威力“谷歌将以其排名算法衡量的分数。每个核心Web vitals表示用户体验的不同方面,是可衡量的 在该领域,并反映了批判性的真实体验 以用户为中心 outcome.

在整体谷歌灯塔分数的情况下,LCP代表 25%的性能分数加权 灯塔6.0版。这使得LCP是最重要的核心网络VILVES度量,用于确定性能分数。

虽然谷歌表明内容仍然是SEO排名中最重要的因素,但更好的用户体验(按核心网络vitals衡量)将在拥挤的领域中产生更高的排名。如果有许多网站竞争顶级搜索引擎斑点,那么最大的满足油漆将在排名中发挥关键因素。

 

如何提高最大的满足油漆

既然你知道LCP很重要,你可以通过使内容负荷更快地改进它来改进它?谷歌提供了许多建议,但最有效的技术是优化要求它的设备的内容。

例如,网站包括一个用于高分辨率桌面的800kb的JPEG球彩。在智能手机上,将优化至少于100kb,对质量没有可察觉的影响。 LCP可以通过此单一优化来提高60%以上 - 或数秒。

 

通过使用球彩速度测试查找最大的满足油漆节省

球彩速度测试 是一个伟大的工具提供 imageengine.io. 这提供了对LCP改进机会的分析。只需粘贴您对优化有兴趣的网页的URL中,测试将显示:

  • 球彩有效载荷减少
  • 速度指数
  • 最大的满足油漆
  • 页面加载时间(视觉上完成)

它还提供了一个带有和没有优化的网页加载的视频。最后,它分析了每个球彩,以提供有效载荷节省的估计。在这种情况下,页面上的“最大内容”是此球彩。通过优化,球彩有效载荷减少了94%。这提供了LCP的巨大改进。

 

imageEngine如何改善LCP

Imageengine是An 球彩内容交付网络 (CDN)服务使球彩优化简单。基本上,对于页面上的每个球彩,球彩CDN将:

  1. 检测请求网页的设备型号;
  2. 在大小,压缩,球彩格式方面优化球彩;
  3. 通过CDN边缘服务器提供地理上最接近用户的服务器。

ImageEngine提高了页面上每个球彩的Web性能,包括最大的球彩。您可以了解更多有关ImageEngine的更多信息 这里,还注册了一个 免费试用.

 

最佳实践:Predonnect

除了使用像ImageEngine等球彩CDN之外,还有一些其他最佳实践可以改善LCP。使用资源提示为内容提供了一种光连接,可以简化下载过程。

例如,在HTML中填充以下链接语句将加速下载过程。 Link语句将尽早使浏览器连接到第三方,以便下载最快。 ImageEngine的优化使每个球彩下载更小且更快,但在连接阶段节省时间。

 

最佳实践:最大限度地减少阻止JavaScript和CSS

当JavaScript或CSS为“阻止”时意味着浏览器需要解析和执行CSS和JavaScript,以便在视口中绘制页面的最终状态。

今天任何网站都依赖于JavaScript和CSS,这意味着几乎不可能避免一些渲染阻止资源。一般注意:小心在内部引用什么样的CSS和JavaScript <head> 元素。确保只加载严格必要的资源 <head>。其余的可以延迟或异步加载。

在寻求完善LCP时,有一些值得深入的实践。

内联关键CSS.

这不是一项简单的任务,但如果浏览器可以避免提出请求以获取呈现页面关键部分所需的CSS– 通常是“折叠之上”部分 –LCP可能会更早发生。此外,您还会避免内容转移,甚至可能是一种未售出的内容(Fouc.)。

关键的CSS - 浏览器所需的CSS来设置折叠上方的页面部分的结构和重要样式 - 应内联。该环的CSS还可以指的是背景球彩,当然也应该由球彩CDN提供。

不要使用JavaScript到(懒惰)加载球彩

许多现代浏览器本身支持延迟加载,而不使用JavaScript。因为球彩通常涉及LCP的性能,所以最好的做法让球彩加载到浏览器,避免添加JavaScript以延迟加载球彩。

如果浏览器首先要加载和解析JavaScript,则JavaScript驱动的延迟加载将添加额外的延迟,然后等待它执行,然后呈现球彩。这种做法还将在浏览器中打破预解析器。

如果使用球彩CDN来优化球彩,则延迟负载的好处变得更小。特别是折叠高于折叠的大型英雄球彩对LCP产生了很大影响,不会受益于懒惰加载JavaScript。最好不要让JavaScript成为渲染球彩的阻塞问题,而是依赖于 浏览器自己的能力 选择应该延迟加载的球彩。

 

[–这是代表Imageengine的赞助帖子–]