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) 。