目录
您是否想知道如何让您的网页尽快加载？
这篇文章将向您展示 Tribe SEO 为从 37% 的 Google PageSpeed 移动得分上升到完美的 100% 所采取的确切步骤。
因此，如果您想在 Google 上排名更高，为您的访问者提供出色的用户体验，并在 Google 的 PageSpeed Insights 测试中取得优异成绩，那么您来对地方了。
我将分解所有克服的障碍，并分为五个关键里程碑，这些里程碑使我们的 Google Page Speed 移动得分达到 100%：
现在，在开始之前，先做一点免责声明。截至本文发布时，Tribe SEO 主页在大约一半的时间里获得了 100% 的 Google PageSpeed 移动分数。这是非常典型的，因为在运行页面速度测试时，经常会有一些变化。
里程碑 #1：确保代码干净
无论您是否意识到，您的网页都由一系列影响您网站页面速度的脚本组成。
对于最简单的 WordPress 网站，每当用户从服务器请求网页时，都会运行 PHP 和 MySQL 脚本。
但是，典型的 WordPress 网站会使用主题、大量插件，有时还会使用页面构建器。这会导致处理更多的脚本 – 服务器端（如 PHP 和 MySQL）和浏览器端（如 JavaScript 和 CSS）。
但事情是这样的。其中许多附加脚本对于您希望页面的外观和功能是不必要的。这会导致代码臃肿和页面速度变慢。
为了帮助说明这一点，以下是 Oxygen4fun 提供的一些统计数据。
如果我们查看三个流行的页面构建器的默认安装，我们可以看到 Brizy Pro、Divi Builder 和 Elementor Pro 的 JavaScript 和 CSS 文件组合大小分别为 1624 KB、1243 KB 和 966 KB。
因此，在这三者中，Elementor Pro 的文件大小最小，因此代码最精简。
但它绝不是所有页面构建器中最精简的，因为 WP Bakery、Beaver Builder 和 Oxygen Builder 的文件大小较小，分别为 494 KB、59 KB 和 34 KB。
很明显，Oxygen Builder 拥有最精简的 CSS 和 JavaScript 代码。与 Elementor Pro 相比，它大约占总大小的 4%，与 Brizy Pro 相比约为 2%。
这是因为 Oxygen Builder 的构建前提是仅加载需要的内容和需要的时间。
Oxygen Builder 还可以创建非常干净的 HTML 代码。其他构建器为简单的内容元素（如 H1 标题）创建大量嵌套的 div，这增加了代码的膨胀。
相比之下，Oxygen 不会生成不必要的 div。
最重要的是，Oxygen Builder 既充当主题又充当页面构建器，因此它输出的代码非常精简，可以更准确地描述为站点构建器。
由于精简的代码和支持 Facebook 社区，Tribe SEO 选择了 Oxygen Builder 来帮助开发我们的新网站。
我们在选择无臃肿的插件时也很谨慎。例如，WP Fluent Forms 的文件大小非常小。
里程碑 #2：安装 Page Speed 插件
在尝试了几个 WordPress 页面速度插件后，我决定使用 WP Rocket，因为它不仅产生了最好的页面速度分数，而且易于使用并且与我们的网站设置具有出色的兼容性。
开箱即用，它提供了强大的功能，例如页面和浏览器缓存以及 GZIP 压缩，仅举几例。
然而，WP Rocket 的“文件优化”功能产生了最显着的影响。
但首先，让我们回顾一下 Tribe SEO 的主页在没有安装 WP Rocket 的情况下的表现。
它的 Google Page Speed 移动得分被低估了 37%。Google 突出显示了 Largest Contentful Paint、Time to Interactive 和 Total blocking Time 的“红色三角形”。所以，我知道这些领域需要改进。
Google 还用红色三角形标记了 3 个机会，这表明这些机会是修复的最高优先级。这些包括：
有趣的是，延迟屏幕外图像和删除未使用的 JavaScript 的修复是相同的。
当我点击阅读更多关于删除未使用的 JavaScript 的信息时，Google 突出显示了三个需要注意的 JavaScript 文件。
第一个是我们的实时聊天小部件 Chatra。第二个用于 Convertbox，我们用它来捕获电子邮件。第三个是 Spotlight，我们将其用作视频播放器。
Spotlight 用于 9 个视频，这些视频都包含作为视频缩略图的屏幕外图像。
那么，解决方法是什么呢？
解决方法是延迟这三个文件的 JavaScript。
这在 WP Rocket 中很容易做到，但需要我付出少量的努力。
所以，我做了以下工作：
在 WP Rocket 中，我浏览到“文件优化”选项卡，然后向下滚动到 JavaScript 部分。我启用了“Load JavaScript deferred”，但真正的魔力在于启用“delay JavaScript execution”。
WP Rocket 添加了一些默认的 JavaScript 文件，还允许您添加自己的自定义脚本。你可以看到我已经将 Chatra、Convertbox 和 Spotlight 等添加到列表中。
WP Rocket所做的不仅仅是推迟 JavaScript。 它将 Tribe SEO 主页的 Google PageSpeed 移动得分从 37% 提高到 97%。 最棒的是，WP Rocket 配置只花了大约 5 分钟就完成了设置。
我确实想强调推迟或延迟 JavaScript 在我们的案例中是多么重要。 如果我禁用延迟 JavaScript 功能，我们的 Google Page Speed 分数会下降到 50%。
里程碑 #3：升级服务器
我们曾在 Kinsta Web 服务器上推出了由 Oxygen 构建的新网站。Kinsta 以快速专用 WordPress 托管解决方案之一而闻名，总的来说，支持和体验非常好。
我们还测试过另一家网络托管公司 Cloudways 。
起初，性能似乎低于我们在 Kinsta 上所体验到的。我们的 Google PageSpeed 移动评分从 97% 下降到 94%。
但似乎有些事情不对劲。Largest Contentful Paint 和 Time to Interactive 有所提高，但 Cumulative Layout Shift 分数已从 0 上升到 0.781。这很奇怪，因为 CSS 或 HTML 都没有改变。
因此，经过一番犹豫，我跳回了 WP Rocket 的“文件优化”部分，并通过禁用“优化 CSS 交付”进行了实验。
稍后快速清除缓存，CLS 问题得到修复，我们的 Google 页面速度移动分数从 Kinsta 的 97% 跃升到令人满意的 Cloudways 的 99%。
我惊讶地看到切换虚拟主机还将我们的最大内容绘制分数从 2.4 秒提高到 2.1 秒。
如果您想知道我们在 Cloudways 上选择了什么套餐，它是 Vultr High Frequency 2 GB 的 RAM，每月花费 26 美元，这比我们在 Kinsta 上支付的费用略便宜。
现在，为了了解如何将移动分数从 99% 提高到 100%，我前往 Lighthouse Scoring Calculator 页面并尝试了他们的评分刻度盘。
很明显，Largest Contentful Paint 和 Time to Interactive 指标是薄弱环节，所以这就是我在最后推送时要关注的重点。
里程碑 #4：改进最大的内容绘制
最大内容绘制 （LCP） 是一个 Google 页面速度指标，用于衡量网页的最大内容元素完全加载需要多长时间。
现在，我们已经通过延迟 JavaScript 和升级我们的 Web 主机看到了良好的 LCP 进展——但我们还能做什么呢？
好吧，我们主页的 LCP 元素是一张图片。这是我们的“SEO mountain”的 SVG 图像。
如果您的 LCP 元素是图像，以下是一些对我们有用的方法：
1. 预加载您的 LCP 映像
预加载资源允许您将字体、图像、JavaScript 和 CSS 加载到网页源代码的更高位置，以便立即看到它们，并且延迟最小。
WP Rocket 提供了预加载字体的功能，但据我所知，不适用于图像。
我已经在我们的网站上安装了 Code Snippets 插件，这允许我使用 ‘link rel=“preload”’ 属性创建自定义主页规则来预加载 SEO 图像：
这对提高 Largest Contentful Paint 分数产生了显着影响，但感觉有点像一个小技巧，而且无法扩展到您网站上的每个页面。
2. 确保服务器端压缩
对于 Tribe SEO 主页，我们的 LCP 元素的图像格式已经很好了，因为 SVG 通常具有非常小的文件大小，可用于基于矢量的图形。文件大小为 13 KB。
当我通过 GTMetrix 运行我们的主页并查看瀑布图时，我很高兴地看到 SEO 山图像是加载的第一个文件。这表明图像的预加载工作正常。
但是，从服务器下载的图像文件大小仍为 13 KB，这表明 Web 服务器未对其进行压缩。
这很奇怪，因为 WP Rocket 的服务器端压缩适用于我们网站上的常规图像和文本。
我向 Cloudways 发送了一张网络主机支持票，他们确认默认情况下他们的服务器上没有启用 SVG 压缩，但此后他们已经为我启用了它。
最终结果是 13 KB 的文件减少到仅 3.9 KB。
这也有助于压缩我们网站上的所有其他 SVG 图像。例如，我们的 Learn SEO Fast 图像在没有服务器端压缩的情况下为 205 KB，有服务器端压缩时为 42.7 KB。
3. 禁用 LCP 元素的延迟加载
在 WP Rocket 中默认启用延迟加载绝对是一件好事，因为它有助于许多页面速度指标。
但是延迟加载会减慢图像的最大 Contentful Paint 分数吗？
我不能肯定地说，但关于这个主题有足够的理论表明它可以。因此，为了更好地衡量，我禁用了 SEO mountain SVG 在 WP Rocket 中被延迟加载。
同样，我不确定为您的 LCP 图像禁用延迟加载是否适用于您网站上的每个页面。也许这是 WP Rocket 将来可能会考虑的功能。
那么，预加载我们的 LCP 图像、确保服务器端压缩和禁用 LCP 图像的延迟加载是否有助于提高我们的最大内容绘制分数？
是的，确实如此！
我们将 LCP 从 2.1 秒提高到 1.8 秒。经过测试，预加载我们的 LCP 图像似乎对我们的 Largest Contentful Paint 分数影响最大。
这不足以将我们的 Google Page Speed 移动分数提高到 100%，但我确信我正在接近我们所需的分数。
里程碑 #5：缩短互动时间
Time to Interactive （TTI） 不是 Core Web Vital，但它确实有助于您的 Google Page Speed Insights 整体得分。它衡量页面需要多长时间才能完全交互。
不要将其与首次输入延迟 （FID） 混淆，后者是 Core Web Vital。FID 也衡量交互性，但它侧重于用户与页面的第一次交互，而 TTI 侧重于整个网页何时变得完全交互。
现在，我使用 Lighthouse 评分计算器做了一些侦探工作，我发现我需要将我们的 TTI 从 2.5 秒提高到 2 秒以下，才有机会获得 100% 的移动页面速度分数。
但我该怎么做呢？
嗯，我这边有很多试验和错误。
带来回报的关键测试是暂时禁用我们网站的页眉和页脚。
这导致了难以捉摸的 100% Google Page Speed 移动分数！TTI 也从 2.5 秒提高到 1.7 秒。
但是，是页眉还是页脚导致了问题呢？
我恢复了标题，并且 100% 的分数仍然存在。
当我再次查看页脚时，有一个相当大的山脉 SVG 图像，有趣的是，它是 Tribe SEO 主页上唯一的背景图像。
因此，我恢复了页脚但没有图像，并且该页面保持了难以捉摸的 100% Google Page Speed 移动分数。
在深入研究了 WP Rocket 的支持文档后，我发现背景图像需要采用特定格式才能延迟加载。
我不是 Web 开发人员，我很难获得正确的背景图像格式。所以，为了让生活更轻松，我只是把它加回标准图像，嘿，WP Rocket 能够发挥它的延迟加载魔术，并且保持了 Tribe SEO 100% 移动页面速度得分。
结束语
以下是最大的两个页面速度提示：
1） 密切关注优化服务器端和浏览器端脚本。WP Rocket 是一个出色的 WordPress 缓存插件，用于优化 JavaScript。
2） 保持好奇心并尝试许多不同的测试，看看哪些调整对提高页面速度分数的影响最大。
发表回复