Blog 的重建之路

Blog 的重建之路

新 WordPress 网站的优化记录与建议

经过两年的使用,我决定对旧博客进行全面更新和优化。在比较了 WordPress、Typecho 和 Hexo 后,基于功能和生态系统的考虑,我选择继续使用 WordPress并进行优化。删除了无用插件,仅保留14个必要插件,以提高加载速度和隐私管理;调整了Cloudflare的配置,确保读取用户真实IP,提升安全性;使用简洁高效的主题,避免低质量代码影响性能;启用缓存机制,减少页面动态生成时间,提高加载速度,并尽可能利用CDN加速静态资源加载。通过一系列优化,新博客在性能和加载速度上显著提升,希望这些经验对其他使用 WordPress 的博主有所帮助。

基于人工智能的总结,仅供参考。

本站已经两年多了,最开始的 Blog 是随便找了个模板套的,一直感觉很老气,但是也懒得更新模板了,所以两年来博客的样式都没什么大变化。

不过前两天恰巧在折腾 WordPress,优化掉了不少没用的插件,一通折腾之后我发现博客的 CSS 文件被干废了,首页的样式变得一片空白。这个意外让我下定决心重建博客。这篇文章记录了我在 WordPress 网站优化过程中的一些经验和建议。

方案选择

我寻找了主流的博客系统并逐一试用,得出了以下的对比结果:

WordPress:

  • 优势:功能强大且扩展性高,有大量的插件和主题可供选择。适合需要高度定制化的用户。
  • 劣势:对服务器资源要求较高,在特定条件下,运行效率可能较低(但是这一劣势可以经过优化来大大克服);可能需要更多的维护与保持更新。

Typecho:

  • 优势:轻量级且易于使用,对服务器资源消耗小,而且拥有后台管理系统,适合服务器配置有限的情况。
  • 劣势:功能相对较少,可能不适合需要高度定制化的用户。生态陈旧,本体更新频率不高,插件也可能较老。

Hexo:

  • 优势:搭建方便,生成的静态网页加载速度快,对搜索引擎友好。适合喜欢折腾和有一定技术基础的用户。
  • 劣势:没有后台界面,网站的搭建、主题的设置等都在本地完成;同时,本体功能较少,需要外接评论系统等基础功能。

在原来的 Blog 运营时,我的小主机的 CPU 经常被 WordPress 进程跑满。所以我首先考虑的是否还要继续使用 WordPress 作为博客系统。所以我准备了以下两个候选方案:

  1. 全面拥抱轻量化 - 从 WordPress 转向 Typecho, Hexo 或诸如此类的小型轻量化博客系统;
  2. 将本色发扬光大 - 依然使用 WordPress,并进行必要的性能优化。

对于方案 1,其最大的优势就是轻量化,性能开销小。但鱼与熊掌不可兼得,性能开销小同时带来的也是生态上的差距,虽然对于博客来说,其实可自定义这个点没那么重要,但 Typecho 生态的陈旧,许多插件常年没有更新;Hexo 甚至缺少一个可直接管理的后台,也就是说我如果要发一篇新的文章,我就得手动生成一个新的静态页面,然后上传至服务器。这对于一个“懒人”和“新手”来说是没法接受的。此外,我已经在 WordPress 系统中撰写了不少的文章,文章和媒体资源的转移也是一个很困难的点。Typecho 虽然官方提供了从 WordPress 转移的插件,但我前面提到过,Typecho 的生态十分陈旧,这个转移插件也随着 WordPress 的更新而失效了。这些痛点让我不得不重新考虑:我究竟需不需要转移至新的博客系统呢?

所以,方案 2就此诞生。作为全世界最通用的建站和博客系统 WordPress 来说,在设计上肯定不会有太大的性能问题,WordPress 开发团队也肯定也考虑到这个问题。

那么 WordPress 效率问题主要是在哪里呢?

对这个问题,我想引用 Dennis 大神的话:

很多性能问题都是 WordPress 使用不当造成的,比如安装太多效率低下的插件,使用代码质量低下的主题,没有正确处理 WordPress 的缓存等等。

WordPress 性能优化:为什么我的博客比你的快

除了这些,我还想补充一点:就是原版的 WordPress 包含了太多对于 Blogger 来说没有必要的特性。所以提高 WordPress 性能,就要从这些方面入手。所以在方案 2中,我打算对 WordPress 进行优化,在不脱离 WP 生态的前提下重置整个 Blog.

综合 WordPress, Typecho, Hexo 及两个方案的优缺点,我选择了方案2,因为方案 2无需考虑文章在不同博客系统之间的迁移问题,同时 WordPress 是我常用的博客系统,我对此也算是比较熟悉。

优化过程

