我们如何使 WordPress 比静态站点生成器更快(案例研究 – 加速 WPBeginner)

在 WPBeginner 成立 10 周年之际,我分享了 WPBeginner 托管基础架构的巨大升级,这要归功于我们的网络托管合作伙伴 HostGator.

不久之后,我开始收到读者的电子邮件,要求我分享有关我们如何使 WPBeginner 快速加载的详细信息.

是的,WPBeginner 的加载速度比大多数静态网站生成器快,在某些情况下也比 Google AMP 网站快.

在本文中,我将在幕后向您介绍我们如何使 WordPress 比静态站点生成器和无头 CMS 平台更快.

Speeding up WPBeginner -Behind the Scenes

注意:本文比我们通常在 WPBeginner 上发布的内容更具技术性.对于非技术用户,我建议遵循我们关于如何加速 WordPress 的终极指南.

更新:我们不再使用本文中分享的设置.相反,我们已完全切换到由 SiteGround 管理的 Google Cloud 平台.我们有相同的速度结果,并解锁了更快的后端性能.了解我们为什么改用 SiteGround.

背景

最近 WordPress 从"现代"开发人员那里得到了很多不好的评价,他们说 WordPress 很慢.

通常跟在该语句之后,您应该切换到像 GatsbyJS 这样的 JAMstack 静态站点生成器.企业界的其他人会说你应该切换到像 Contentful 这样的无头 CMS.

我的几个非常成功的企业家朋友开始问我这是否属实.

有些人甚至开始迁移到无头 CMS 的过程,因为他们阅读了其他人如何通过从 WordPress 切换到静态站点生成器来实现巨大速度提升的案例研究.

这让我非常沮丧,因为我知道他们正在浪费数万美元的迁移成本.更不用说,未来将不断增加的无穷无尽的定制成本.

所以我把它作为一个挑战来证明像 WPBeginner 这样的大型 WordPress 内容网站的加载速度与大多数现代静态网站生成器的加载速度一样快.

你可以称我为老派,但归根结底,静态网站只是从缓存加载页面.

结果

在我跳到确切的 WordPress 托管基础架构、服务器配置和插件之前,我认为分享结果很有帮助.

以下是 WPBeginner 主页从华盛顿特区服务器加载到 Pingdom 的速度:

WPBeginner Homepage Pingdom

根据您查看的时间和位置,此结果会在 400 毫秒到 700 毫秒的范围内变化,这对于主页来说是相当快的.

这是我为单个帖子页面运行的测试,因为它具有更大的图像和更多的内容:

WPBeginner Single Posts Page Speed Test from Pingdom

我们还在桌面版 Google 页面速度测试中获得了"100"的满分.尽管我们在移动得分方面确实有一些改进空间.

WPBeginner Google Page Speed Test

以上结果适用于缓存页面,这是我们的读者和搜索引擎机器人在查看我们的网站时获得的结果.WPBeginner 的感知加载时间几乎是即时的(稍后会详细介绍).

为了对比,这里是 Gatsby 主页的速度测试结果.这是一个流行的静态站点生成器,许多开发人员都非常喜欢:

Gatsby Homepage Pingdom

这里是Netlify主页的速度测试结果,这是一个流行的静态站点主机,很多开发者推荐.请注意,他们的请求量是 WPBeginner 的一半,页面大小是 WPBeginner 的 30%,但加载速度仍然比我们的主页慢.

Netlify Homepage Pingdom

Contentful 的主页速度,即"企业如何提供更好的数字体验"的无头 CMS,根本没有优化.这是我们测试过的最慢的网站.

Contentful Homepage Pingdom

我分享这些统计数据不是为了诋毁其他框架,而是为了让大家看到并非所有新事物都像看起来那样闪亮.

具有适当托管基础架构和优化的 WordPress 可以与任何静态站点生成器一样快.此外,WordPress 通过其庞大的插件和主题生态系统为企业主提供的灵活性甚至无法与其他平台相提并论.

WPBeginner 托管基础架构

说到网站速度,没有什么比您的网络托管基础设施更重要了.

众所周知,我从 2007 年开始成为 HostGator 的客户.我于 2009 年在一个小型 HostGator 共享托管帐户上创建了 WPBeginner 博客.

