WordPress提升页面切换速度

前言

在使用 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才能正常运行。

上一篇 Docker 学习笔记 - 使用 Docker 安装一个 Caddy + PHP + MySQL 的开发环境
下一篇 Redis:抵御CC攻击的坚固防线——详解其在流量限流中的核心作用
丙氨酸

丙氨酸管理员

与其等春来 不如追花去

本月创作热力图

文章目录