WordPress速度优化历程

现阶段方案

因为不知道怎么回事的奇葩操作,原来CentOS的服务器重启后无法引导,数据也全部灭失。我就重新整了个博客(并从谷歌快照里恢复了多数以前的博文),但是我懒得再重新编译Brotli(主要是因为Cloudflare并不能接受源服务器Brotli压缩过的数据)和ngx_pagespeed,就想着通过插件、nginx配置的调整来实现类似效果。

  • 优化插件:W3 Total Cache、EWWW Image Optimizer
  • 其他变动:直接使用Site Kit by Google,不再使用第三方Analytics及Adsense插件;替换Gravatar默认源为国内可访问的源
  • 使用unix socket(修改配置文件)

WP Super Cache生成静态页面、配合nginx配置文件可实现无需运行php即可访问博客的功能的确不错,但是对于其他方面优化的效果不是很好,因此我这次尝试了功能更多的W3 Total Cache。这款插件可以生成页面缓存、数据库缓存、对象缓存,还可CSS/JS Minify等等(部分功能需要订阅),其中JS Minify和CSS Minify出了基础的内置优化功能外,还可调用Google Closure Compiler或YUI Compressor深度优化。支持各种形式的缓存存储方式(磁盘、Memcached、Redis等)。如有Memcached/Redis的话,推荐对象缓存指定由Memcached/Redis存储;而页面缓存除非内存够大,仅推荐由磁盘缓存。unix socket同样可用,需要在每一项缓存配置下方的高级功能内设置。但是需要注意的是,安装插件后还需要调整nginx配置文件(建议在General Settings内设置”Nginx server configuration file path”,并勾选”Verify rewrite rules”,方便更改设置后W3TC对nginx的配置提出针对性修改),否则可能会出现一堆优化内容404 not found或者服务器CPU吃满的问题,站点后台菜单-Performance-Install内有详细改进说明。

EWWW Image Optimizer则替代了Pagespeed的图片压缩功能,安装启用后上传的新图片都会自动优化(并且可在设置内调整是否生成WebP文件)。与Pagespeed相比,优点十分明显:nginx内指定的浏览器缓存策略能够轻松生效;静态页面生成、搜索引擎爬虫抓取的源代码内嵌图片uri不会夹杂着奇怪的后缀。对于插件安装前已经上传的老资源,则可以在插件内的bulk optimize手动优化。需要注意的是,这款插件依赖Imagick,而Imagick及其他推荐的可选项是否安装可以在站点后台-工具-站点健康内查看。

Site Kit by Google则是Google推出的可用于关联Google旗下Analytics、Search Console、Adsense、Optimize、Tags等产品的Wordpress插件,可以一次性替代掉数个插件,只需简单的关联操作即可完成之前复杂的功能配置。同时您还可以在博客后台查看Pagespeed分数(但是好像有bug)。

Gravatar在国内近年来一直无法访问,而Wordpress使用Gravatar则会大幅拖慢博客在国内的访问速度。百度很容易就能找到解决问题的办法,但是代码有点老旧,而且并不能开箱即用。因此我稍加修改做成了一款插件,使用的是iloli的源(此处表示感谢),代码如下。可以自行上传到服务器内使用。

<?php
/*
 * Plugin Name: WP Gravatar Customize
 * Plugin URI: https://easysvc.xyz
 * Description: make Gravatar of your website accessible to some regions
 * Version: 0.1.0
 * Author: YAMAMETO
 * Author URI: https://easysvc.xyz
 * License: GPL2
 * */

/*  Copyright 2023  YAMAMETO  (email : [email protected])
 *
 *       This program is free software; you can redistribute it and/or modify
 *       it under the terms of the GNU General Public License as published by
 *       the Free Software Foundation; either version 2 of the License, or
 *       (at your option) any later version.
 *
 *       This program is distributed in the hope that it will be useful,
 *       but WITHOUT ANY WARRANTY; without even the implied warranty of
 *       MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *       GNU General Public License for more details.
 *
 *       You should have received a copy of the GNU General Public License
 *       along with this program; if not, write to the Free Software
 *       Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 *
 */



function replace_avatar($avatar) {
            $avatar = str_replace(array("www.gravatar.com","0.gravatar.com","1.gravatar.com","2.gravatar.com","secure.gravatar.com"),"gravatar.loli.net",$avatar);
    return $avatar;
}
add_filter( 'get_avatar', 'replace_avatar', 10, 3 );

此外,php的pm.max_children等设置也需要调整,过小时会导致站点访问缓慢(具体可查看/var/log内的日志)。具体作用及设置这里就不多介绍了。

前文部分做法的纠正

根据GTmetrix的建议,网站管理者应当仅对重要的第三方资源使用preconnect,建议最大同时使用的数量为2,且preconnect仅对第三方资源有效。而对于其他必要的第三方资源,可以使用dns-prefetch来加快页面加载速度,但是据称Chrome仅能同时处理3个dns-prefetch

结束语

优化终究是有限度的,要么采取插件(或者模块)的形式,要么就升级硬件配置。前者影响代码结构,后者在同样动态生成页面时对TTFB(响应时间)影响更大。当代码优化到极限后,还想白嫖提升速度?不存在的。

此外,部分服务提供商的默认配置不是很合理,例如1G运存的机器默认只分配了256M不到的SWAP(说的就是搬瓦工),导致了mysql动辄重启、php运行效率低下(mysql和php的默认配置对低运存机器很不友好)。合理值个人认为在512M。为了提升SWAP的效率,大家也可以开启ZRAM(说白了就是高达50%压缩比率、存放在运存的SWAP)来获取相比SWAP更优化的速度,推荐占用15%~25%的RAM大小,过高则可能会导致异常行为。ZRAM还会牺牲少量CPU性能。更新当然可能不稳定的zswap和zcache我并没有使用。

因为自己是初学者,所以可能本文会有很多大佬觉得很naive的地方,原理不是很清楚,配置可能也有误或者显得多余,希望大佬在评论区里纠正交流一下。

最后吐槽个Cloudflare,我都对博客域名停用Add HTML的那个APP了,然而还在博客的<head>里乱拉屎(插用不到的JS)。

附:Pagespeed部分错误修正提示

PageSpeed Serf fetch failure rate extremely high; only <num_1> of <num_2> recent fetches fully successful

官方Github中的此issue提及了这个问题,如果您的站点启用了https的话,这里似乎是针对此问题的解决方案。

修订日志

20210517:采用了新方案
20200617:增加unix socket配置
20200606:增加优化SWAP/ZRAM的指示;优化了页面内部分提示
20190930:试验性地增加优化JS引用图片的设置项,灵感源于此博文,在此表示感谢
20200126:修正pagespeed配置,增加附录

参考:

博客园:archer-wong