专注国内外云服务器
分享建站技术教程

如何优化网站以符合谷歌的Core Web Vitals标准

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

谷歌的使命是通过Core Web Vitals来提高网络性能。为什么?因为谷歌的业务主要是基于网络的——缓慢的网站和网络应用程序将用户推回到本地应用程序。

你在谷歌搜索结果中的位置在很大程度上取决于搜索词的关键词、这些关键词在你页面中的使用情况,以及根据其他地方链接的数量(和质量)你页面的受欢迎程度。从2021年8月开始,谷歌也在努力根据性能评估页面。

本教程将向您展示如何针对谷歌Core Web Vitals优化您的网站。

  1. 为什么要做Core Web Vitals?
  2. 谷歌的主要排名因素
  3. 谷歌如何评估网络性能?
  4. 什么是Core Web Vitals?
  5. 最大内容绘制(LCP)
  6. 首次输入延迟(FID)
  7. 累计布局偏移(CLS)

为什么要做Core Web Vitals?

内容仍然至关重要。但是,如果你比较两个文本和人气相似的网站,在谷歌搜索结果中,提供最佳网络体验的网站将获得更高的优先级。

除了提高页面排名外,高性能网站也有资格加入移动搜索转盘。这之前是为加速移动页面(AMP)保留的,它要求您将内容导入一个单独的谷歌托管站点。AMP已经引起了批评,尤其是因为页面并不总是比优化良好的WordPress或静态站点更快。然而,这不再是一个要求。

无论你选择了什么,你的网站越快,响应速度越快,它在谷歌搜索结果中排名越高的机会就越大。

当你认为平均页面大约是2 MB时,生成超过60个HTTP请求,并且在移动设备上充分渲染16秒,你会发现有一些改进你的站点的范围。我们将向您展示实现这些改进的最佳方法。

谷歌的主要排名因素

在开始评估绩效之前,需要检查四个关键排名因素:

一旦您满足这些要求,您的网站将进行性能评估。

谷歌如何评估网站性能?

使您的网站加载速度快、渲染速度快、响应速度快是至关重要的。但它对用户来说感觉快吗?

性能度量应用程序(如浏览器开发工具)报告技术度量,例如:

这些可用于确定特定的瓶颈,如服务器负载、CMS缓存、浏览器缓存、下载速度和JavaScript效率。但他们无法确定页面提供的用户体验是好是坏。例如:

应用程序可以快速下载并显示,但在第一次交互后会变得无响应,因为它正在执行大量未优化的JavaScript代码。

聊天应用程序可以在用户发布消息时不断下载数据。评估工具可能会假定它从未完成加载,尽管页面感觉有响应。

Core Web Vitals是谷歌试图解决这些困境。

什么是Core Web Vitals?

Google的Core Web Vitals(CWV)是评估现实世界用户体验的三个性能指标:

到2021年8月底,谷歌新的算法更新已经开始在全球范围内推广。Core Web Vitals主要影响移动搜索结果,但如果实验成功,桌面等价物也会随之产生。

页面的LCP、FID和CLS分数基于最近28天通过Chrome浏览器匿名收集的真实用户指标。由于用户的设备、连接和其他并发活动,这些测量值可能会有所不同,因此第75个百分位是计算出来的,而不是平均值。

换句话说,所有用户的指标都是从最好到最差排序的,并且取四分之三点的数字。因此,四分之三的网站访问者将体验到该级别或更高的性能。

任何在所有三个核心网络关键指标上都获得良好(绿色)分数的页面都将在搜索结果中获得更高的排名,并被包括在谷歌新闻应用程序的“热门故事”旋转木马中。

在以下部分中,我们将介绍用于计算度量的算法、可用于确定页面分数的工具、分数低的典型原因以及解决性能问题的步骤。

最大内容绘制(LCP)

最大内容绘制测量加载性能。本质上,可用内容在页面上呈现的速度有多快?

LCP分析最大图像或文本块在浏览器视口(折叠上方)中可见所需的时间。在大多数情况下,最突出的项目将是Hero图像、横幅、标题或大型文本块。

以下任何元素均可进行最大含量的油漆分析:

在页面加载的前2.5秒内完成最大内容绘制的页面视为良好(绿色)。超过4.0秒的页面视为不良(红色):

最大内容绘制(LCP)

最大内容绘制分析工具

LCP是最容易理解的Core Web Vital,但选择哪个元素进行分析可能并不明显。

