AHdark
一个多语种开发蒟蒻
AHdark Blog

对Tkong博客的优化服务总结

介绍

2021.12.02~2021.12.03,AHdark为tkong.net进行了针对WordPress的全站优化,由于Tkong Blog站长Bruce是我的好朋友便没有收取相关费用,仅由其承担自己CDN的费用

Tkong博客 原有架构复杂、修改繁多且框架较为混乱,这为优化的过程增添了难度,也增进了我的兴趣并促使我写下此篇文章。

问题

1. 大量的外部资源

由于团队撰写文章所使用的的图床繁多,在访问 www.tkong.net 首页时会从数十个站点加载资源

这会导致DNS解析和预请求所带来的延迟拖缓页面加载速度,而且有部分图床未使用或未完全使用HTTP/2技术,导致用户需要进行过多的TCP握手以获取资源

首页资源域加载列表
首页

2. 低效能的缓存

Tkong博客使用 SuperFastSEO 插件的 全自动生成 memcached 设置 进行数据库查询缓存,同时使用WP-Rocket进行页面静态化,也在使用 Elementor 的实验化功能优化WordPress的底层输出方式

但这是低效的!

首先,Tkong博客使用了Memcached缓存数据库查询,但其现有服务器(中继迁移)并未安装PHP的OPCache、Memcached扩展!(可能是忘了?)

这就导致数据库查询完全没有缓存,因而提高了数据库查询的所需时间,且插件没有发挥作用。

同时,WP-Rocket缓存完全依赖文件系统,Session也是file存储,导致了站点的不稳定性和缓存读取的缓慢。

3. 混乱的框架结构

由于同时使用多个底层级优化插件并开启了大量的实验性功能,使得WordPress结构混乱。

片面地看,其每一个实验性功能都会对相应的算法进行优化,但综合来看,这会使得算法混乱且部分功能无法正常运行。

4. 莫名其妙的Google Fonts

莫名其妙出现的Google Fonts在大陆无法加载,其出现的原因不明,或是因国外插件繁多

虽然实际应用到Google字体的地方少,不会严重影响体验,但Console中的Error极度影响心情

架构设计

在经过初步的审视和勘察,我向Tkong Blog站点管理者Bruce提出了几种不同的架构方案

架构方案 聊天记录
QQ聊天记录

因Bruce对于成本可控的要求和尽可能降低成本的意愿,同时经过我与Tkong团队多名成员的探讨,我们最终决定采取以下方案

  • 静态文件分离
    • 使用腾讯云COS存储桶
    • 国内使用腾讯云CDN(忽略查询字符串)
    • 国外使用CloudFlare CDN
    • tkong.net 全站js、css、fonts等静态资源从静态文件域加载
    • 存储桶回源 www.tkong.net 获取静态文件
  • 附件存储分离
    • 使用腾讯云COS存储桶
    • 国内使用腾讯云CDN(自动转webp)
    • 国外使用CloudFlare CDN
    • tkong.net 媒体库中转上传至存储桶(插件实现)

同时,为了更好的体验,我为对象存储桶配置了云函数使得当有文件上传/删除操作时自动刷新腾讯云CDN和CloudFlare CDN的缓存

实施

由于Bruce本人时间安排等原因和架构优化优先级的可控,我们从静态文件和附件存储分离开始做起。

由于Tkong团队目前没有可用的已备案的域名,我提供了ahdark.com下子域名以确保可以使用国内CDN加速。

静态文件&附件文件 分离

在经过商讨和配置后,我们将静态文件存储桶及CDN部署到了 tkong-assets-store.s.ahdark.com 下,将附件文件存储桶及CDN部署到了 tkong-attachment.s.ahdark.com

腾讯云 对象存储
存储桶

静态文件分离有着众多好处:

  1. 可以有效减轻源服务器网络压力
  2. 可以有效减轻源服务器磁盘卡包问题
  3. 可以有效降低源服务器存储压力
  4. 便于后续站点迁移

将静态文件和附件分离存储的原因主要是因为 静态文件CDN可以直接忽略Query而图片需要基于腾讯云数据万象进行操作无法忽略Query,同时增进了安全性。

CDN控制台
CDN 控制台

在WordPress中,使用原有的WP-Rocket插件进行静态文件分离,使用腾讯云提供的COS对象存储插件进行附件分离,同时使用WPJAM-Basic和AHdark为主体优化的插件进行数据万象图片处理适配

数据万象图片处理

请求信息
请求信息

我通过一些方法使得近乎所有加载的图片均使用数据万象进行格式变换,以更好地显示图片。

我们看到一张图片的尺寸通常与其原尺寸不相符,若是直接加载原图会使得我们的加载时间和流量损耗加大,为此,我为Tkong博客配置了完善的对数据万象服务的应用以更好地节省流量资源带宽资源和空间资源。

这使得我们不再需要对每个尺寸的图片进行裁剪而是可以直接使用数据万象进行裁剪。

同时,图片都被转为了webp格式,以此更好地提升加载速度和减少流量消耗。

关于webp格式你可以前往下方文章获取详细信息

缓存配置

在我们直接使用WordPress时,往往会应用大量的数据库查询。尽管单一查询所需时间短,但数十次的查询仍然使得我们需要承受数百毫秒的算法延迟。

为此,我为Tkong博客配置了Memcached进行数据库查询内容缓存,以更好地降低算法延迟。

Memcached 控制台
Memcached 控制台

同时,由于服务器硬盘IOPS不高,我也为其配置了OPCache扩展和相关设置以更好地缓存PHP代码内容,减小从硬盘读取代码文件所需的时间。

OPCache 控制台
OPCache 控制台

主题优化

Tkong博客使用了Zibll主题,为了更好地适配现有架构和服务器环境,我对主题进行了优化,应用了部分适用于MySQL 5.7与PHP7.4的特性和优化方案,以更快地完成算法和增强用户体验。

同时,为了适配静态文件分离,我大量更改了Zibll的静态文件加载路径,以减少后续使用正则表达式进行页面替换所带来的性能损失。

外部图片本地化

由于Tkong团队没有明确的规则加之怠于上传外部图片,因此在其文章中引入了大量外部图片,导致加载阻塞和DNS解析繁多,降低了用户体验和页面加载速度。

为此,我通过一些插件将其大部分外部图片导入至WordPress媒体库并引用附件存储源的图片地址,使得访问页面无需过多的DNS解析,也不会因部分图床服务不稳定而降低用户体验。

页面资源调用列表
页面资源调用列表

结果

由于在开始优化之前没有详细地进行测试和统计,在此篇博客中我无法得到详细地准确地测试结果。

但根据实际情况和用户评价来看,TTFB从平均5秒缩减到了平均1秒不到,静态加载也进行异步处理并加快速度。

Network 加载信息
Network 加载信息

由于使用 Source Storage 和外置静态存储域,静态资源得到了极大地优化

在PageSpeed的测试中也拿到了96分的优异成绩

PageSpeed测试
PageSpeed 测试

PS:AHdark Blog 没有追寻如此的速度主要是因为更关注安全,所以加了三层WAF还又加了WordFence

赞赏

欢迎加入Q群交流:654022768

AH Dark

文章作者

本博客的运营者、主要开发者、主要作者 深度学习算法工程师,后端工程师,嵌入式软件开发工程师 Azure认证 运维工程师

发表评论

textsms
account_circle
email

AHdark Blog

对Tkong博客的优化服务总结
AHdark协助Tkong团队对Tkong Blog进行系统性的架构设计和框架优化,本文对此进行记叙和分析。
扫描二维码继续阅读
2021-12-06