随着我们网站的发展,我们升级到他们的 VPS 托管,然后是专用服务器.

在过去十年中,我有机会与他们的许多团队成员密切合作,他们已成为 WPBeginner 家族的重要成员.

因此,当我接受让 WPBeginner 比静态站点生成器更快的挑战时,我向他们寻求帮助.

我与他们的领导团队分享了我的愿景,他们愿意帮助我为 WPBeginner 构建一种独一无二的企业托管设置.

他们让 Bluehost 和 HostGator 团队中最优秀的工程师与我密切合作,使 WPBeginner 快速运行.

以下是 WPBeginner 托管设置的概述:

WPBeginner Hosting Infrastructure

如您所见,这是一个跨两个地理区域(德克萨斯州和犹他州)的多服务器设置.总共有 9 台服务器,不包括负载均衡器云.每台服务器都是具有 8 个内核(16 个线程)、32GB RAM 和 2 个 1TB SSD(RAID 设置)的 Xeon-D CPU.

我们正在使用 Google 的 Cloud Load Balancing 平台,因此我们可以在全球范围内实现无缝的自动缩放和负载平衡.

设置好硬件并同步到位后,Bluehost 和 HostGator 团队将共同优化 WordPress 的服务器配置.我希望这些优化中的一些将很快纳入未来的 WordPress 托管计划 :)

服务器配置摘要

仅用几段话来总结这种复杂设置的服务器配置非常困难,但我会尽力而为.

我们将 Apache 用于我们的网络服务器软件,因为团队更熟悉它.我不会参与 NGINX 与 Apache 的辩论.

我们使用 PHP 7.2 和 PHP-FPM 池,因此我们可以处理高负载的进程和请求.如果您的托管公司没有使用 PHP 7+,那么您就错过了真正的速度优化.

我们将 Opcode 缓存与高级缓存预热器结合使用,以确保任何真实用户都不会遇到未缓存的网页浏览.

我们还将对象缓存与 memcache 结合使用,因此我们可以为登录用户(我们的作者)缩短 WordPress 管理区域中未缓存页面点击的响应时间和其他 API 响应时间.这是 WordPress 管理员中"所有帖子"屏幕的网络负载选项卡:

WPBeginner Post Edit Screen

从正确的角度来看,我们现在的管理区域体验比以前快了 2 倍.

对于我们的数据库服务器,我们从 MySQL 切换到 MariaDB,它是 MySQL 的克隆,但速度更快、性能更好.我们还从 HyperDB 切换到 LudicrousDB,因为它帮助我们改进了数据库复制、故障转移和负载平衡.

还有许多其他配置可以帮助我们提高性能和可扩展性,例如 HTTP/2 和 HSTS 以实现更快的连接 + 加密、在数据中心中断的情况下在新区域启动额外服务器的能力等.

我觉得我没有对团队建立的惊人设置公平,但请注意,我的核心优势是营销.是的,我是写 WordPress 的博主,但这里的很多技术优化都远高于我的工资水平.

它们是由 Endurance 团队中超级聪明的工程师完成的,包括 David Collins(Endurance 的首席架构师/HostGator 的首席技术官)、Mike Hansen(核心 WordPress 开发人员)以及我将在下面的致谢部分感谢的其他人.

>

CDN、WAF 和 DNS

除了网络托管之外,对您的网站速度发挥重要作用的其他方面是您的 DNS 提供商、您的内容交付网络(又名 CDN)和您的网络应用防火墙 (WAF).

虽然我将其列为三个独立的项目,但现在很多公司都在捆绑计划中提供这些解决方案,例如 Sucuri、Cloudflare、MaxCDN (StackPath) 等.

因为我想最大限度地控制和分散风险,所以我使用三个独立的公司来有效地处理每个部分.

WPBeginner DNS 由 DNS Made Easy(与 Constellix 同一家公司)提供支持.他们一直被评为世界上最快的 DNS 提供商.DNS Made Easy 的优势在于,当我的 CDN 或 WAF 上的特定数据中心无法正常工作时,我可以进行全球流量定向,以确保最长的正常运行时间.

我们的 CDN 由 MaxCDN (StackPath) 提供支持.它们基本上允许我们从其遍布全球的大型服务器网络中提供我们的静态资产(图像、CSS 文件和 JavaScript).

