我们 WP Engine 的朋友最近推出了一个用 Beaver Builder 构建的漂亮的新主页。我们在 Beaver Builders Facebook 群组中分享了该页面的链接，一些人指出该页面的整体加载时间相当长。我们的好朋友、杰出的 WordPress 开发人员乔恩·布朗 (Jon Brown) 给出了一个很好的解释。

脸书对话

让我快速地解释一下这里的对话：

关心的 Beaver Builder：我用 XYZ 测试工具做了一个页面加载测试，加载花了将近 10 秒！

乔恩：速度和性能是一种设计选择，对于销售转化至关重要，但这并不意味着它不需要与其他更有价值的工具进行权衡。

我看到人们经常查看字母等级和总加载时间而不了解瀑布。除非您正在查看非常简单的网站，否则这会让您误入歧途……

这些测试工具的等级确实很粗糙，忽略了很多实际情况。他们会说，当重定向用于广告、跟踪脚本和其他必须以这种方式工作的东西时，请避免重定向。他们经常忽略 HTTP/2，并建议减少请求并连接无关紧要甚至可能造成伤害的资源……他们不关注速度指数和首屏渲染……

真实页面加载<1.5s

让我们更深入地挖掘

我问乔恩是否愿意再问一些有关表演的问题，他非常慷慨地同意了。这些是我（罗比）的问题和乔恩的答案。

哦，我有没有提到 Jon 经营着一家名为 9seeds 的定制开发商店，因此可以雇用他来帮助您微调 WordPress 网站的性能！

1.你提到了“瀑布”。你能多解释一下瀑布是什么吗？

有很多工具可以评估网站性能。其中许多都会提供包含易于理解的字母等级的报告。不过，这些字母等级是相当生硬的工具，虽然当你得到全部时很好，因为它不是特别有洞察力，更不用说有帮助了，当你没有看到直截了当的时候。我发现唯一有用的字母等级是图像压缩，这是一个简单的修复，通过优化器运行你的图像。

我经常看到外行和新手开发人员被这些字母蒙蔽了双眼。影响前端 Web 性能的因素有很多，人们确实需要查看“瀑布”，它只是一张显示所有 HTTP 请求的图表，包括它们何时开始、何时完成。我使用 WebPageTest.org 来生成这些。

“瀑布”是您“看到”加载时间过长和/或阻止其他内容加载的特定资产的地方。

最后，认识到直接获得 A 可能需要设计选择（例如删除滑块）并消除第三方资产（例如 Google Analytics、HotJar 等），这对网站所有者来说比获得 A 更有价值。并非每个网站都可以达到无需做出痛苦的牺牲就可以直接获得成功。

2. 您推荐WebPageTest 作为您选择的测试工具。您为什么喜欢它？它与 Pingdom、GTmetrix（和/或 Google Page Speed？）等工具有何不同？

就我个人而言，我从未发现过比 WebPageTest.org 更好、更灵活的方法。不过，我过去也使用过 GTMetrix、Pingdom、Google Page Speed 等，它们都很好。像 Lighthouse 这样的一些新应用程序对于渐进式 Web 应用程序（不是 99% 的 WordPress 网站）来说确实很酷。我当然不是告诉人们更换工具，而是使用你知道和理解的工具。如果您不知道任何工具，WPT 是一个很好的免费学习工具。只要超越字母等级并开始了解造成这些字母等级的原因即可。

3. 关于“减少请求、串联资产”，这是否不再是最佳实践？为什么？

当大多数网站都是 HTTP（而不是 HTTPS）时，Web 服务器都使用 HTTP/1.1 协议，Web 服务器只能并行发送这么多资产。每个资源（图像、脚本、样式表）都是单独发送的，每个资源都有自己的开销，这会减慢速度。将所有可能的内容连接在一起减少了 HTTP 请求的数量，并带来了巨大的性能优势。

在过去几年中，各地都大力推动 HTTPS，Web 服务器也开始支持新的 HTTP/2 协议。 HTTP/2 具有预取和预加载等巨大优势，而且还可以并行发送所有这些微小资源，因此无需将它们连接起来。事实上，最好不要这样做，这样每个微小的资源都可以独立缓存。

重要的是要记住，只有当您的 Web 服务器支持 HTTP/2 时，这才会发挥作用，并且只有当您的站点是 HTTPS 时才可能。

也就是说，我们现在工作的所有网站都是 HTTPS 并在支持 HTTP/2 的服务器上运行，所以我什至不再考虑连接资产，而且我当然不会错过它！

4. 您是否还有其他反对的“神话”或过时的性能建议？

最重要的是，每个站点都可以直接获得A，而无需做出痛苦的让步，例如设计更改或消除您无法控制的第三方资产。不过，这真的没关系，因为您应该开始查看称为“速度指数”的东西！ WPT对此有很好的描述，但它基本上考虑的是用户何时认为“首屏”已满。这是关于速度的用户体验，而不是页面是否真正完整。这是 WP Engine 的新首页设计的一个特点，速度指数非常棒。延迟的脚本需要很长时间才能加载和完成。

5. 您还有其他可以推荐给其他人的性能工具、提示或技巧吗？

多年来我一直依赖的工具：

• WebPageTest.org – 我的最爱！
• ImageOptim – 用于压缩 JPG/PNG 的桌面应用程序
• ImageAlpha – 用于压缩 PNG 的桌面应用程序（主要是通过减少颜色数量）
• CloudFlare – 免费的大型全球 CDN 和基本 WAF。加上令人印象深刻的付费专业功能，如动态图像优化、路线优化等。

插件：

• WP Rocket – 即使在 WP Engine 上，我们也使用 WP Rocket，它也能正常工作。
• Imagify.io – 基于 WordPress/云的图像优化。
• BeaverBuilder – 我没有得到报酬才这么说！我们被要求在很多网站上进行性能审核，并且经常看到其他流行页面构建器的主要前端和后端问题（我不会指名道姓），但 Beaver Builder 却没有，这就是为什么我们在自己的网站上使用它出色地！

再次感谢乔恩花时间引导我们了解更现代的性能方法。我想给 Jon 的经纪公司 9seeds 最后一个机会。如果您正在寻求任何类型的自定义 WordPress 开发帮助，请向他们喊话！

关于乔恩·布朗

流浪者。 WordPress 开发人员。摄影师。生命之肝。