优化页面加载速度的7个重要步骤分享

我们都有过加载时间过长的经历。这不是一个好的第一印象!一个快速的网站可以帮助你获得更多的流量，并鼓励你的访问者探索更多你提供的东西。(检查你的网站现在有多快→)但有时候，一旦你第一次加快了网站的速度，新的用户体验指标(如Interaction To Next Paint)就会出现。

其他时候，当您不注意时，意外的罪魁祸首服务器负载会减慢您的站点。那么，随着时间的推移，你能做些什么来加速你的网站并保持你的网站性能呢?最直接的答案是:为你的网站设置页面速度监控。

为什么页面速度在SEO中很重要?

步骤1:运行网站性能测试步骤

2:设置网站监控步骤

3:设置真实用户监控步骤

4:使用真实用户数据来确定具体的性能指标步骤

5:持续运行页面速度测试步骤

6:设置警报，如果网络性能下降步骤

7:比较速度测试结果

为什么页面速度在SEO中如此重要?页面速度以及它与用户体验的关系是一个排名信号。一旦用户决定打开你的网站，确保网站快速加载并提供良好的体验是很重要的。如果用户能快速找到他们需要的信息，他们就更有可能查看你网站的其余部分，或者浏览你的结帐流程。因此，让你的网站快速有几个好处，帮助你:

在谷歌排名更高，增加自然流量。提供更好的用户体验并提高转化率。为你和你的访问者降低成本。例如，70%的消费者表示，如果网站速度较慢，他们就不太可能在网上购物或返回网站。谷歌也发布了一些案例研究，解释优秀的核心Web vital也能带来更多销量。

谷歌从真实的Chrome用户收集页面速度数据，并将其作为排名信号。它着眼于三个性能指标，称为核心网络生命值(CWV)。

网页核心要素组成:

最大内容绘制(LCP)组成。累积布局移位(CLS)。第一次输入延迟(FID)， 2024年将被下一个绘制交互(INP)取代。

如果至少75%的网站访问者的体验在三个指标上都被谷歌评为“良好”，你将获得最大的排名收益。如何检查核心网络生命体征?谷歌搜索控制台的CWV报告告诉你是否需要优化你网站上的页面体验。专业提示:使用DebugBear来自动测量你的核心网络生命体征，并得到可操作的步骤来加快你的网站。

每个核心网络生命意味着什么?

每个CWV关注的是你网站不同方面的速度。你的目标是让你的网站在每个指标中都处于“良好”的地位。

最大内容绘制

(LCP)LCP指标衡量的是你网站的加载速度。具体来说，它会查看导航到页面后，最大的内容元素(例如，英雄图像或内容标题)出现的时间。

最大内容绘制评分应该是2.5秒或更短。

累积布局移位(CLS)

CLS衡量内容首次出现后页面布局是否稳定。如果发生布局移动，则意味着一些页面元素在首次出现后改变了位置。这提供了一个糟糕的用户体验，因为用户需要重新定位自己以继续阅读，或者可能不小心点击错误的按钮。

累积布局移位得分应低于0.1。这是计算出来的D通过观察移动的内容的大小和移动的距离。

第一次输入延迟(FID)和下一幅画的交互(INP)这两个指标衡量你的网站对用户输入的响应速度。当用户点击页面上的按钮时，页面内容可能需要一秒钟或更长时间才能根据用户的输入进行更新，这会使网站感觉滞后和无响应。到2024年3月，

与下一步绘制的交互将取代第一次输入延迟，成为核心Web vital指标。

的目标是FID评分低于100毫秒，INP评分低于200毫秒。最后，优化web性能还可以节省网站的托管成本，因为需要更少的CPU处理和更少的数据需要下载，从而降低带宽费用。许多网站访问者在他们的移动数据计划中也有带宽限制，当超过限制时，他们可能会产生额外的费用。

网页加载速度的重要性

想看看你的网站加载有多快，并得到加快速度的建议吗?运行一个免费的网站速度测试可以让你评估你的网站现在的表现，并提供一个关于如何改进它的详细报告。页面速度测试工具还可以识别你可以应用到你的网站的潜在优化，比如减少服务器响应时间，删除渲染阻止脚本，或者优化你的图像。即使你已经达到了Google的CWV标准，你仍然可以通过进一步优化而受益。由于谷歌着眼于最快的75%的体验，可能仍然有四分之一的访问者有不够友好的体验。例如，一些用户可能正在使用速度较慢的移动连接或飞机上的wifi。优化这些用户的页面速度可能会导致你增加潜在的购买客户。

网页加载速度测试方法

在你的网站上运行一个测试，可以告诉你你的网站现在有多快。但是，持续监控您的网站并拥有可用的历史数据意味着您可以:

在出现新的性能问题时获得警报。检查性能优化是否有预期的效果。比较不同日期的测试结果，了解差异。创建报告，向团队和管理层展示网站的运行情况。可以监控的页面速度数据主要有两种类型:

实验室或合成数据是在受控的测试环境中按时间表收集的。现场或真实的用户数据是从终端用户访问网站时收集的。

实验室数据更详细，更容易收集，而真实的用户数据可以告诉你用户是如何实际体验你的网站的。

基于实验室的页面速度测试很容易设置，提供详细的报告，并且可以为您自己的网站和竞争对手的网站进行配置。然而，基于实验室的测试有一些限制:初始页面加载后的用户交互不会被测量(除非您将它们作为测试设置的一部分编写成脚本)。计划测试使用一致的设备配置(如屏幕大小和网络连接速度)运行。然而，实际用户使用各种各样的设备，体验不同的网络条件。您只获得设置了监视的页面url的数据。像INP和CLS这样的指标在很大程度上取决于用户在加载页面后如何与页面进行交互。负责LCP度量的内容元素也经常因设备而异。对于具有大屏幕的用户，LCP元素可以是图像。在小屏幕上，LCP元素可能是标题，图像出现在折叠页下方的某个地方。