我们使用 Sucuri 作为我们的 Web 应用程序防火墙.除了阻止攻击,它们还充当了另一层 CDN,它们的整体性能非常惊人.我相信他们拥有市场上最好的 WordPress 防火墙解决方案.

在进行网站速度优化时,每毫秒都减少一次很重要.这就是为什么将这些解决方案提供商与我们新的网络托管基础架构结合使用会产生巨大的不同.

为了说明,以下是 WPBeginner.com 与 GatsbyJS.org 与 CloudFlare.com 的瀑布细分:

Waterfall Breakdown of Requests on WPBeginner

请注意,与其他流行网站相比,WPBeginner 的 DNS 时间、SSL 时间、连接时间和等待时间都是一流的.这些改进中的每一项都可以提供最佳结果.

Instant.page、优化的图片和其他最佳做法

您可能已经注意到的一件事是,当您浏览 WPBeginner 帖子和页面时,加载时间几乎是即时的.

除了我上面提到的所有事情之外,我们还通过使用名为 instant.page 的脚本来欺骗延迟,该脚本使用即时预加载.

基本上在用户点击链接之前,他们必须将鼠标悬停在该链接上.当用户悬停 65 毫秒(非常短的时间)时,二分之一会实际点击链接.

Instant.page 脚本此时开始预加载该页面,因此当用户实际单击链接时,许多繁重的工作已经完成.这使得人脑认为网站加载时间几乎是即时的.

要在您的网站上启用 Instant.page,您只需安装并激活 Instant Page WordPress 插件即可.

Instant Page Script

这个脚本非常简洁.我强烈建议您查看他们的网站并点击"测试您的点击速度"按钮,看看它是如何欺骗大脑的.

更新:我暂时禁用了 Instant.page,我将在不久的将来测试 FlyingPages 插件.Gijo Varghese 在 WPBeginner Engage Facebook 群组中与我分享了他的新插件,它似乎结合了 Instant.page 和 quicklink 脚本的优点.

优化网络图像

虽然正在开发新的图像格式,例如 webp,但我们还没有使用它们.相反,我们要求所有作者使用 TinyPNG 工具优化每张图片.

您还可以使用 Optimole 或 EWWW Image Optimizer 等插件自动压缩图像.

但是,我个人更喜欢让团队手动执行此操作,因此我们不会在服务器上上传大文件.

目前,我们没有对图像进行任何延迟加载,但我确实计划在不久的将来添加它,因为 Google 在 Chrome 76 中内置了延迟加载支持.

WordPress core 中还有一张票可以在所有网站上添加此功能(真的希望这很快发生),所以我不必编写自定义插件.

更新:在我发布博文几个小时后,Google 发布了适用于 WordPress 的 Native Lazy Load 插件.

限制 HTTP 查询 + 最佳做法

Reduce cross-domain HTTP requests

根据您使用的 WordPress 插件,有些插件会在每个页面加载时添加额外的 CSS 和 JavaScript 文件.如果您的网站上有很多插件,这些额外的 HTTP 请求可能会失控.

有关更多详细信息,请参阅 WordPress 插件如何影响您的网站加载时间.

现在,在您得出太多 WordPress 插件不好的错误结论之前,我想让您知道 WPBeginner 网站上运行着 62 个活动插件.

您需要做的是在可能的情况下结合 CSS 和 JavaScript 文件以减少 HTTP 请求.一些 WordPress 缓存插件(如 WP Rocket)可以通过其缩小功能自动执行此操作.

您也可以按照本文中的说明手动完成,这是我们 WPBeginner 团队所做的.

除了插件和主题添加的 HTTP 请求之外,您还需要注意您在网站上添加的其他第三方脚本,因为每个脚本都会影响您的网站速度.

例如,如果您正在运行大量广告脚本或重定向脚本,那么它们会减慢您的网站速度.您可能希望使用 Google Tag Manager 之类的工具仅在需要时有条件地加载脚本.

如果您是像 TechCrunch 或 TheNextWeb 这样支持广告的网站,那么您几乎无能为力,因为移除广告不是一种选择.

