前言
在使用 WordPress 开发网站时,尤其是开启全站 AJAX 或 PJAX 功能的场景中,常会遇到一个性能问题:用户点击浏览器“返回”按钮或来回切换页面时,页面无法快速显示,浏览器需要重新请求 admin-ajax.php,导致页面返回明显延迟。
问题的根源通常出在 WordPress。
WordPress 的 admin-ajax.php 默认是:
no-cache→ 浏览器每次访问都会向服务器发送请求no-store→ 不会在本地缓存must-revalidate→ 每次都要重新验证
优化方案
解决 admin-ajax.php 导致返回慢的问题
先检查你的缓存插件或主题是否已经处理这个问题,你可以退出后台登录,再通过F12查看admin-ajax.php的请求的响应标头是否存在:
cache-control : no-cache
如果有,你可以看看缓存插件是否有相应的设置,没有的话可以跟着我的文章来。
我们可以通过 WordPress的nocache_headers过滤器,修改非后台请求的缓存策略,让浏览器缓存一小段时间即可:
添加以下代码到主题根目录下的function.php
add_filter('nocache_headers', function($headers) {
if (defined('DOING_AJAX') && DOING_AJAX) {
return [
'Cache-Control' => 'public, max-age=600'
];
}
return $headers;
});
这里'public, max-age=600' → 浏览器可以缓存 600 秒,可以自己调整。
给前台静态资源(图片、css、js 等)设置缓存
修改网站的nginx配置文件,添加或修改以下location
location ~* \.(gif|jpg|jpeg|png|bmp|webp|svg|ico|avif)$
{
expires 30d;
add_header Cache-Control "public, max-age=2592000, immutable";
}
location ~* \.(js|css)$ {
expires 30d;
add_header Cache-Control "public, max-age=2592000, immutable";
}
location ~* \.(woff|woff2|ttf|otf|eot)$ {
expires 30d;
add_header Cache-Control "public, max-age=2592000, immutable";
}
缓存30 天(2592000 秒)是网站前端静态资源缓存的常见做法,你也可以自己调整时间。
总结
通过以上两步优化,WordPress 网站可以显著提升返回页面速度和静态资源加载效率。再配合有链接预取功能的缓存插件和redis缓存,切换页面速度飞起,如wp rocket。如果你追求极致可以了解Nginx microcache缓存在服务器,意味着首次请求也能加速,不依赖本地缓存。
如果做完以上步骤网站出现异常,可能你的主题必须保持no-cache才能正常运行。