WordPress速度优化历程

Stage Four

  • Nginx模块:ngx_pagespeed
  • 插件:Autoptimize、Redis object cache
  • <head>修改:Preload、Preconnect(手动修改)

于是又请回了Autoptimize,至于Async Javascript就不用了,因为pagespeed对js的异步加载处理的很好了。

在再次尝试Autoptimze启用CSS优化的时候发现存在主题样式错乱的问题,遂关闭之,单用JS优化足够了。

分数好像又高了那么一丢丢(或许是心理作用)。

Stage Five

  • Nginx模块:ngx_pagespeed
  • 插件:Redis object cache、WP Super Cache
  • <head>修改:Preload、Preconnect(手动修改)

启用WP Super Cache,尝试从Wordpress层面生成静态页面,进一步优化TTFB。暴力地开启了预生成静态页面的功能,当爬虫/非注册用户访问的时候,直接提供已经生成的静态页面。最终优化TTFB到0.1秒左右(原来是1秒以上)。详细的非官方配置指导,请参照这里

此外,在查看Pagespeed Console(Pagespeed唯独此页面需要“出国留学”)时,发现了下图所示信息。

翻车现场1(Cache-Control没有设置为public[默认为private])
目前原因还不是很明确
翻车现场2(严格来说不能算是翻车,因为外站资源没办法处理的,此处主要是由于使用了Jetpack的图像加速功能,但这及家伙在国内也是名副其实的减速功能,大量图像资源储存在外站)
翻车现场3(尝试从缓存中加载时发现资源已过期)

想到自己博客上的资源是上传了就不会再动的,此外非本域名的一些内容Pagespeed似乎不会进行优化,所以进一步改进pagespeed配置以及nginx对特定资源的expire/Cache-Control设置尝试改善问题。

# 为非本域名,但仍然由你掌控的资源优化(Authorizing domains),大致要求是添加的站点是由你控制的,也启用了pagespeed
# !!!!!!!
# !请根据自己网站实际情况进行调整
# !否则会在console中出现大量
# !“Resources not rewritten because domain wasn't authorized"错误。
# !!!!!!!
# 
#pagespeed Domain https://foo.yourdomain.com;
#pagespeed Domain *.yourdomain.com; #等效于http://*.yourdomain.com
#不等效于https://*.yourdomain.com;

# 下面的几种文件类型基本涵盖Wordpress的大多数内容了,请根据站点实际进行调整。
# expires 对于长期不变的资源设置长一点,或者直接max
# Cache-Control public一定要加上,否则pagespeed没办法缓存
# 注意pagespeed会自动把优化后的文件设置为Cache-Control : no-cache, max-age=0;
# 此行为会导致部分CDN无法正常缓存服务器的源文件,对此介意请设置:
#pagespeed ModifyCachingHeaders on;
# 对Wordpress效果不明显,疑似php资源无法缓存

location ~ .*.(gif|jpg|jpeg|png|bmp|swf|ico)$
{
	add_header Cache-Control public,max-age=5184000;
	expires      60d;
}

location ~ .*.(js|css|json)?$
{
	add_header Cache-Control public,max-age=2592000;
	expires      30d;
}
    
location ~ .*.(woff|woff2)$
{
    	add_header Cache-Control public,max-age=2592000;
	expires		30d;
}

此外,还可以改善gzip配置来尝试解决问题,也可以试试Brotli,和Pagespeed的配置方式一样,也需要编译安装(此处略)。

# 当然写在nginx配置里啦
gzip on;
gzip_min_length 256;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 4;
gzip_types
	application/atom+xml
	application/javascript
	application/json
	application/ld+json
	application/manifest+json
	application/rss+xml
	application/geo+json
	application/vnd.ms-fontobject
	application/x-font-ttf
	application/x-web-app-manifest+json
	application/xhtml+xml
	application/xml
	application/rdf+xml
	font/collection
	font/opentype
	font/otf
	font/ttf
	image/bmp
	image/svg+xml
	image/x-icon
	text/cache-manifest
	text/css
	text/javascript
	text/plain
	text/vcard
	text/vnd.rim.location.xloc
	text/vtt
	text/x-component
	text/x-cross-domain-policy;
gzip_vary on;
gzip_proxied any;
gzip_disable "MSIE [1-6].";

如果不恰当地设置pagespeed Domain(设置了不受自己控制的域名)就会变成这样……

翻车现场4(不恰当的设置pagespeed Domain导致pagespeed重写url时写成了无法访问的url)
我承认前面那几个woff是自己写相对路径写错了

还是老老实实地改回来吧。

折腾完这一波,发现Pagespeed Insights得分又降了回来,好气啊。同时发现Pagespeed Console还是那样子,算了算了(听说用了这玩意要常访问站点才能更快有效果?而且好像改一遍nginx设置就会自动清一遍缓存)。

Stage Six

  • Nginx模块:ngx_pagespeed
  • 插件:Redis object cache、WP Super Cache
  • <head>修改:Preload、Preconnect(手动修改)
  • 使用unix socket(修改配置文件)

根绝某些资料显示,在linux系统中把应用间的通信方式由tcp改为unix socket会提升性能,而Nginx与php、php(wordpress)与MySQL以及redis都支持unix socket通信,故尝试修改配置。

Nginx

#注意与php配置前后一致
fastcgi_pass   unix:/var/run/php-fpm/php74-fpm.sock;

PHP

#注意与nginx配置前后一致
listen = /var/run/php-fpm/php74-fpm.sock

WordPress

需要修改wp-config.php

/** MySQL hostname */
define ( 'DB_HOST', 'localhost:/var/lib/mysql/mysql.sock' );
/** Set redis connection parameters */
/** 用于redis插件 */
define( 'WP_REDIS_SCHEME', 'unix' );
define( 'WP_REDIS_PATH', '/var/run/redis/redis.sock' );

MySQL

默认配置无需修改。

Redis

unixsocket /var/run/redis/redis.sock
unixsocketperm 777