真实用户网站执行从真实用户那里收集数据有很多好处:这是你的访问者最终关心的事情。谷歌使用真实的用户数据进行排名。你可以获得用户体验的全部数据:不同的浏览器、设备、网络和用户行为。可以收集整个网站的数据，而不是特定页面的url。然而，你需要修改你的网站来设置真正的用户监控，每个测试结果将比一个完整的基于实验室的测试更少的细节。真实的用户站点速度数据和计划的性能测试各有优缺点，它们最终是相辅相成的。

为了收集真实用户的数据，你需要从你选择的网站监控工具中安装一个分析片段。专业提示:你可以注册一个免费的DebugBear试用版来开始。

一旦您的帐户设置，切换到“RUM”选项卡，点击“开始”。

这将生成一个嵌入代码，你需要安装在你的网站。你可以将它添加到你网站的HTML模板中，或者通过标签管理器工具(如Google标签管理器)安装它。

一旦设置好了，你就会开始看到你的网站真实的核心Web vital体验。

你也可以看到世界上哪些地方的用户有良好的体验，哪些地方你的网站加载更慢。第四步:使用真实的用户数据来确定具体的性能指标如果你的网站在一个核心的Web vital指标上做得不好，你可以更深入地研究这个问题。DebugBear提供了特定于指标的指示板，它向您显示:

您的哪些页面快，哪些页面慢。用户体验的分布。典型的用户体验是快还是慢。对于普通用户和最慢的10%的用户体验，页面速度是如何随时间变化的。当调试LCP时，了解哪个页面元素是不同用户的最大内容也是很重要的。DebugBear显示了这些元素的细分，以及用户需要等待它出现的时间。这样您就可以确定哪些页面优化将对最大数量的用户产生最大的影响。这同样适用于INP，你需要知道哪个页面的交互导致了用户的交互延迟。

最后，DebugBear还可以向您报告页面速度指标与其他指标(如跳出率)的相关性:

的截图来自DebugBear, 2023年8月真实用户监控与谷歌Chrome用户体验报告(CrUX)的不同之处无论你是自己做分析还是看谷歌的数据，在这两种情况下，你都是在处理真实的用户参数。为什么不完全依赖Google的数据呢?

谷歌提供的数据是28天内汇总的，所以在你的网站做出改变后，需要很长时间才能看到效果。CrUX数据仅对达到最小流量的页面可用。谷歌只收集在Chrome浏览器中登录谷歌账户的用户的数据。步骤5:连续运行页面速度测试

DebugBear网站监控服务可以按时间表运行性能测试，无论是每小时、每天还是每周。要开始，只需输入您的网站URL并选择测试地点，测试设备和监控时间表。

一旦你设置了监控，一个仪表板将告诉你你的网站在过去几周的CWV指标上的表现。

来自DebugBear的截图，2023年8月

对于每个被监控的页面，您还可以获得一个特定页面的仪表板，其中包含该特定URL的性能趋势和每个速度指标的详细分析。

例如，在下面的截图中您可以看到:

最大内容绘制指标如何随时间变化。负责触发LCP里程碑的映像元素。加载图像时涉及哪些网络请求(称为请求瀑布可视化)。

除了运行自己的性能测试外，DebugBear还不断检查谷歌用于排名的真实用户数据。这些数据来自Chrome用户体验报告，简称CrUX。我们可以看到，在这个页面上，超过86%的访问者都有很好的体验。步骤6:设置警报如果网络性能下降即使你有一个快速的网站，你仍然会遇到性能问题不时。例如:

上传一张新图片到登陆页面。安装新的第三方脚本。更改主机设置中的配置选项。数据库大小的逐渐增长。

DebugBear可以通过电子邮件、Slack或Microsoft Teams发送回归警报。

为了避免嘈杂的警报，如果会触发问题，则重新运行所有测试。这样，通知只会针对可重现的问题发送。

正如你从上面的警报中看到的那样，DebugBear还对每个测试运行谷歌灯塔审计审计，包括可访问性和SEO分数。这样，基本的可访问性和SEO监控也包括在内。好了，你已经收到了一个网页性能警报，并看到了你的指标的变化。下一个什么?DebugBear提供了一种比较模式，可以让您比较回归之前和之后的测试结果，以确切地看到哪些变化以及它如何影响用户。下面的截图显示了一个新的第三方脚本被添加到网站的例子，访问者现在等待页面内容显示的时间更长了。一旦你知道是什么导致了这个问题，你就可以决定如何继续了。您可以:

回滚更改。异步加载脚本，这样就不会延迟呈现。优化脚本，使其更小，下载速度更快。从您自己的域名加载脚本，以避免必须建立到第三方网站的服务器连接。

这个比较工具也是一种很好的方式，可以直观地传达回归或成功的性能优化的影响。DebugBear提供了一个视频视图，一个接一个地显示网站的每个渲染帧，一个视频视图，显示一个真实的用户在改变之前和之后如何体验加载速度。您可以将此可视化导出为MP4视频文件，并将其嵌入到团队或客户演示文稿中。的截图来自DebugBear, 2023年8月保持在你的核心网络生命的顶端准备好开始优先考虑你的网站性能，在谷歌排名更高，并提供更好的用户体验?免费试用DebugBear 14天。