前言
本文介绍通过接入免费的腾讯云 EdgeOne Pages 的一个新模版,来优化 WordPress 网站。
本次介绍的方案会将用户访问的成本转移到免费的 Pages 资源中实现降本,通过 WordPress 插件输出静态 HTML 然后触发 Pages 部署钩子,自动部署到全球边缘节点中实现提速。
这个部署方案操作并不复杂,只需要安装 WordPress 插件和设定两个环境变量就行。
开发背景
WordPress 是目前是世界上最受欢迎的网站构建工具之一。各大服务器厂商中基于 WordPress 的应用型服务器售卖也很火爆。但是基于 WordPress 建站的开发者大都被这几个广受诟病的问题困扰:
-
性能低下:WordPress 建立的站点往往访问性能低下,一般通过 Google Lighthose 测试出来的指标惨不忍睹。依托于 WordPress 创建的站点常需要额外寻找云服务来进行优化,且优化效果大多都不理想。
-
自定义前端样式的障碍:对于专业开发人员而言,WordPress 在编写前端样式方面不够便捷。大多数专业开发人员选择 WordPress 是因为建立和管理方便,而在开发中自由度并不算高。
-
高昂的网络成本:面对巨大的突发网络流量(好消息:流量起来了,坏消息:都是 DDos),WordPress 服务器容易形成巨额订单,对于高流量、高稳定性需求的网站而言,整体的运营成本可能会较高。
降本增效的核心思路和技术方案
降本增效(白嫖)核心思路
核心思想就是把 WordPress 作为一个 CMS,输出静态 HTML 到 EdgeOne Pages 部署,用户访问目标为 Pages 部署站点,而不是WordPress的服务器,把服务器资源节省下来。
当 WordPress 服务作为一个 CMS,只有在打包构建时有流量花费。用户访问流量的成本计入云厂商的 Pages 的免费资源中。这样就把成本转移到含有大量免费资源的 EdgeOne Pages 中了
既然已经开始(薅羊毛)接入 Pages 服务,那么可以利用的资源就更多了。像腾讯云的 EdgeOne Pages 部署的站点是自带 CDN 服务的,并且面对网络攻击会有自己的防护系统,这样一个成熟的网站就出来了。
技术方案
EdgeOne Pages 做了一个模版,模版是通过 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 中,流量并没有严格限制。这不仅保障了网站的稳定性,还大大减少了因流量激增而产生的支出。
这仅仅是测试的 Google Lighthouse 的指标,如果部署的是作为官网类的网站,Pages 的部署会利用腾讯云的 CDN 这在海外访问的优势会更大,这是我以前的一篇测试文章,希望里面的数据能够给你一些参考。
腾讯云 EdgeOne Pages 的优势
结合 WordPress 与 Gatsby 的方案虽能显著提升站点速度,但存在以下两个问题:
-
动态内容无法处理:Gatsby 将 WordPress 视为一个 CMS,并生成静态站点。对于站点内存在的动态内容,这种模式需要额外的服务进行托管。
解决:EdgeOne Pages 支持边缘函数,可在静态 Pages 中配置函数以处理动态内容,从而解决这一问题。
-
构建过程复杂:在云端使用 WordPress 与 Gatsby 结合的方案,每次 WordPress 内容发生变动后都需要重新构建并部署。
解决:EdgeOne Pages 提供部署触发器,能够在 WordPress 更新内容后自动部署至线上,从而简化了部署流程。并且 EdgeOne Pages 并没有明确规定部署次数,可以做到 WordPress 保存即可线上生效。
这是接入步骤说明,有需要的可以尝试下。