如何使用 Pagespeed Insights 通过 Google 速度测试
已发表: 2022-12-03
谁愿意等待很长时间才能加载页面？ 尤其是在手机上。 良好的 Google 速度测试分数对您的网站至关重要。
页面速度和 Core Web Vitals 在今天至关重要，没有理由让页面或网站加载时间变慢，尤其是 WordPress 网站。
如果使用网站速度测试，您网站的平均加载时间超过三到五秒，那么您正在失去流量。 你的跳出率会很高，因为读者不会等着看白屏。
网站性能是一个至关重要的 SEO 因素，它将帮助您提高搜索引擎排名和转化率。 事实上，谷歌现在有一个 Core Web Vitals 移动优先优先级来对关键字和页面进行排名。
如何确保您的博客与时俱进
许多因素会影响速度测试的测试结果。
提供速度测试的互联网服务因国家/地区甚至城市而异。
如果您测试过您的互联网连接，您就会知道下载和上传速度取决于您的服务提供商以及检查您的互联网和 Wi-Fi 连接的效率。
但是，通过使用 Pagespeed Insights 的 Google 速度测试，您可以大致了解您的下载速度和网站访问者的网站性能。
没有必要认为获得 100 总是主要目标。 您可能会浪费大量时间来追求 Web 性能的完美。 但是获得绿色分数相对容易，这意味着您的网站表现良好。
Just Publishing Advice 有很多内置功能、小部件和图像，但在网站速度方面仍然取得了很好的成绩。 这是其站点性能的快速浏览。
移动分数通常会低一点，因为如果您不使用下一代格式的图像，谷歌会降低结果。
目前，这对任何博客来说都是一项非常艰巨的任务，因为它需要用 JPEG 2000、JPEG XR 或 WebP 图像文件替换您网站上的每张图像。 对于大多数博主来说，可以忽略这个警告，继续使用JPEG和PNG图片文件。
如何测试您的网站速度性能
Google 的速度测试为您提供了一个很好的网站速度近似测量值。
您还可以在 Google Analytics 中查看平均页面加载时间。 但它不会为您提供详细分析网站性能所需的信息。
您需要更好的 SEO 工具来完成这项工作。
如果您的实验室数据全部为绿色，则没有问题。 但是，如果您的评级为橙色或红色，则需要采取一些措施。
根据您获得的流量，您可能会或可能不会看到您的 Core Web Vitals 评估。
这测量来自 Chrome 浏览器的真实用户速度数据。
如果您有足够的流量来生成报告，这就是通过或失败测试。
这些报告为您提供有关可以在哪些方面改进站点性能的指导。
但是谷歌页面速度测试工具并不能给你太多帮助来追踪和修复问题。
寻找解决问题的方法
检查站点速度的更好方法是使用 GTMetrix。
它是开源的，使用 Google Pagespeed 评分和 Yahoo 的 YSlow，它为您提供的信息比 Google 多得多。
当您进行性能监控和测量速度时，您需要检查两个时间。
虽然大多数测试服务使用满载时间来衡量站点性能，但这并不是最重要的统计数据。
网站速度最准确的真实世界衡量标准是文档对象模型 (DOM) 加载时间。
当网页对用户有效时，这是站点加载过程中的点。
对我来说，这是衡量网页真实速度时最重要的统计数据。
您可以在下图中看到，完全加载时间为 1.9 秒，而 DOM 加载时间仅为 1.3 秒。
这是下面的另一个视图。 箭头标记的红线是 DOM 加载点。
您可以看到第一个用户视图中不需要的元素稍后加载。
稍后加载的元素通常是延迟加载的图像和延迟加载的 javascript 文件，以帮助您的页面更好地执行。
每当您检查您的网站时，请始终密切关注您的 DOM 加载时间，因为它可以更准确地衡量您的网站对用户的速度。
此外，运行测试两到三次，因为互联网速度每分钟都不同。
你可以通过平均一个小时左右甚至更长时间的结果来获得更好的想法。
所有 Internet 速度测试都有这种自然变化，所以不要担心随机得到一个不好的结果。
您也可以查看其他速度测试站点。
如果您的网站没有获得 Google 和 GTMetrix 的绿色评级，这里有 11 种简单、快速和容易的方法可以解决问题并让您的网站访问者和搜索引擎满意。
1.首先，清理侧边栏的杂乱
你应该做的第一件事是检查你的侧边栏。 您需要所有这些小部件和广告吗？ 事实上，你真的需要侧边栏吗？
您应该将您的页面视为主要房地产。
有多少有价值的区域浪费在您的网站上，这些元素几乎没有真正的用途并减慢了您的网站速度？
一个杂乱的网页也很难阅读，因为有太多的干扰。
大多数侧边栏元素都会提高加载速度，因此可以删除的越多越好。
2. 避免依赖于外部网站的页面内容
放慢网页速度和未通过 Google 速度测试的最严重罪犯之一是 Facebook Like 按钮。
在页面加载之前，您的页面必须等待 Facebook。 这是大多数社交媒体小部件和共享按钮的常见问题。
有些可能会使您的页面加载时间增加两秒或更长时间。
如果您需要社交媒体共享，请寻找轻量级插件。
其他可能会降低您网站元素速度的互联网服务包括亚马逊广告和小部件以及大型横幅谷歌广告。
如果您有 Google Adsense，请尝试使用文章内嵌广告而不是大横幅广告，并将您的广告平衡设置为 70-80% 左右。
与您可能读到的有关 Adsense 的内容相反，如果您使用文章内嵌广告，网站上的负载不会很大。
这是我们网站上的一个页面，其中包含由 GTmetrix 测量的 Google Ads。
对加载时间的影响很小。
对于两个广告，完全加载时间仅需两秒多一点，DOM 加载时间为 1.6 秒。
此外，广告加载较晚，这意味着页面在呈现之前没有等待 Google。
3. 检查慢速 javascript 文件
您网站上的每个元素都需要时间来加载。
用大量插件、小部件和附加组件填充您的站点会产生巨大的速度成本。
这是一个真正需要紧急关注的网站的 GTMetrix 评估。 在 12.4 秒内加载页面在今天已经很糟糕了。
您可以使用 GTMetrix 定位每一个拖慢您网站速度的元素。
单击每个 GET 旁边的 + 号，找出导致您网站变慢的原因以及您需要修复、删除或优化的内容。
通过采取三个非常简单的措施，可以快速改进上述网站。
以下三点将解释添加缓存、缩小和聚合 CSS 和 Javascript，以及延迟加载图像。
下面推荐的所有三个插件都是免费的。
4.安装W3 Total Cache
有很多非常好的 WordPress 缓存插件，包括 WP Super Cache 和 WP Fastest Cache。
但我已经在我所有的网站上使用 W3 Total Cache 十多年了。
您可以将许多设置与所有这些插件一起使用以利用浏览器缓存，但您只需要设置和使用两个。
以下是 Total Cache 的设置。 但它们对于所有缓存插件都是相似的。
您只需要激活浏览器和页面缓存。
这两个设置将通过缓存不会更改的网站元素（例如页眉、页脚、侧边栏元素和菜单）来加速您的网站。
5.安装自动优化
大多数缓存插件还可以缩小和聚合 Javascript 和 CSS。
虽然它们都工作得很好，但有些设置起来可能非常复杂。
我使用 Autoptimize 来完成这项工作，因为它更快、更容易设置并且效率更高。 事实上，您可以在不到一分钟的时间内完成设置。
它所做的是减少所有 CSS 和 Javascript 文件的大小，然后将它们聚合成一个 CSS 文件和一个 Javascript 文件。
然后加载这两个文件，这样它们就不会呈现阻塞，这通常是某些网站的谷歌速度测试的问题。
缩小和聚合会对您的网站速度产生巨大影响。
这是我用于所有网站的设置。
Autoptimize 的另一个额外好处是支持非常棒。
6.安装a3延迟加载
当用户访问您的网站时，网页上的所有图像都需要加载，然后您的页面才能激活并可供访问者使用。
通过使用延迟加载，所有未出现在用户屏幕上的图像仅在滚动时加载。
这样做会对您的站点速度产生巨大影响，因为您的图像将在 DOM 完全加载时间后加载。
在决定使用 a3 Lazy Load 之前，我尝试了几个不同的插件。 它以性能和易用性取胜。
安装后，您可以使用默认设置，也可以进行一些调整。
该插件将延迟加载您所有的图像、视频和 iFrame。
7. 安装 WP Rocket
如果你想要一个多合一的选项来取代上面的三个免费选项，WP Rocket 可以做任何事情甚至更多。
无需使用和设置三个插件，您可以使用 WP Rocket 设置页面和浏览器缓存，最小化 Javascript 和 CSS 以及延迟加载图像。
它还可以优化您的数据库，并提供与 Cloudflare 的集成。
WP Rocket 是一种经济的一体式解决方案，可让您在几分钟内轻松打造闪电般的网站。
8. 调整图片大小
大图像不会降低网站速度。 但是大小不适合网页的图像会大大降低您的网站速度。
在上传图片之前，您应该始终将图片大小调整到您需要的大小。
如果您想要全宽图像，则应将其调整为您博客页面的宽度。
这个网站有 750 像素宽，有一个 300 像素的侧边栏。 任何宽度超过 750 像素的图像都会降低网站速度。
但切勿在媒体详细信息框中即时调整图像的大小。 它不会减少您的页面大小。
如您所见，这张图片的宽度为 1218 像素。 选择大尺寸将使图像适合。
但实际上，该页面将加载 1218 像素的全尺寸图像并降低网站速度。
切勿使用 WordPress 中的图像详细信息框来懒惰地调整图像大小。
上传前请务必调整图片大小，因此完整尺寸是图片在页面上的实际尺寸。
9.优化图像
Smush 是一个流行的插件，用于通过有损压缩来减少图像。 我用的是免费版，效果很好。
但是，在将图像上传到我的任何网站之前，我都会采取额外的步骤。 我使用一个名为 ImageOptim 的小型桌面应用程序。
如您所见，它有损地将图像减少了大约 80%。
不幸的是，它仅适用于 Mac 用户。 如果您是 Windows 用户，您可以使用在线图像优化器来获得相同的结果。
您还可以阅读有关如何缩小图像的早期文章。
10. 使用 Cloudflare CDN
您需要使用内容分发网络 (CDN) 吗？
这取决于。 CDN 将您的静态文件存储在世界各地的服务器上，以帮助您的网站加载速度更快一些。 如果您的网站访问者离您很远，它会有所帮助。
但是，如果您的网站获得的主要是本地流量，那将无济于事。
Just Publishing Advice 位于欧洲，但很大一部分流量来自美国。 所以使用 CDN 是有意义的。
例如，如果您的站点托管在澳大利亚，并且您从英国和美国获得大量流量，您可能需要考虑使用 CDN。
Cloudflare 流行、高效且免费。 所以这是一个不错的选择。
但是，您确实需要一点技术能力才能将其部署到您的站点上。
您可以在我们的操作指南文章中阅读有关使用 WordPress 设置 Cloudflare 的更多信息。
11.每周检查一次
使用上述措施改进网站后，您应该定期检查。
博客上的事情总是在变化，所以关注你的表现是值得的。
大多数时候您将使用 Pagespeed Insights 和 GTMetrix。
但是，您还可以进行一项免费的网站速度测试，以检查您的网站在全球 25 个地点的性能。
Dot-Com Tools 实时测试您的网站速度，以便您了解您的网站评价如何。
如果您正在考虑 CDN 是否值得您使用，它是一个非常好的测试工具和指南。
测试时，请记住 Google 建议最大完全加载页面速度为 3 秒。
使用 WordPress，如果您使用本文中的优化建议，这很容易实现。
概括
您是否需要执行本指南中列出的所有操作？
就速度而言，开箱即用的WordPress 通常表现得很好。
但是，如果您使用缓慢的主题并添加大量插件并使用大图像，那么是的，如果您的网站加载速度很差，您应该考虑做一些工作。
另一个原因可能是主机服务器不可靠或速度慢。 如果您需要更换供应商，一个快速的主机每月只需花费几美元。
如果您在 Google 速度测试中得分为红色，那么您肯定需要紧急做一些工作。
一个技巧是激活默认的 WordPress 主题，如二十十七，然后再次测试。 大多数主题现在都是响应式的，但一些较旧的主题可能会导致网站速度变慢。
如果您的主题没问题，那么改进上图中的网站的首要任务是：
1.安装缓存插件。
2.安装自动优化
3.安装懒加载器
采取这三个步骤，您的网站性能将立即得到改善。
对于您的图像，安装 Smush 然后进行批量优化也会有很大帮助。
没有理由拥有一个缓慢的 WordPress 网站而无法通过 Google 速度测试。
如果您部署本文中列出的十个步骤，您的网站将轻松通过移动和桌面的 Pagespeed Insight 测试。