我的思路是尽可能地无缝迁移,所以我在另一台服务器上建立了一个用于过渡的 WordPress 站点,从零开始设置、优化新的 Blog 程序。待设置完毕后再使用迁移插件将全站恢复到老的博客中。不得不说,WordPress 不愧是最大的博客系统,我在原来的 Blog 上可以直接导出我的文章与媒体库,然后直接在新的 WordPress 网站上使用官方的 WordPress 导入工具一键导入即可,整个过程基本都是无缝的。

Cloudflare 兼容性

由于我的网站使用了 Cloudflare,所以 WordPress 程序读取到的 IP 是来自 Cloudflare 节点的 IP 地址,这产生了一定的安全隐患。不过 Cloudflare 在回源时请求的 header 中放置了真实的 IP 地址,我们只需调整 WordPress 的配置,让其从 header 中读取 IP 地址即可。在 WordPress 根目录下的 wp-config.php 中添加以下内容:

if( !empty($_SERVER['HTTP_X_FORWARDED_FOR']) ) {
    $get_HTTP_X_FORWARDED_FOR = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = trim($get_HTTP_X_FORWARDED_FOR[0]);
}

这段配置实现了让当使用 Cloudflare 等 CDN 时,让 WordPress 从其回源连接的请求头中读取用户的真实 IP.

主题选择

上文提到了使用代码质量低下的主题也会导致 WordPress 运行效率低下,所以在新的网站中使用了一个十分简洁的主题,它的文件只有数十 KB,加载速度极快,可以很好地规避由主体本身代码问题而带来的效率问题。

大道至简

插件选择

我以前的旧博客运行慢的一个很大的原因就是插件过多,当时我为了让网站更加花哨一点而安装了很多在我现在看来根本没用的插件,这些插件会随着网站的加载而一同加载,不仅降低了网站的加载速度,同时在隐私搜集上也有较大的缺陷,由于插件数量过多,再加上没有办法控制每个插件的隐私信息搜集行为,所以产生了隐私管理上的“真空区”。所以这次重建 Blog,对于插件我肯定是要“严选”。两个“严格”:一是严格控制插件数量;二是严格管理插件的行为。

所以经过层层挑选,我在新的博客系统中只安装了 14 个插件,为了保证信息的透明度,我将对所有插件的作用进行说明。

所有插件
  • Advanced Comment Form
    • 自定义评论区。删除 WordPress 默认的电子邮箱输入框,使得评论更加轻松。
  • Akismet 反垃圾评论:垃圾评论保护
    • 检测并删除垃圾评论。有些机器人会自动在文章下留下垃圾评论,此插件的作用就是自动检测并删除它们。
  • hCaptcha for WordPress
    • 图形验证码。在进行敏感操作时,显示来自 hCaptcha 的图形验证码,以规避 BadBot 的自动操作。
  • Jetpack
    • 来自 WordPress 官方的管理插件。此插件为网站提供了综合性的管理功能,例如统计、基础安全保护、更多的写作选项等。
  • Jetpack Boost
    • Jetpack 的加速插件。此插件为 Jetpack 提供了 Boost 选项卡,它可以自动检测页面加载速度并给出增强性能的建议。
  • Site Kit by Google
    • Google 分析插件。该插件可以将谷歌分析提供的见解显示在 WordPress 后端。
  • Wordfence安全
    • WordPress 安全保护。此插件可以帮助抵抗针对 WordPress 的恶意攻击,例如 XSS 注入、SQL 注入、恶意提权等。
  • WordPress 导入工具
    • 来自 WordPress 官方的迁移插件。此插件从另一 WordPress 网站导出的文章或媒体库导入进新的 WordPress 网站。
  • WP Markdown Editor (Formerly Dark Mode)
    • 为编辑器提供 Markdown 支持。
  • WP-Optimize - Clean, Compress, Cache (推荐)
    • 网站性能优化。此插件优化 WordPress 的数据库、压缩图片、建立缓存。旨在提升性能。
  • WPJAM BASIC (推荐)
    • WordPress 功能调谐。此插件可精简 WordPress 冗杂的不需要的功能、修改 WordPress 默认源。
  • WPvivid备份插件 (推荐)
    • 全站备份。此插件不仅可以实现备份恢复,其还提供可在两个网站中无缝迁移的能力。它提供了自动覆盖另一 WordPress 的功能。
  • Yoast SEO
    • 搜索引擎优化。其优化网站的地图结构,为搜索引擎收录提供了捷径。
  • 经典小工具
    • 为编辑器恢复了经典 WordPress 小工具栏。

这是 wljay Blog 安装的全部插件,供感兴趣的读者或是其他 Blogger 参考。

精简 WordPress 的功能并调整默认源

上文提到,原版的 WordPress 包含了太多对于 Blogger 来说没有必要的特性,这也是导致 WordPress 运行效率低下的原因之一。对于个人比博客,对 WordPress 进行适当的精简也是很有必要的。上文提到的 WPJAM BASIC 插件的作用就是如此,它可以去掉 WordPress 当中一些不常用或者影响性能的功能,比如文章修订,Trackbacks 等。同时还可以修改一些在中国大陆受到限制的资源库的链接。

