Skip to main content

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;
}
}
tip

每次更改配置后,都要重载 nginx 配置 (nginx -s reload) 或者重启 nginx 服务 (service nginx restart) 。