DevTools Lighthouse面板在基于铬的浏览器中提供,如Chrome、Edge、Brave、Opera和Vivaldi。从浏览器菜单中打开DevTools–通常位于“更多工具”>“开发人员工具”或键盘快捷键Ctrl | Cmd+Shift+IF12–然后导航到Lighthouse选项卡(旧版本可能会将其命名为Audit)。

生成移动性能报告,然后检查生成的性能部分。最大内容绘制时间显示为可展开部分,该部分标识所选元素:

DevTools Lighthouse移动性能报告

如果您无法访问基于Chromium的浏览器,则可以在访问PageSpeed Insights和web.dev Measure tools中生成相同的信息:

PageSpeed Insights执行LCP分析

DevTools性能面板还显示LCP指示器。要开始,请单击循环记录图标,重新加载页面,然后单击停止按钮查看报告。单击“计时”部分中的LCP图标以标识元素并查看统计信息摘要。

DevTools性能面板LCP指示器

Web Vitals扩展可用于Google Chrome,但可以安装在大多数基于Chrome的浏览器上。它为您访问的每个站点计算核心Web关键指标,其图标根据结果变为绿色、橙色或红色。您还可以单击扩展图标查看更多LCP详细信息:

Web Vitals扩展LCP

Google’s Search Console现在提供了Core Web Vitals部分,如果你的网站是作为属性添加的。该报告说明了CWV指标是如何随时间变化的。请注意,它没有确定具体的LCP指标,只有具有合理高流量的站点可用:

 

谷歌搜索控制台Core Web Vitals

Chrome用户体验报告允许您查询特定URL的实际使用统计数据,包括不同国家、连接和设备的LCP。这是Google BigQuery上的一个公共项目,所以您必须注册一个Google云平台帐户并提供账单详细信息。同样,报告只有在URL具有相当高的流量水平时才有用。

最后,web-vitals JavaScript库是一个1KB的小脚本,可以为您的实时站点上的真实用户计算LCP和其他核心web重要指标。由于可以从CDN下载,您可以将以下脚本添加到HTML中的


My page
import { getLCP } from 'https://unpkg.com/web-vitals?module';
getLCP(console.log);

getLCP()是一个异步函数,在计算LCP值时会触发回调(但如果在后台选项卡中加载页面,则可能永远不会触发回调)。向回调函数传递一个对象,该对象包含:

上面的脚本将对象输出到控制台,不过将数据发送到服务器或Google Analytics进行进一步分析更为实际。

LCP分数低的常见原因

LCP分数差通常是由阻塞最大块快速出现的缓慢加载页面造成的:

在客户端而不是服务器上生成的页面内容也需要更长的时间才能显示。

如何提高LCP分数

彻底的审查可以发现加载问题,但通常是减少发送到浏览器的数据量的问题。以下提示将有助于获得更健康的LCP分数:

  1. 升级服务器和/或主机服务。确保下载速度即使在高使用率时也保持快速。
  2. 激活服务器压缩和HTTP/2+。没有理由不这样做!
  3. 减少服务器工作。删除未使用的代码和CMS插件,然后启用有效缓存。
  4. 确保浏览器可以有效缓存文件。在HTTP头中设置适当的Expires、Last Modified和/或ETag哈希,以便不再请求文件。
  5. 使用内容交付网络(CDN)在地理位置更靠近用户的服务器上拆分负载和托管资源。
  6. 优化你的图像。将它们减少到最小尺寸,并使用适当的格式来最小化文件大小。确保尽早请求最大内容块中的任何图像;预加载可能会有所帮助。
  7. 通过添加loading="lazy"属性延迟加载图像。添加宽度和高度属性,以确保在图像完成加载之前在页面上保留适当的空间。
  8. 最小化第三方请求,并将移动资产考虑到主域以避免无关DNS查找。
  9. 最小化请求文件的数量和大小,尤其是在HTML的顶部。
  10. 确保仅加载所需的web字体。切换到web安全字体以获得最佳性能。
  11. 删除未使用的JavaScript和CSS文件。
  12. 连接并缩小JavaScript和CSS文件。
  13. 避免[email protected]语句-它们是串联的渲染块和加载样式。
  14. 避免Base64编码-它会增加文件大小并需要额外的处理。
  15. 考虑关键的联机CSS。在页面顶部的块中嵌入基本的“折叠上方”CSS,然后异步加载更多样式表。
  16. 稍后使用异步、延迟或ES模块JavaScript运行脚本。在服务工作者中执行长时间运行的JavaScript进程。

