谷歌网站Core web vitals(LCP、FID、CLS)的核心指标是什么？SEO五大重点优化

2020年5月28日，谷歌为了用户体验，在官方博客中推出了三个新的Core web vitals(临时翻译网站核心指标)。

这三个指标分别对网站加载速度、开始交互时间和页面稳定性进行评分(CLS)。同时，谷歌在这篇文章中还提到，除了网站的三个核心指标外，手机版的友好度、安全浏览、HTTPS/SSL、跳过广告等也会影响网站的排名。让阿沃带你一个接一个地回顾这个即将到来的更新！

　　什么是Core Web Vitals？

根据官方声明，网站核心指标是一个基于长期大量用户体验的指标。直到这次更新，谷歌为用户体验建立了多种评分机制，但没有一个真正抓痒的用户。在推出全新的核心web vitals之后，Google甚至提到，如果超过75%的用户在网站上的浏览体验能够通过以上三项指标，那么用户的搜索体验就可以大大提升，甚至因为等待而离开的用户数量也可以减少24%！

Largest Contentful Paint 显示最大内容元素所需时间 (LCP) – 载入速度

　　在LCP之前，还有另一个指标，第一个满足的涂料(FCP)。FCP的目标是加载网站中的第一个元素，但如果只针对第一个元素，用户仍然看不到重要内容。因此，谷歌开发了一个全新的指标——LCP。

　来源：web.dev

什么是LCP？

与FCP不同，LCP更注重页面中最大元素的加载速度。而Google是如何确定最大的元素的呢？加载页面时，Google会抓取页面可视范围内最大的元素，并随时改变可视范围内的内容。在页面完全加载之前，页面中最大的元素将被设置为LCP。

　　图片来源：web.dev

LCP会检测哪些项目？

画

Svg矢量图片

电影(预览更大的图像)

通过url()的CSS函数加载背景图片的元素

包含文本的块级元素或内联元素

　　如何优化LCP？

一般来说，可以针对以下四个要点优化LCP

　　缩短服务器响应时间

针对主机优化

使用距离较近的CDN主机

使用网页缓存

让第三方资源尽早加载

　　排除禁止转译的资源

减少JavaScript阻塞时间

减少CSS阻塞时间

　　加快资源的加载时间

图像尺寸优化

预载重要资源

压缩文本文件

根据用户的网络状态提供不同的内容

使用服务人员

　　避免客户端渲染CSR

如果一定要用CSR，建议优化JavaScript，避免渲染时使用太多资源

尽量在服务器端完成页面渲染，这样客户端才能得到渲染的内容

First Input Delay 首次输入延迟/封锁时间总计 (FID) – 可开始互动的时间

　　你可能点过一个网站，但是不管你怎么和页面互动，你都没有任何反馈经验。谷歌为这种情况开发了另一个指标——首次输入延迟

　　什么是FID？

第一次输入与页面上的响应元素密切相关。这些响应组件可以是链接、按钮或弹出窗口。

输入延迟通常发生在浏览器主执行太忙，导致页面内容无法与用户正确交互的时候。例如，浏览器可能正在加载一个相当大的JavaScript文件，这导致其他元素无法加载，并延迟了交互时间。

常见的延迟问题有：

• 　　点击链接或按钮加载内容延迟
• 　　文本对话框不能立即输入文本
• 　　打开下拉菜单屏幕延迟
• 　　无法检查对话框

　　如何优化FID？

减少JavaScript操作的时间

减少对网站的请求数量并减小文件大小

减少主要流程的工作量

减少第三个方程代码的影响

Cumulative Layout Shift 累计版面配置转移 (CLS) – 页面稳定性

　谷歌为CLS提供了这样一个例子：

你有过这样的经历吗？当你使用一个页面时，突然弹出一个按钮或广告，导致你点击一个非目标按钮或功能。谷歌已经为这种情况建立了一个页面稳定性指数——CLS。

可预期的版面配置转移 (Expected layout shifts)

