免费获取策划方案多一份参考,总有益处

重庆网站建设

Website construction

案例778

重庆网站建设

如何提高最大内容油漆(LCP)和SEO

来源:派臣科技|时间:2020-08-04|浏览:

意旨;韦氏词典将“contentful”一词定义为“未找到”。显然是有人编造了这个词,但这并不一定是坏事。

用户体验度量的世界正在快速发展,因此需要新的术语。最大内容绘制(LCP)是衡量网页内容渲染时间的众多指标之一。

最大的内容是什么?

谷歌将LCP定义为“在视口内可见的最大内容元素的呈现时间”。对于我们在这个博客中讨论的内容,我们将把“内容”看作是图像,通常是JPEG或PNG文件。在大多数情况下,“最大”指的是一个“在折叠上方”的英雄形象,它是人们在加载页面时最先注意到的形象之一。对这个最大的内容进行优化对于改进LCP至关重要。

相对于其他指标,查看LCP可能更有指导意义。例如,第一个内容绘制(FCP)和视觉完整的书结束LCP。

第一次内容绘制(FCP):测量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。(实验室、字段)

最大内容绘制(LCP):测量从页面开始加载到最大文本块或图像元素呈现在屏幕上的时间。(实验室、字段)

视觉完整:测量客户认为网页看起来完整的时间。

每种度量标准都有其优缺点,但LCP是一种令人满意的折中方法。LCP标志着web页面加载开始对用户体验产生实质性影响。

在谷歌看来,为了提供良好的用户体验,LCP应该在页面首次开始加载的2.5秒内发生。差值是大于4秒的值。

如何最大的内容油漆影响灯塔分数和搜索引擎优化?

LCP现在是几个“核心网络生命”分数的一部分,谷歌将在其排名算法中衡量。每一个核心Web要素代表了用户体验的一个不同方面,是可测量的领域,并反映了一个关键的以用户为中心的结果的真实世界的体验。

在整体谷歌Lighthouse评分的情况下,LCP在Lighthouse 6.0版本的性能评分中占25%的权重。这使得LCP成为决定性能分数的最重要的核心Web指标。

虽然谷歌表示,内容仍然是SEO排名中最重要的因素,但更好的用户体验(以核心Web Vitals衡量)将在拥挤的领域产生更高的排名。如果有很多网站在竞争搜索引擎的位置,那么最大的内容绘制将发挥关键因素的排名。

如何提高最大内容的油漆

既然您知道LCP很重要,那么如何通过加快内容加载速度来改进它呢?谷歌提供了许多建议,但最有效的技术是为请求内容的设备优化内容。

例如,一个网站包含一个800kb的JPEG图像,用于高分辨率桌面。在智能手机上,这将被优化到小于100kb,对质量没有明显的影响。通过这一次优化,LCP可以提高60%以上——或者几秒钟。

通过使用图像速度测试找到最大内容的油漆节省

图像速度测试是ImageEngine提供的一个很好的工具。提供LCP改进机会分析的io。只需粘贴您感兴趣的优化网页的URL,测试将显示:

减少图像有效载荷

速度指数

最大的意旨油漆

页面加载时间(视觉完成)

它还提供了网页加载的视频,无论是否进行了优化。最后,它分析每个映像以提供有效负载节省的估计。在本例中,页面上的“最大内容”是这张图片。通过优化,图像有效载荷减少了94%。这给LCP带来了巨大的改进。

ImageEngine如何改进LCP

ImageEngine是一个图像内容分发网络(CDN)服务,使图像优化简单。基本上,对于页面上的每个图像,图像CDN将:

检测请求web页面的设备模型;

优化图像的大小,压缩,图像格式;

通过地理上离用户最近的CDN边缘服务器交付。

ImageEngine为页面上的每个图像(包括最大的图像)改进web性能。你可以在这里了解更多关于ImageEngine的信息,也可以注册免费试用。

最佳实践:Preconnect

除了使用像ImageEngine这样的映像CDN之外,还有一些其他的最佳实践可以改进LCP。使用资源提示为您的内容提供预连接可以简化下载过程。

例如,在HTML中放置下面的link语句将加速下载过程。link声明将使浏览器尽早连接到第三方,这样下载就可以尽早开始。ImageEngine的优化使每个图像下载更小更快,但预先连接节省了连接阶段的时间。

最佳实践:最小化阻塞JavaScript和CSS

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

现在任何网站都严重依赖JavaScript和CSS,这意味着几乎不可能避免一些渲染阻塞资源。一般来说,要注意元素中引用的CSS和JavaScript的类型。确保在中只加载严格必要的资源。其余的可以延迟或异步加载。

当特别想要改进LCP时,有一些实践值得更深入地研究。

内联CSS关键

这不是一项简单的任务,但是如果浏览器能够避免请求获得渲染页面关键部分(通常是“折叠上方”部分)所需的CSS,那么LCP很可能会更早出现。此外,您还可以避免内容的移动,甚至可以避免无风格内容的闪光(FOUC)。

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

不使用JAVASCRIPT(惰性)加载图像

许多现代浏览器本身就支持延迟加载,而不使用JavaScript。由于图像通常与LCP的性能密切相关,因此最佳实践是将图像加载留给浏览器,并避免添加JavaScript来延迟加载图像。

如果浏览器首先必须加载和解析JavaScript,然后等待它执行,然后呈现图像,那么由JavaScript驱动的延迟加载会增加额外的延迟。这种做法还会破坏浏览器中的预解析器。

如果使用图像CDN来优化图像,那么延迟加载的好处就会变得小得多。特别是那些在页面上方的大英雄图片会对LCP产生很大的影响,并且不会从JavaScript的延迟加载中受益。最好不要让JavaScript成为渲染图像的阻塞问题,而是依靠浏览器自己的能力来选择哪些图像应该延迟加载。

留言

返回顶部

君
重庆网站建设重庆网站建设如何提高最大内容油漆(LCP)和SEO