由于 WPJAM BASIC 插件的开发者是国人,所以一些特色元素(关注公众号获取激活码)之类的那肯定是少不了,不过这些特色依然不影响 WPJAM BASIC 是一款优秀的免费插件。安装激活后,可以对 WordPress 的功能进行一定的精简调整,并更换掉在大陆无法使用或加载速度极慢的资源链接,有效提升网站的加载速度。

精简 WordPress 的无用功能
可以对 GoogleFonts 等源进行自定义

优化前端载入速度

WordPress 前端想做到高性能其实并不困难,只需要降低页面的“动态属性”即可,其最优解就是完全的前后端分离:前端为后端提前生成的纯静态页面,这个原理就跟上文提到的 Hexo 差不多了,也要花费很大的精力。所以我退而求其次,选择了建立页面缓存+返回 304 状态码的方法,将已发表的文章使用插件建立基于 html 的页面缓存,同时将缓存交由插件管理,设置时间表来定时进行预缓存处理,这样就可以避免每次访问的时候页面都要通过 php 来生成,从而降低加载速度。

为了实现这个功能,我在 WordPress 插件市场挑选了很多插件,最终经过对比,我选择了 WP-Optimize - Clean, Compress, Cache 这款插件,主要的原因是它不仅支持建立缓存,还支持压缩图像。同时,它的设置选项也十分地好理解。

WP-Optimize 的缓存页面

在设置缓存之前,我需要将 WordPress 的“固定链接”选项开启,由于我使用了 NGINX 作为 Web 引擎,而又由于 NGINX 与 php 的兼容性,直接开启“固定链接”可能会导致404。这时就要在 NGINX 配置中设置 URL 重写规则,我们需要在网站的配置文件中添加如下内容:

    location / {
          try_files $uri $uri/ /index.php?$args;
       }

这段配置实现了在 NGINX 下,WordPress 的固定链接功能可以正常工作,这是配置缓存的必要的前提条件。

设置好固定链接后,我们就可以在 WP-Optimize 中打开缓存了,对于更新频率较低个人的博客网站,缓存生命周期可以适当延长,我设置为了 1 个月。同时,打开预加载开关,这个功能可以模仿真实用户的访问,触发缓存机制。预加载的时间表可以自定义,我设置为了当缓存到达生命周期时自动进行预加载,以保证缓存拥有最高的命中率。

预加载页面

全站覆盖

我刚刚进行的这些操作都是在我新建立的过渡站上做的,所以现在我要做的就是将过渡站全站备份后覆盖至原有的 Blog 上。

对此,我使用 WPvivid备份插件来进行覆盖操作,在覆盖站上安装此插件后,直接备份所有的数据库+WordPress 文件。然后再在待覆盖的老 Blog 上也安装此插件,将备份后的压缩包上传至服务器,即可覆盖更新。在此过程中,此插件会将所有的 URL 调整为覆盖后网站的 URL,非常好用。

全站备份

设置到此,经过测试,整个 WordPress 的运行效率以及网站前端的加载速度已经有了很大的提升。但是如果还想追求更高的运行效率,还可以进行动静态分离的操作,也就是将静态资源托管至速度快的 CDN 加载,这也是腾讯,淘宝等大网站,他们图片的域名和本体网站的域名不是同一个的原因。

网站的静态文件一般有两种:

  1. 网站的 css, JS 和一些主题的常用背景图片和按钮文件,这些图片如果网站不进行改版或者其他改动,基本上是不会修改的。
  2. 每天更新的网站内容时上传的图片或者附件,这些图片文件也是基本不会改动的。

解决好静态文件的存储和加速,网站性能就首先能得到基本的保证了,WordPress 构建的网站和博客也是一样的。对于这些静态文件来说,最好的解决方案永远是使用 CDN 网络进行加速,这样服务器的压力将大大降低,因为访问页面只有当前页面是在自己的服务器上,其他所有图片,js 和 css 都是从 CDN 上获取的。

但不幸的是,我的网站没有进行 ICP 备案,所以没有办法使用在中国大陆境内设置了加速节点的 CDN 服务,我只能使用 Cloudflare 这种没有大陆节点的境外提供商。但是我已经尽了最大努力来优化境内网络与 Cloudflare 节点之间的连接了。详情请看我的这篇文章:

所以朋友们在访问我的网站的时候如果遇到了无法加载的情况,大概率是大家的网络和 Cloudflare 网络之间的连接问题导致的。这个我也没有太多的办法,只能等以后备案之后再将整个网站转移到国内才能解决了。

好的,现在也该和以前的老 Blog 说拜拜了~再见吧,感谢 Neve 主题,陪伴我的 Blog 从 2022 年到了 2024 年,老伙计也该寿终正寝啦!欢迎新伙计,希望你能平稳地陪伴所有人!

1 条回复

  1.  的头像
    匿名

    👍👍👍

发表回复

必填项已用 * 标注。