根据历史数据，我们回顾了手机和桌面网站的更新准备情况，以及哪些核心Web生命指标（最大内容绘制、总阻塞时间、*和累积布局偏移）更有价值。
我们还设法突出了影响这三个指标中页面性能的最关键因素。
使用站点审计工具的信息，我们查看了LCP、TBT和CLS的平均值，并确定了每个指标中最常见的问题。
有了这些见解，您就可以更好地优化页面，以最大限度地遵守CWV，从而确保最终的用户友好性和更高的排名。
*注意：在站点审计中，我们使用总阻塞时间（TBT）指标而不是首次输入延迟（FID）指标，因为后者意味着可以访问真实用户的数据。谷歌本身声明这两个指标相互关联，都可以用于评估交互性问题。
研究方法
我们的研究分为几个部分：
更新前和更新后对CWV合规性更改的评估。
查看影响网站是否通过每个指标阈值的因素。
对所分析的网站进行完整的CWV审核，以探索每个指标中最常见和最不常见的问题。
研究的第一部分是基于对1.7M桌面网址和324K移动网址的分析。我们将2021年6月更新前的LCP、TBT和CLS指标与2021年9月更新完成时的统计数据进行了对比。
为了进行比较，我们检查了更新前后每个指标在三个类别范围内的页面数量——“好”、“差”、“有待改进”。
好
需要改进
可怜的
连结控制协定
≤2.5秒
≤ 4s
> 4 s
技术性贸易壁垒
< 300毫秒
≥300ms≤600ms
> 600毫秒
CLS
≤0.1
≤0.25
> 0.25
我们还提到了“任何TBT”和“任何CLS”分数。这些简单地反映了所有url的平均指标，而不考虑它们的TBT或CLS性能。
为了找出影响每个指标的因素，并查看哪些错误比其他错误更频繁出现，我们采用了Site Audit在2021年9月对400万个桌面和170万个移动url的审计。总的来说，该工具通过23种不同的特定于cwv的检查来传递这些页面。**这使我们能够揭示最困难和最容易通过的审计。
整个研究都是基于实验室数据。
**注意：您可以在文章的最后找到所有检查的列表，它们的定义，以及完整的移动桌面审计细分。
移动和桌面的核心Web vital研究结果
有多少网址提高了他们的LCP， TBT和CLS分数
好
差→好
差→改善
改进的url份额（所有3个指标）
0.09%
0.05%
0.03%
0.01%
改进的url份额（仅限TBT）
7%
4%
1%
1%
改进的url份额（仅限CLS）
21%
9%
7%
5%
改进的url份额（仅限LCP）
14%
9%
2%
4%
改进的url份额（至少1个指标）
39%
21%
10%
9%
我们看到一个非常低的页数-高达0.1% -提高了所有的分数。然而，三分之一的网页至少在一个指标上得分有所提高。对于移动和桌面url都是如此。
在手机平台上，这三个指标最受欢迎的类别变化是从“差”到“有待改进”。桌面url显示出更积极的趋势，因为大多数url的LCP、TBT和CLS得分从“有待改进”上升到“良好”类别。
在手机上，从“差”跳到“好”似乎是不可能完成的任务，只有一个例外。CLS似乎是直接从“差”到“好”的最容易的门槛，更多的页面在CLS分数上取得了显著的进步。
我们在b谷歌降低CLS阈值之后收集了我们的见解，因此表面上的轻松可能与这一变化有关。
当涉及到LCP时，移动页面面临的积极变化最少，而对于桌面url， TBT似乎造成了最大的挑战，显示出最低的- 6.7% -积极变化趋势。
影响LCP、TBT和CLS评分的因素
更详细地分析每个指标的元素，我们设法找出影响这些分数的因素。
是什么导致LCP得分低
由于LCP测量用户视口内最大的页面元素（图像或文本块）的加载时间，任何超出屏幕的内容都不计算在内。
因此，我们查看了以下哪些元素在分析的页面中存在/不存在：
标签是图片、视频海报图片、背景图片等；
/
标签表示页面上的任何元素（容器）；
标签是一个段落（文本）；
标签通常指向某种文本元素；和
/
/
标签用于表示各种页面标题和子标题。
我们的分析表明，
和
标签是导致LCP慢的最常见的元素。
但是，如果我们仔细观察，我们会发现影响LCP分数的移动-桌面标签元素之间存在更多差异。
和
标签对于在“差”LCP范围内的移动url来说主要是一个问题。LCP在“良好”和“有待改进”范围内的移动页面主要受到
和标签的影响。
在移动设备上，H1开始成为一个问题，可能是因为当我们处理较小的屏幕时，H1是视口中最大的元素之一。
这意味着手机和桌面的最大元素是不同的。
在您的特定情况下，您可以使用Site Audit工具来展开被认为是视口中最大内容元素的特定页面元素。
什么影响TBT成绩
由于TBT衡量的是用户开始与页面元素交互的速度有多快，因此我们必须考虑较长的任务。
由于长任务是冻结UI的JavaScript代码的一部分，为了获得“好的”TBT分数，你必须将整体TBT保持在300毫秒以下。
虽然你可以有任意多的长任务（只要不超过300毫秒的阈值），但有趣的是，具有“良好”TBT分数的移动和桌面页面的长任务数量都是最少的：
平均而言，一个TBT得分“差”的桌面页面比那些得分“好”的桌面页面有6倍多的长任务。在移动设备上，这种差异就不大了——有三方面的差异。
什么影响CLS分数
衡量页面视觉稳定性的CLS指标在很大程度上依赖于布局的变化，当一个可见元素从一个渲染帧到下一个渲染帧的位置发生变化时，这种变化就会出现。
与TBT一样，布局变化是关于变化的程度，而不是变化的数量。如果我们没有看到TBT的直接证据，我们的CLS分析表明：
我们没有看到具有不同CLS分数的页面之间的布局转换数量有很大差异，这意味着只要满足阈值，您就可以承担相当多的转换。
最常见的核心网络问题以及如何解决它们
虽然我们已经确定了影响网页CWV得分的主要因素，但这并不意味着这些可以被认为是网站所有者最紧迫的问题。
这就是Site Audit的核心Web vital报告进入游戏的地方，并帮助识别最难通过的检查。
网站审核工具通过23种不同的检查，我们采用pagspeed Insights逻辑，并考虑：
如果检查超过90分，则该页进入绿色区域，我们认为此审核通过；
50-89的标记使页面进入黄色区域；和
如果该值小于49，则页面移动到红色区域进行给定的检查。
从鸟瞰的角度来看，我们可以看到移动页面面临着更多的CWV问题。桌面url似乎在通过CWV检查方面做得很好，大多数（68%）的检查都在绿色的地方。
与桌面不同，在移动设备上，页面通过了大部分检查，只有34%的检查是绿色的。令人担忧的是，65%的审核要么是黄色要么是红色，这意味着移动页面不符合这些检查的CWV要求。
让我们更细致地看看所有的检查，看看移动和桌面页面最容易和最难通过的三个检查。
顶部看起来几乎是一样的-无论是桌面还是移动网址：
对于移动和桌面页面来说，没有明确宽度和高度的图像元素似乎是最大的问题。
JavaScript包中的重复模块，多个页面重定向，以及高效动画内容的视频格式的使用通常几乎没有问题。
然而，当涉及到消除渲染阻塞资源时，差异是惊人的：桌面usl几乎通过了这一检查，而移动usl几乎没有进入黄色区域。
Site Audit不仅可以发现所有度量标准中的问题，还可以将它们划分为LCP、CLS和tbt相关的问题。
确保对特定页面的最常见问题进行逐个指标的分解，因为Site Audit实际上以一种包含解决方案的方式塑造了问题。
总结
随着核心Web vital更新已经在这里，你别无选择，只能提高你的三个指标的得分- CLS， LCP和TBT -向b谷歌展示你的页面提供了最终的用户友好性，应该得到这些排名。
我们希望我们的研究涵盖了很多领域并揭示了关键的见解，为您进一步的优化工作提供明确的指导。
虽然我们建议你重新审视所有的发现，但你应该从这项研究中得到一些东西：
网络还没有完全为cwv做好准备。
只有三分之一的桌面url和3%的移动url通过了所有三个CWV指标的阈值。
自更新以来，我们只看到大约1%的页面得到了全面的改进。只有不到40%的人在至少一项指标上得分更高。
这意味着，您有很大的改进空间，而且，如果做得正确和尽早，您的页面优化工作可以使您的页面具有竞争优势。
特别注意你的手机页面。
大多数检查桌面是绿色的（也就是通过），而对于移动设备，我们看到的大多是黄色和红色。这意味着在桌面上比在移动设备上更容易通过审核，移动页面平均比桌面页面面临更多的问题。
最有可能的是，这是由于移动阈值以及在3G设备上模拟实验室数据的事实。
在你的LCP（移动设备）和TBT（桌面设备）分数上做文章。
由于CLS是“问题最少”的指标，你必须努力提高你的LCP和TBT分数：
CLS的改进更有可能让你从“差”迅速跳到“好”的分数范围。
对您的、
、
和
标签进行审计，以确保它们不会降低您的LCP评分。使用站点审计工具查明导致慢速的页面元素。
把你的总阻塞时间控制在300毫秒以内，以确保一个“好的”TBT分数。再一次，网站审计工具将帮助你确定哪些长任务是阻碍你的整体TBT得分最多的。
注意布局变化的程度，并去掉那些占用太多CLS阈值空间的布局变化。现场审核反映了每个最大布局班次的CLS贡献。
注意图像元素的高度和宽度以及其他常见的CWV问题。
再看看最难通过的审计。大多数问题（无论是移动url还是桌面url）都与图像大小有关。因为这是一个与CLS相关的检查，有一个相当快速的修复，你可以使用它作为一个快速的胜利，以提高你的CLS分数。
保持合理的期望。
对于台式机，最常见的转变是从“改进”到“良好”的范围。但大多数移动网址从“差”跳到“有待改进”类别，唯一的例外是CLS。所以不要指望在每一个CWV指标上都能快速从“差”到“好”，要注意阈值的任何变化。
奖励：移动和桌面url最常见的CWV问题的完整列表
如果你想了解所有站点审计检查的完整列表，并查看移动桌面页面的平均得分，请将鼠标悬停到下面的表格，以获得完整的图片。
平均审计分数
审计
平均成绩（桌面）
平均分（手机）
删除JavaScript包中的重复模块
100%
100%
避免多个页面重定向
100%
100%
使用视频格式的动画内容
100%
99%
贬低CSS
100%
98%
避免为现代浏览器提供遗留JavaScript
99%
97%
减少第三方代码的影响
99%
72%
减少JavaScript执行时间
99%
88%
贬低JavaScript
99%
96%
最小化主线程工作
99%
74%
预连接到所需的源
94%
86%
启用文本压缩
93％
88%
删除未使用的CSS
92%
72%
避免巨大的网络负载
92%
92%
避免过大的DOM大小
91%
91%
删除未使用的JavaScript
85%
55%
减少服务器响应时间（TTFB）
82%
82%
消除渲染阻塞资源
76%
57%
确保文本在网页字体加载期间仍然可见
33%
36%
图像元素没有明确的宽度和高度
24%
29%
为了您的方便，我们将在每次审计检查中添加谷歌的注释：
减少JavaScript执行时间：当你的JavaScript需要很长时间来执行时，它会在几个方面降低你的页面性能，比如网络成本、解析和编译成本、执行成本或内存成本；
避免过大的DOM大小：较大的DOM树可能会在多个方面降低页面性能，例如网络效率和负载性能、运行时性能和内存性能；
删除JavaScript包中的重复模块：大多数网页上的JavaScript包通常是通过从流行的库、依赖项和包中导入代码来构建的。这通常会导致您的页面从多个来源继承重复的模块；
对动画内容使用视频格式：对于传递动画内容来说，大的gif是低效的，所以最好使用视频格式
确保文本在网页字体加载过程中保持可见：字体通常是大文件，需要一段时间才能加载。有些浏览器隐藏文本，直到字体加载，导致不可见的文本闪烁；
避免向现代浏览器提供遗留JavaScript代码：避免向现代浏览器提供遗留JavaScript代码（即ES5标准），以便您可以防止用户下载不必要的大型JavaScript文件；
尽量减少主线程的工作量：浏览器的渲染过程是把你的代码变成一个网页，你的用户可以与之交互。默认情况下，渲染进程的主线程通常处理大多数代码：解析HTML并构建DOM，解析CSS并应用指定的样式，解析、计算和执行JavaScript；
避免多个页面重定向：重定向会降低页面加载速度；
消除阻止渲染的资源：Lighthouse报告的Opportunities部分列出了阻止页面第一次绘制的所有url。我们的目标是通过内联关键资源、延迟非关键资源和删除未使用的资源来减少这些阻止呈现的url的影响；
减少服务器响应时间：Lighthouse报告的Opportunities部分报告了Time to First Byte，即用户浏览器接收页面内容的第一个字节所需的时间；
使用facade延迟加载第三方资源：第三方资源通常用于显示广告或视频以及与社交媒体集成。默认的方法是在页面加载时加载第三方资源，但这可能会不必要地减慢页面加载速度。如果第三方内容不重要，可以通过延迟加载来降低这种性能成本；
减少第三方代码的影响：要在页面中添加广告网络、社交媒体按钮、A/B测试或分析服务，通常需要在HTML中添加第三方脚本。这些第三方脚本会严重影响您的页面加载性能；
避免巨大的网络有效负载：大型网络有效负载与较长的加载时间高度相关。它们也需要用户花钱；例如，用户可能需要为更多的蜂窝数据付费。因此，减少网页网络请求的总大小有利于用户在网站上的体验和他们的钱包；
最小化CSS：灯塔报告的机会部分列出了所有未最小化的CSS文件，以及当这些文件被最小化时可能节省的千兆字节（KiB）；
最小化JavaScript：最小化JavaScript文件可以减少有效负载大小和脚本解析时间；
图片大小不一致：图片看起来很好，但是会浪费用户的数据，影响页面性能；
删除未使用的CSS规则：Lighthouse报告的Opportunities部分列出了所有未使用CSS的样式表，这些样式表可能节省2 KiB或更多。删除未使用的CSS以减少网络活动消耗的不必要字节；
删除未使用的JavaScript：未使用的JavaScript会降低页面加载速度；
预连接到所需的源。：灯塔报告的机会部分列出了所有尚未优先考虑获取请求的关键请求， ；
启用文本压缩：应该对基于文本的资源进行压缩，以最小化总网络字节。