首次输入延迟(FID)

首次输入延迟(FID)测量页面的响应性。本质上,它对用户的点击、点击和滚动等操作的响应速度有多快?

FID指标计算为用户交互和浏览器处理其请求之间的时间。它不度量运行处理程序函数的时间,处理程序函数通常会处理输入并更新DOM。

FID时间小于等于100毫秒的页面视为良好(绿色)。超过300毫秒的页面视为不良(红色):

首次输入延迟

首次输入延迟分析工具

首次输入延迟是不可能模拟的,因为它只能在页面提供给与页面交互的实际用户时测量。因此,结果取决于每个设备的处理器速度和能力。

FID不在DevTools Lighthouse面板或PageSpeed Insights中计算。但是,它们可以确定总阻塞时间(TBT)。这是第一个输入延迟的合理近似值。它测量以下各项之间的时间差:

  1. 首个内容绘制(FCP),或页面内容开始呈现的时间,以及
  2. 交互时间(TTI),或页面可以响应用户输入的时间。当没有长时间运行的任务处于活动状态且尚未完成的HTTP请求少于三个时,假定为TTI。

PageSpeed Insights总阻塞时间

Google Chrome的Web Vitals扩展也可以在通过滚动或单击与页面交互后显示FID度量。单击扩展的图标以显示更多信息:

Web Vitals扩展FID

与LCP一样,Chrome用户体验报告允许您查询在不同国家、连接和设备上记录的特定URL的真实FID统计数据。

web vitals JavaScript库还可以计算实时站点上真实用户的FID指标。您可以将以下脚本添加到HTML的以将FID度量输出到回调函数:


My page
import { getFID } from 'https://unpkg.com/web-vitals?module';
getFID(console.log);

FID分数低的常见原因

FID和TBT分数低通常是由占用处理器的客户端代码引起的,例如:

默认情况下,浏览器运行在单个线程上,一次只能处理一个任务。如果一个JavaScript函数需要一秒钟的时间来执行,那么所有其他渲染过程都会在这一秒钟内被阻塞。页面无法响应用户输入、更新DOM、显示动画等。甚至GIF动画也可以在旧浏览器中被阻塞。

如何提高FID分数

客户端JavaScript审计可以识别问题,但通常需要删除冗余代码并确保任务快速执行。

以下提示将有助于获得更健康的FID分数:

  1. 在服务器上生成并缓存尽可能多的静态HTML内容。尽量不要依赖客户端JavaScript框架为每个人呈现相同的HTML。
  2. 确保浏览器可以有效缓存文件。在HTTP头中设置适当的Expires、Last Modified和/或ETag哈希,以便不再请求文件。
  3. 采用渐进式增强技术,因此在JavaScript运行之前,该界面可以在HTML和CSS中使用。
  4. 删除未使用的JavaScript和CSS文件。
  5. 连接并缩小JavaScript和CSS文件。
  6. 避免过度使用昂贵的CSS属性,如框阴影和过滤器。
  7. 稍后使用异步、延迟或ES模块JavaScript运行脚本。
  8. 最小化对分析、社交媒体小部件、论坛等的第三方JavaScript请求。这些请求可以快速加载到数兆字节的JavaScript。
  9. 根据需要延迟加载JavaScript组件,例如聊天窗口小部件、视频播放器等。
  10. 延迟加载不太重要的脚本,如分析、广告和社交媒体工具。
  11. 将长时间运行的JavaScript任务分解为一系列较小的作业,这些作业在短时间的requestIdleCallback、setTimeout或requestAnimationFrame延迟后执行。
  12. 考虑在Web工作者中使用一个后台线程来执行长时间运行的JavaScript进程。

累计布局偏移 (CLS)

CLS测量页面的视觉稳定性。本质上,页面内容是否会意外移动或跳转,尤其是在初始加载期间?

当元素在没有警告或用户交互的情况下移动时,CLS计算分数。当你在移动设备上阅读一篇文章时,你可能已经体验到了这一点——文本突然跳出屏幕,你失去了位置。最糟糕的例子可能会导致您单击错误的链接。

当一个大的图像或广告加载到当前滚动位置之上,并且零高度空间立即增加数百像素时,CLS问题最为突出。

