重定向Google Fonts以提升WordPress在中国网络环境下的加载速度

前情提要

几个必要的插件装完,我的WordPress算是可以正常使用了,但是每次直连打开首页都要加载很久,起初是怀疑Cloudflare的CDN在减速,但是关了CDN直连也要加载十几秒。然而如果挂代理就秒加载,这时必然意识到,网页里有天朝无法正常使用的服务,看了下源代码,果然是我所用的Twenty Fifteen主题里有Google Fonts在“作祟”。

在优化之前,代码的正文部分也能看到Google的这两个域名

Google Fonts本是一个提速之举,可在某个有着特殊国情的地方,却是会因为无法加载而实实在在地大幅减速的。原本使用了Disable Google Fonts插件来关闭Google Fonts,但是又感觉关了这些字体有种诡异感,而且可能随着WordPress版本的更新而反弹,更有甚者,将来换主题时也要特别照顾这一点,那就还是选择一个一劳永逸的办法吧:直接用网站服务器层面的代码,把这些国内无法正常访问的服务重定向到国内可以访问的源上。

加入反代

这里我们用中科大的反向代理:
https://gist.github.com/gaoyifan/680da074330d2c499d6b

这个链接分为他们的反代服务器配置代码和我们需要用的后端配置代码两块。将google-fonts-proxy-common这段代码直接贴到域名虚拟主机的配置文件中listen 443所在的server语句块即可,无需套在location语句块中。
(前提是网站已开启SSL并正在监听443端口,如果你没有SSL证书,那就放到80里)

# disable gzip response, otherwise subs_filter cannot parse it
proxy_set_header Accept-Encoding "";

#subs_filter_types text/html text/css text/xml text/javascript;
subs_filter_types text/css text/xml text/javascript;
subs_filter //fonts.lug.ustc.edu.cn/ //fonts.lug.ustc.edu.cn/;
subs_filter //ajax.lug.ustc.edu.cn/ //ajax.lug.ustc.edu.cn/;
subs_filter //google-themes.lug.ustc.edu.cn/ //google-themes.lug.ustc.edu.cn/;
subs_filter //fonts-gstatic.lug.ustc.edu.cn/ //fonts-gstatic.lug.ustc.edu.cn/;

proxy_connect_timeout 3s;
error_page 500 502 504 @redirect;

然而问题是,subs_filter定义在ngx_http_substitutions_filter_module这个第三方的模块中,但我的Nginx没有安装这个模块,在此情况下贴入这段代码会让服务器进入500内部错误的状态。

动态添加Nginx模块

(如果你已添加该模块,下面的可以不用看了23333)

我不想重新安装Nginx,那就需要往已经编译安装好的Nginx中动态添加这个模块了。

首先,我们需要查看Nginx的编译参数,以获取现在已有的模块:

[[email protected] ~]# nginx -V
nginx version: nginx/1.14.1
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-36) (GCC) 
built with OpenSSL 1.0.2o  27 Mar 2018
TLS SNI support enabled
configure arguments: --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-http_sub_module --with-stream --with-stream_ssl_module --with-openssl=/root/lnmp1.5/src/openssl-1.0.2o

configure arguments后的内容为编译参数,这一段非常重要。

根据Nginx的版本下载源码包:

wget https://nginx.org/download/nginx-1.14.1.tar.gz

如果你像我一样是用LNMP一键安装包,而且还没有删除,就可以直接从你的LNMP目录下的src文件夹中取出来:

cp /root/lnmp1.5/src/nginx-1.14.1.tar.gz /root/nginx-1.14.1.tar.gz

解压:

tar -zxvf nginx-1.14.1.tar.gz

下载ngx_http_substitutions_filter_module模块:

git clone https://github.com/yaoweibin/ngx_http_substitutions_filter_module

进入Nginx源码包的目录进行编译,这里就要用到刚才提到的编译参数了。将已有的编译参数贴到./configure后,并在末尾加上–add-module=下载的模块路径:

cd nginx-1.14.1
./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-http_sub_module --with-stream --with-stream_ssl_module --with-openssl=/root/lnmp1.5/src/openssl-1.0.2o --add-module=../ngx_http_substitutions_filter_module

接下来一步非常关键,一定只能make不要make install,否则你就重新安装了一遍:

make

之后备份并替换Nginx安装目录下的二进制文件:

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak
cp -rfp objs/nginx /usr/local/nginx/sbin/

测试新复制的二进制文件是否无误:

[[email protected] ~]# cd /usr/local/nginx/sbin
[[email protected] sbin]# ./nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

为保险起见,再看一遍现在的版本和编译参数,确保ngx_http_substitutions_filter_module这个模块已经添加进来了:

[[email protected] sbin]# nginx -V
nginx version: nginx/1.14.1
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-36) (GCC) 
built with OpenSSL 1.0.2o  27 Mar 2018
TLS SNI support enabled
configure arguments: --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-http_sub_module --with-stream --with-stream_ssl_module --with-openssl=/root/lnmp1.5/src/openssl-1.0.2o --add-module=../ngx_http_substitutions_filter_module

重启Nginx服务器:

service nginx reload

完毕!

现在访问我的WordPress首页的加载时间只有原来的约1/10了,并且即便是用了中科大的反代服务器,在国外网络环境下加载也很快。

(果然天朝网络环境特殊。。。)

后记

考虑到中科大的反代服务器可能宕机,之后我可能考虑自己写个反代,用我这个网站的服务器来做Google Fonts加载的代理。

2019-03-03追加:现在又觉得跟随系统默认的微软雅黑比较好看,所以又用Disable Google Fonts插件把Google Fonts给去掉了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注