嘿嘿，分享个 WordPress 降本增效的办法_edgeone pages wordpress-优快云博客

本文链接：https://blog.youkuaiyun.com/yopilipala/article/details/145627816

开发背景

WordPress 于 2003 年创建，是一个开源的内容管理系统，目前是世界上最受欢迎的网站构建工具之一。

目前，依托于 WordPress 的建立站点的开发者很多，大都被这几个广受诟病的问题困扰：

性能低下：WordPress 建立的站点往往面临访问性能低下的问题。依托于 WordPress 创建的站点常需要额外寻找云服务来进行优化。
自定义前端样式的障碍：对于专业开发人员而言，WordPress 在编写前端样式方面不够便捷。尽管 WordPress 提供了一系列插件和工具来帮助开发者定义前端样式，但这远不如直接通过代码进行定义来得方便。
高昂的网络成本：面对巨大的突发网络流量，WordPress 服务器容易形成巨额订单，对于高流量、高稳定性需求的网站而言，整体的运营成本可能会较高。

降本增效的核心思路和技术方案

降本增效核心思路

核心思想就是把 WordPress 作为一个 CMS，输出静态 HTML 到 EdgeOne Pages 部署，用户访问目标为 Pages 部署站点，把 WordPress 的服务器资源节省下来。

当 WordPress 服务作为一个 CMS，只有在打包构建时有流量花费。访问流量的成本计入 Pages 的免费资源中。这样就把成本转移到含有大量免费资源的 EdgeOne Pages 中了

这种方法不仅能够显著节省服务器资源和托管费用，还能利用静态网站在性能、安全性等方面的优势，具体的提效优势指标会在后文介绍。

技术方案

EdgeOne 通过 WordPress + Gatsby 的技术方案提供了高效便捷的解决方案。
（Gatsby 是一个基于 React 框架的现代化静态网站生成器，旨在通过 GraphQL 获取数据，生成快速、安全且高度优化的静态网站。）

通过在 WordPress 中安装 WPGraphQL 和 WP Gatsby 插件，即可构建一个现代化的无头（headless）WordPress 网站，使 WordPress 仅作为内容管理系统（CMS），而前端则由静态站点生成器 Gatsby 渲染。

使用 Gatsby 构建静态网站的主要优势在于其卓越的速度。并且 Gatsby 使用的是静态网站，则可以将其托管在几乎任何服务器上，这也会降低与托管相关的成本。

开发人员可在 EdgeOne Pages 中新建部署触发器，然后在 WordPress 后台绑定触发器。WP Gatsby 插件会监听 WordPress 中的内容变更事件，并触发 EdgeOne Pages 部署触发器。一旦 WordPress 中的内容发生变化，即会重新触发部署构建，完成线上站点的更新。

在站点加速上，EdgeOne Pages 部署站点自带全球加速功能，可以快速将资源部署到各边缘节点。此外，EdgeOne Pages 支持接入边缘函数，以增强站点的动态功能。

当然以上的流程在 EdgeOne Pages 的模版中封装好了，只需要手动填写几个环境变量即可部署。 链接里有部署模版和步骤文档。

优化效果展示

在 WordPress 上新建了一篇简短的博客文章。通过 Google Lighthouse 测试，在 WordPress 中的测试效果如下：

在这里插入图片描述

当部署到 EdgeOne Pages 后，测试结果有了显著改善：

在这里插入图片描述

从对比中可以明显看到，通过 EdgeOne Pages 部署后，各项性能指标都有了大幅提升。

除了性能上的提升，EdgeOne Pages 在流量成本上也有很大的节省。以轻量级 WordPress 服务器为例，其中的流量包是有限制的。当服务遭受网络攻击或者用户数较多时，很容易导致高额账单。

在这里插入图片描述

而在 EdgeOne Pages 中，流量并没有严格限制。用户访问 Pages 部署站点，而 WordPress 服务作为一个 CMS，可以将大部分访问流量的成本计入 Pages 的免费资源中。这不仅保障了网站的稳定性，还大大减少了因流量激增而产生的支出。

前端样式自由度提效

本次的技术方案中，使用无头 WordPress 架构。通过将 WordPress 作为无头 CMS，仅负责内容管理。这允许开发人员专注于在前端使用 Gatsby 编写自定义样式和组件，解除传统 WordPress 架构中前端样式的束缚。

除此之外，Gatsby 基于 React 框架，开发人员可以利用 React 组件的优势在前端开发中使用现代化的 CSS-in-JS 解决方案（例如 styled-components 或 Emotion），这提供了更灵活和强大的样式管理方式。

目前 EdgeOne Pages 已经发布支持 WordPress 和 Gatsby 架构的模板，开发者只需点击模板即可快速部署。这是详细的接入步骤说明，仅需十分钟即可使用 EdgeOne 加速你的 WordPress 站点。

腾讯云 EdgeOne Pages 的优势

结合 WordPress 与 Gatsby 的方案虽能显著提升站点速度，但存在以下两个问题：

动态内容无法处理：Gatsby 将 WordPress 视为一个 CMS，并生成静态站点。对于站点内存在的动态内容，这种模式需要额外的服务进行托管。

EdgeOne Pages 支持边缘函数，可在静态 Pages 中配置函数以处理动态内容，从而解决这一问题。
构建过程复杂：在云端使用 WordPress 与 Gatsby 结合的方案，每次 WordPress 内容发生变动后都需要重新构建并部署。

EdgeOne Pages 提供部署触发器，能够在 WordPress 更新内容后自动部署至线上，从而简化了部署流程。并且 EdgeOne Pages 并没有明确规定部署次数，可以做到 WordPress 保存即可线上生效。

这是 EdgeOne Pages 的部署模版，有使用需求的或感兴趣可以免费尝试。