当你在web.dev网站点击内容反馈的fold功能，fold引起的页面布局转移是可以预料的。所以谷歌不会将此判断为页面不稳定。

不可预期的版面配置转移(Un-expected layout shifts)

意外的布局转移通常是由网页中元素的加载顺序不同引起的。在Google提供的例子中，点击我！只有在加载文本框后才会加载的按钮，这会导致用户在阅读过程中移动内容。这种对用户的意外布局转移将影响CLS指标的得分。

图片来源：web.dev

如何优化CLS？

通过CSS语法，为网页中的元素提供了预留空间，以避免加载后页面中的内容移动

通过，元素(字体、图片等。)这将导致页面内容提前被加载

如何测试/监控Core web vitals？

目前，谷歌官方提供了各种工具来监控Core网站的生命周期。基本上，旧的速度优化工具具有一个接一个更新核心网站重要信息的评分功能。

Page speed/Lighthouse

页面速度工具和灯塔速度测量工具不仅可以给网站打分，还可以提供网站体验优化项目，为网站优化提供明确的方向。

Chrome开发者工具

同时，通过开发工具加载网页时，可以观察Core web vitals引用的索引何时发生，方便工程师优化。

Search console

在Google宣布更新网站体验指数后，Google还在Google Search Console中更新了整个网站页面的用户指数，将为网站所有者提供所有页面的指数分值，方便站长优化。

CrUX

目前，搜索控制台中的所有分析数据都是通过Chrome用户体验报告的数据进行评分的。谷歌根据他们的大数据，从大量用户的体验中做出报告，方便网站所有者查看。只要官方模板中提供了要观察的网站，就可以获得相关信息！

现有的网页搜索引擎优化UX优化指标

谷歌希望搜索结果能给搜索者带来快速安全的用户体验。除了这个全新的核心网站生命周期，谷歌还正式为UX优化提供了其他关键项目，这也将对搜索引擎优化排名产生重大影响。

移动页面

Google已经宣布，将把移动版的用户体验作为参考项目之一，网站排名也将把是否适合移动设备作为参考指标。

网站浏览安全

当网站包含网络钓鱼内容或可能导致网站用户中毒时，谷歌将从搜索结果中删除网络钓鱼内容。可以通过Google搜索控制台中的“安全问题”来确认。

HTTPS/SSL的设置

网站中的传输过程需要用SSL加密，避免中间截取消息导致信息泄露。

需要注意的是，Safari将在2020/09/01开始将超过398天的证书作为不安全网站对待，如果近期需要更新或购买SSL的话，要多加注意。

避免覆盖广告

封面式广告很容易给用户带来不便。如果这些类型的弹出式封面广告出现在网页上，它们可能需要修改。

Core web vitals发布后的两个关键点

Core web vitals将成为搜索引擎优化排名因素之一

谷歌在2020年5月宣布后，谷歌最早将在2021年正式将网站核心指标列为排名因素。这也是谷歌首次提前宣布算法将如何变化。相信在此期间，谷歌会正式发布更多的优化方向。感兴趣的读者可以关注web.dev的博客

让一般页面也和AMP竞争

在这个算法更新之前，如果你的网站有AMP功能，更容易争夺更高的排名。

谷歌一直希望搜索结果页面上的内容不仅是实时的，而且能让用户有良好的浏览体验。因此，移动用户的搜索体验对于Google来说是一个非常重要的指标。但这次算法更新后，只要网站在用户体验上获得高分，仍然有与AMP页面竞争的空间。一些很多人担心AMP的缺点，在这次算法更新后并不存在。

但由于其卓越的速度，AMP页面依然会是SEO排名的加分项之一，不会因为这次更新而消失。

结论

网站体验很重要。这个算法更新后，再好的内容，也需要更人性化的载体。用户体验将成为本次算法更新中SEO的重点项目之一。除了为全新的网站核心指标进行优化之外，当前的UX指标也将是一个重要的优化方向。回到搜索引擎的本质，只要你能让Google相信你网站的内容能够快速正确地满足用户的需求，你就在首页上有一席之地了！