WordPress 网站加载优化
本网站采用 WordPress 搭建,是一个动态网站,访问时需要实时查询数据库获得数据来生成页面,往往需要好几秒才能打开页面,体验不佳。由于本网站是博客性质,内容更新频率不高,可以尽可能的采用静态化页面作缓存的策略来优化,下面我们就着手开始吧。
目前本网站已经采用 Docusaurus 实现完全静态化。
W3 Total Cache
W3 Total Cache 是 WordPress 上最受欢迎的缓存和优化插件之一,我们首先选择它进行安装。安装完毕后点击“启用”,根据它的初始化引导一步一步进行设置。下面列出其中主要的几项。
Page Cache
这一项就是将动态页面静态化,从而减少数据库访问。
根据初始化引导的推荐我选择开启了 Disk: Enhanced 模式。
Minify
最小化 CSS 和 JS 文件。可能会产生页面加载问题,需要自行测试后选择是否开启。
Opcode Cache
WordPress 是用 PHP 编写的,这个功能是缓存编译后的 PHP 代码,减少重复编译的时间。此功能需要付费升级到 Pro 版,暂未开启。
Database Cache
缓存数据库查询的结果。某些情况下可能查询缓存的结果还没有查询数据库快,不建议开启。
Object Cache
类似 Database Cache ,建议配合 Redis/memcached 使用。暂未开启。
Browser Cache
浏览器缓存,包括 Cache-Control
, ETag
, Last-Modified
, Expires
等 HTTP 缓存控制 headers ,可以进行精细化设置。
CDN
静态资源文件可使用 CDN。由于本站采用 Cloudflare 代理加速,故暂不开启。
Reverse Proxy
可配合 Varnish 使用。暂未开启。
User Experience
可选择 图片懒加载、禁用 Emoji 等选项。
Nginx 配置
以上的 W3 Total Cache 各项设置完成并保存后,会在你的网站根目录(此目录可在 WordPress 管理后台 – Performance – General Settings – Miscellaneous – Nginx server configuration file path 更改)下生成一个 nginx.conf 配置文件,在你的网站的 nginx 配置中 include
此文件即可。
例子
server {
listen 80;
server_name yoursite.com;
access_log /var/log/nginx/yoursite.com_access.log;
error_log /var/log/nginx/yoursite.com_error.log debug;
root /var/www/vhosts/yoursite.com;
index index.php;
include /var/www/vhosts/yoursite.com/nginx.conf;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ .php$ {
fastcgi_index index.php;
fastcgi_pass 127.0.0.1:9000;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
每次更改配置后,都要重载 nginx 配置 (nginx -s reload
) 或者重启 nginx 服务 (service nginx restart
) 。