通过将以下指标相乘计算累积布局轮班分数:

谷歌对CLS指标进行了修改,以适应以下情况:

布局移位被分组为“会话”,持续5秒,但如果没有进一步的布局移位,则在1秒后关闭。如果在一秒钟内发生两次或两次以上的轮班,则将其分数相加。

用户交互(如单击)后500毫秒内不会记录布局移动。在某些情况下,这会触发DOM更新(例如打开菜单、显示错误消息、显示模式对话框等)。

单页应用程序在更长时间内保持打开状态并进行大量DOM更新,不会受到不利影响。

CLS分数为0.1或更低的页面视为良好(绿色)。超过0.25的页面被视为较差(红色):

累积布局偏移

累积布局偏移分析工具

CLS度量在DevTools Lighthouse面板、PageSpeed Insights和web.dev Measure工具中计算:

PageSpeed Insights CLS

Google Chrome的Web Vitals扩展还显示了CLS指标:

Web Vitals扩展CLS

与LCP和FID一样,Chrome用户体验报告允许您查询在不同国家、连接和设备上记录的特定URL的真实CLS统计数据。

web-vitals JavaScript库还可以为实时站点上的真实用户计算CLS指标,就像LCP和FID一样。可以将以下脚本添加到HTML的以将CLS度量输出到回调函数:


My page
import { getCLS } from 'https://unpkg.com/web-vitals?module';
getCLS(console.log);

累积布局偏移分数低的常见原因

CLS分数低通常是由于加载页面资产和动态或未调整大小的DOM元素速度慢造成的:

如何提高累积布局偏移分数

客户端审计可以发现问题,但通常是确保在内容下载之前为内容预留空间。为最大内容绘制建议的服务器优化提示将有一些好处,但可能会有进一步的改进:

  1. 在HTML的标记中添加宽度和高度属性,或者使用新的CSS纵横比属性确保在下载资产之前在页面上保留适当的空间。
  2. 为封装第三方内容(如广告和小部件)的容器元素设置适当的尺寸。
  3. 确保尽早请求显示在页面顶部的图像和其他资产-预加载可能会有所帮助。
  4. 尽量减少Web字体的使用,并考虑在可能的时候使用常用的OS字体。
  5. 加载web字体并将CSS字体显示设置为可选或交换。确保使用大小相似的回退字体,以最小化布局偏移。
  6. 避免向页面顶部插入元素,除非页面响应用户操作(如单击)。
  7. 确保在输入触发器的500毫秒内完成用户交互。
  8. 使用CSS变换和不透明度可以获得更高效的动画,而不会导致重新布局。
  9. 考虑关键的联机CSS。在页面顶部的块中嵌入基本的“折叠上方”CSS,然后异步加载其他样式表。
  10. 必要时,考虑包容,一种新的CSS特性,允许您识别页面的孤立子树。浏览器可以通过渲染或不渲染特定的DOM内容块来优化处理。

小结

开发者并不总是热衷于跟随谷歌的调子跳舞。大型公司拥有相当大的实力,搜索引擎的微小更新可能会对网络组织的生产力和盈利能力产生不利影响。

这就是说,Core Web Vitals采取了“胡萝卜”而不是“大棒”的方法。优化良好的、可用的、放弃黑暗模式的网站比那些提供糟糕的移动用户界面的、臃肿的、弹出式密集型的网站更容易成功。

Core Web Vitals提供了一种可测量的方法来评估用户体验,帮助您专注于最关键的改进。对你的重要信息的改变可能不会增加收入,但你的用户会更快乐、更忠诚。

如果您要进一步深入了解基于Core Web Vitals进行网站优化,可以阅读以下相关文章:

当你摸透一些指标定义及学会有针对性地对网站进行优化,结合本文及如何做到Google PageSpeed Insights测试满分,相信您的网站的速度有了质的飞跃。

微海报分享

文章来源于互联网:如何优化网站以符合谷歌的Core Web Vitals标准

相关推荐: 如何修复WordPress致命错误:超出最大执行时间

定期更新您的插件和主题对于保持您的网站满负荷运行是必要的。但是,致命的WordPress错误“maximum execution time exceeded”,即超出最大执行时间可能会阻止更新并让您担心网站的性能。 幸运的是,您可以使用以下几种方法来修复此错误…

赞(0)
未经允许不得转载:吾上云 » 如何优化网站以符合谷歌的Core Web Vitals标准
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们