在本指南中
为什么页面速度在SEO中很重要?
页面速度以及它与用户体验的关系是一个排名信号。
一旦用户决定打开您的网站,确保网站快速加载并提供良好的体验非常重要。如果用户能够快速找到他们需要的信息,他们就更有可能查看您网站的其余部分或浏览您的结账流程。
因此,使您的网站快速有几个好处,可以帮助您:
在谷歌中排名更高,增加自然流量。
提供更好的用户体验和转化率。
为您和您的访客降低成本。
例如,70%的消费者表示,如果网站速度较慢,他们不太可能在网上购买商品或返回网站。谷歌还发布了一些案例研究,解释说好的Core Web Vitals也会带来更多的销售。
页面速度如何帮助您在 Google 搜索结果中排名更高
谷歌从真实的Chrome用户那里收集页面速度数据,并将其用作排名信号。
它着眼于三个性能指标,称为核心 Web 指标 (CWV)。
核心 Web 指标由以下部分组成:
- 最大内容绘制 (LCP)。
- 累积布局偏移 (CLS)。
- 首次输入延迟 (FID),将于 2024 年被下一次绘制交互 (INP) 取代。
如果至少有 75% 的网站访问者在所有三个指标中都获得了 Google 评为“良好”的体验,您将获得最大的排名收益。
您如何检查 Core Web Vitals?
Google Search Console 中的 CWV 报告会告诉您是否需要优化网站上的页面体验。
专业提示:使用 DebugBear 自动测量您的 Core Web Vitals,并获得可操作的步骤来加快您的网站速度。
每个核心网络生命力是什么意思?
每个CWV都专注于您网站不同方面的速度。
你的目标是让你的网站在每个指标上都处于“良好”状态。
最大内容绘制 (LCP)
LCP 指标衡量您的网站加载速度。具体来说,它着眼于导航到页面后多久显示最大的内容元素,例如主图片或内容标题。
最大内容绘制分数应为 2.5 秒或更短。
累积布局偏移 (CLS)
CLS 衡量内容首次开始出现后页面布局是否稳定。如果发生布局偏移,则意味着某些页面元素在首次显示后会更改位置。这提供了糟糕的用户体验,因为用户需要重新定位自己才能继续阅读,或者可能会不小心点击错误的按钮。
累积布局偏移分数应低于 0.1。它是通过查看已移动的内容的大小和它移动的距离来计算的。
首次输入延迟 (FID) 和与下一次绘制的交互 (INP)
这两个指标衡量您的网站对用户输入的响应速度。当用户单击页面上的按钮时,页面内容可能需要一秒钟或更长时间才能更新以响应用户输入,这会使网站感觉滞后且无响应。
到 2024 年 3 月,“与 Next Paint 的交互”将取代“首次输入延迟”作为核心 Web 指标。
目标是 FID 分数低于 100 毫秒,INP 分数低于 200 毫秒。
快速网站如何降低成本
最后,优化 Web 性能还可以为您的网站节省托管成本,因为需要的 CPU 处理更少,需要下载的数据更少,从而降低带宽费用。
许多网站访问者的移动数据计划也有带宽限制,超过限制时可能会产生额外费用。
第 1 步:运行网站性能测试
想看看你的网站加载速度有多快,并获得加快速度的建议吗?运行免费的网站速度测试可以让您评估您的网站现在的表现,并提供有关如何改进它的详细报告。
下面是测试结果的示例:
页面速度测试工具还可以识别您可以应用于网站的潜在优化,例如减少服务器响应时间、删除渲染阻塞脚本或优化图像。
即使您已经符合 Google 的 CWV 标准,您仍然可以通过进一步优化而受益。由于 Google 查看了最快的 75% 的体验,因此可能仍有四分之一的访问者的体验不理想。
例如,某些用户可能使用慢速移动连接或飞机 wifi。为这些用户优化页面速度可能会导致您失去购买。
第 2 步:设置网站监控
在您的网站上运行测试可以告诉您网站现在的速度有多快。但是,持续监控您的网站并拥有可用的历史数据意味着您可以:
- 出现新的性能问题时收到警报。
- 检查性能优化是否具有预期效果。
- 比较不同日期的测试结果并了解差异。
- 创建报告,向您的团队和管理层展示您网站的运行情况。
网站速度监控的类型
您可以监控两种主要类型的页面速度数据:
- 实验室或合成数据在受控测试环境中按计划收集。
- 现场或真实用户数据是在最终用户访问网站时收集的。
实验室数据更详细,更易于收集,而真实的用户数据可以向您展示用户的实际体验。
综合性能测试:优点和局限性
基于实验室的预定页面速度测试易于设置,提供详细的报告,并且可以针对您自己的站点和竞争对手的站点进行配置。
但是,基于实验室的测试存在一些局限性:
- 系统不会测量初始页面加载后的用户交互(除非您已将其编写为测试设置的脚本)。
- 计划测试使用一致的设备配置(如屏幕大小和网络连接速度)运行。但是,真实用户使用各种设备并体验不同的网络条件。
- 您只能获取已设置监控的网页网址的数据。
一些指标(如 INP 和 CLS)在很大程度上取决于用户在加载页面后与页面的交互方式。
负责 LCP 指标的内容元素通常也因设备而异。对于具有大屏幕的用户,LCP 元素可能是图像。在小屏幕上,LCP 元素可能是一个标题,图像出现在首屏下方的某个位置。
真实用户网站性能监控:优点和局限性
从真实用户那里收集数据具有许多优点:
- 这对您的访客来说最终是最重要的。
- 谷歌使用真实的用户数据进行排名。
- 您可以获得整个用户体验的数据:不同的浏览器、设备、网络和用户行为。
- 可以为整个网站收集数据,而不是为特定的页面 URL 收集数据。
但是,您需要对网站进行更改以设置真实用户监控,并且每个测试结果的细节将少于基于实验室的完整测试。真实用户站点速度数据和预定的性能测试各有利弊,它们最终相辅相成。
第 3 步:设置真实用户监控
要从真实用户那里收集数据,您需要通过您选择的网站监控工具在您的网站上安装分析片段。
专业提示:您可以注册免费的 DebugBear 试用版以开始使用。
设置帐户后,切换到“RUM”选项卡,然后单击“开始使用”。
这将生成一个嵌入代码,您需要将其安装在您的网站上。您可以将其添加到网站的 HTML 模板中,也可以通过 Google 跟踪代码管理器等跟踪代码管理器工具进行安装。
设置完成后,您将开始看到您网站的真实 Core Web Vitals 体验。
您还可以查看世界上哪些用户拥有良好的体验,以及您的网站在哪些地方加载速度较慢。
第 4 步:使用真实用户数据查明特定的性能指标
如果您的网站在某个核心 Web 指标上表现不佳,您可以更深入地研究这个问题。
DebugBear 提供特定于指标的仪表板,显示:
- 哪些页面速度快,哪些页面速度慢。
- 用户体验的分布。
- 典型的用户体验是快还是慢。
- 页面速度如何随时间变化,无论是对于普通用户还是最慢的 10% 用户体验。
在调试 LCP 时,了解哪个页面元素是不同用户的最大内容也很重要。DebugBear 显示这些元素的细分以及用户需要等待多长时间才能显示。
这样,您就可以确定哪些页面优化将对最大数量的用户产生最大的影响。
这同样适用于 INP,您需要知道哪些页面交互导致了用户的交互延迟。
最后,DebugBear 还可以向您报告页面速度指标与其他指标(如跳出率)的关联情况:
真实用户监控与 Google 的 Chrome 用户体验报告 (CrUX) 有何不同
无论您是拥有分析还是查看 Google 数据,在这两种情况下,您都在使用真实的用户指标。
为什么不完全依赖谷歌数据呢?
- Google 提供的数据会在 28 天内汇总,因此在您的网站上发生更改后,需要很长时间才能看到效果。
- CrUX 数据仅适用于达到最小流量的页面。
- Google 只会从在 Chrome 中登录其 Google 帐户的用户那里收集数据。
第 5 步:连续运行页面速度测试
DebugBear 网站监控服务可以按计划运行性能测试,无论是每小时、每天还是每周。
首先,只需输入您的网站 URL 并选择测试位置、测试设备和监控计划。
一旦你设置了监控,一个仪表板会告诉你你的网站在过去几周的CWV指标上的表现。
您还可以监控竞争对手的网站,以查看您的网站速度如何比较。
对于每个受监控的页面,您还将获得一个特定于页面的仪表板,其中包含该特定 URL 的性能趋势以及对每个速度指标的详细分析。
例如,在下面的屏幕截图中,您可以看到:
- “最大内容绘制”指标如何随时间变化。
- 负责触发 LCP 里程碑的图像元素。
- 加载图像时涉及哪些网络请求(称为请求瀑布可视化)。
除了运行自己的性能测试外,DebugBear 还会不断检查 Google 用于排名的真实用户数据。此数据来自 Chrome 用户体验报告,简称 CrUX。
我们可以看到,在此页面上,超过86%的访问者拥有良好的体验。
第 6 步:在 Web 性能下降时设置警报
即使您有一个快速的网站,您仍然会不时遇到性能问题。例如,之后:
- 将新图片上传到着陆页。
- 安装新的第三方脚本。
- 更改托管设置中的配置选项。
- 数据库大小逐渐增长。
DebugBear可以通过电子邮件,Slack或Microsoft团队发送回归警报。
为避免嘈杂警报,如果所有测试会触发问题,则会重新运行。这样,仅针对可重现的问题发送通知。
从上面的警报中可以看出,DebugBear 还会对每个测试进行 Google Lighthouse 审计审计,包括可访问性和 SEO 分数。这样,基本的可访问性和SEO监控也包括在内。
第 7 步:比较速度测试结果
好的,您已经收到了 Web 性能警报,并看到您的指标发生了变化。接下来呢?
DebugBear 提供了一个比较模式,可让您比较回归前后的测试结果,以准确了解更改的内容以及它对用户的影响。
下面的屏幕截图显示了一个示例,其中将新的第三方脚本添加到网站,访问者现在需要等待更长的时间才能显示页面内容。
一旦您知道导致问题的原因,您就可以决定如何继续。您可以:
- 回滚更改。
- 异步加载脚本,使其不会延迟呈现。
- 优化脚本,使其更小、下载速度更快。
- 从您自己的域加载脚本,以避免与第三方网站建立服务器连接。
比较工具也是直观地传达回归或成功性能优化的影响的好方法。
DebugBear既提供了逐个显示网站每个渲染帧的幻灯片视图,也提供了显示真实用户在更改前后如何体验加载速度的视频视图。您可以将此可视化效果导出为 MP4 视频文件,并将其嵌入到团队或客户演示文稿中。
掌握您的核心 Web 指标
准备好开始优先考虑您的网站性能、在 Google 中排名更高并提供更好的用户体验了吗?免费试用 DebugBear 14 天。
免费试用版可让您:
- 测试您的网站现在的表现。
- 获取优化页面速度的建议。
- 当您的页面速度发生变化时,请快速了解情况。
- 了解真实用户如何体验您的网站。