幸运的是,WPBeginner 不依赖第三方广告脚本来赚钱.想看看WPBeginner如何赚钱?请参阅我关于 WPBeginner 收入的博文.

经验教训(到目前为止)+我的最终想法

这是一个全新的托管基础​​架构,我相信我会加班学习很多课程.

到目前为止,我喜欢速度改进,因为它帮助我们提高了 SEO 排名,并且我们的管理区域速度更快.

通过新的多服务器设置,我们引入了新的部署工作流程,使 WPBeginner 与其他 Awesome Motive 产品站点保持一致.

这意味着我们现在内置了适当的版本控制,并且采取了一些措施来阻止我鲁莽(即在没有适当测试的情况下添加插件,在没有测试的情况下从仪表板更新插件等).

这些更改也为我最终退出开发并将 WPBeginner 站点的统治权移交给我们的开发团队奠定了基础.

多年来我一直在抗拒这一点,但我认为时机已到,我只需要接受它.

新设置没有 cPanel 或 WHM,所以这让我实际上毫无用处,因为我对命令行不再那么流利了.

到目前为止,我们已经吸取了两大教训:

首先,由于服务器同步/复制,更新 WordPress 并不那么简单.当我们将我的个人博客 (SyedBalkhi.com) 升级到 WordPress 5.2 时,更新文件无法在其中一个 Web 节点上正确同步,调试时间比预期的要长得多.我们正在为此构建更好的构建/测试流程.

其次,我们需要在团队之间进行更好的沟通,因为我们遇到了负载均衡器配置错误导致一些停机的小危机.更糟糕的是,我乘坐土耳其航空公司的跨大西洋航班,但 WiFi 无法正常工作.

幸运的是,由于托管团队的快速响应时间,一切都得到了解决,但这有助于我们创建几个新的标准操作程序 (SOP),以便在未来更好地处理事件.

总的来说,我对设置非常满意,我知道为 WPBeginner 进行的一些缓存配置/优化将成为 HostGator Cloud 和 Bluehost WordPress 托管计划的标准部分.

我认为这不言而喻,如果您刚开始创建网站、博客或在线商店,那么您不需要这种复杂的企业设置.

我总是建议您像我一样从 HostGator 共享或 Bluehost 共享计划开始,然后随着业务的增长升级您的托管基础​​设施.

您可以将我上面分享的许多优化应用到您当前的 WordPress 托管计划中.

例如,Bluehost 标准计划已经附带了一个您可以使用的内置缓存插件,并且默认情况下它们也提供 PHP 7.

您可以将其与像 Sucuri 这样的 CDN + WAF 结合使用,以显着加快您的网站速度.

现在,如果您是一家需要类似托管设置的中型市场/企业公司,请通过我们的联系表格与我联系.我可以帮助您指明正确的方向.

特别感谢 + 致谢

Thank you HostGator and Bluehost

虽然在上面的文章中,我已经对 HostGator 和 Bluehost 品牌大喊大叫,但我想花点时间认识和欣赏在幕后工作以实现这一目标的个人.

首先,我要感谢 Endurance 领导团队 Suhaib、Mitch、John Orlando、Mike Lillie 和 Brady Nord 同意帮助我应对挑战.

我还要感谢 Mike Hansen、David Collins、Rick Radinger、Chris Miles、David Ryan、Jesse Cook、David Foster、Micah Wood、William Earnhardt、Robin Mendieta、Rod Johnson、Alfred Najem 以及数据中心的其他人团队真正努力工作并实现了它.

我想特别感谢 Steven Job(DNSMadeEasy 的创始人),他快速回答了我的问题并帮助我更好地理解了一些设置.还想向 Sucuri 的 Tony Perez 和 Daniel Cid 表示感谢,因为他们总是支持我.

最后但并非最不重要的一点是,我要特别表扬 Chris Christoff.他是 MonsterInsights 的联合创始人,他非常友好地帮助我进行了很多测试和部署.

我真的希望您发现有关 WPBeginner 托管基础设施的幕后案例研究对您有所帮助.您可能还想查看我们关于如何加速 WordPress 的终极指南,该指南对初学者更友好.

额外奖励:以下是我为所有 WordPress 网站推荐的最佳 WordPress 插件和工具.

5

发表回复