WP提升页面切换速度(bfcache)

2026年3月7日 601

折腾

前言

在使用 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 秒，可以自己调整。

如果你是PIX主题，到这一步还不行，因为PIX主题前端请求使用的是POST请求，浏览器一般会忽略缓存，所以我们需要把需要缓存的请求从post改为get请求，改成get请求后就可以被缓存，甚至能够配合服务器redis缓存，配合插件Instant.page链接预取功能实现无缝切换。

代码位置：pix/inc/assets/js/app.js ：查找moment_cat_filter

从$.ajax({到})结束替换为以下代码

    $.ajax({
        type: "GET",
        url: Theme.ajaxurl,
        dataType: "json",
        cache: true,
        data: {
            action: "moment_cat_filter",
            cat: a
        },
        beforeSend: function() {
            $(".moment_list").html('<div class="loading_box"><div uk-spinner></div></div>')
        },
        success: function(t) {
            $(".moment_list .loading_box").remove();
            $("#t_pagination a").text("LOAD MORE");
            Theme.current_page = 1;
            Theme.posts = t.posts;
            Theme.max_page = t.max_page;
    
            var e = $(t.content);
    
            $(".moment_list").append(e.fadeIn(300));
    
            if (t.max_page < 2) {
                $("#t_pagination a").hide();
            } else {
                $("#t_pagination a").show();
            }
    
            lazyLoadInstance.update();
            $(".moment_cat_nav ul li a").removeClass("disabled");
        }
    })

继续查找blog_mod_loop位置，同样替换

$.ajax({
        type: "GET",
        url: Theme.ajaxurl,
        dataType: "json",
        cache: true,
        data: {
            action: "blog_mod_loop",
            cat: t
        },
        beforeSend: function() {
            $(".norpost_list").html('<div class="loading_box"><div uk-spinner></div></div>')
        },
        success: function(t) {
    
            $("#pagination a").text("LOAD MORE");
            Theme.current_page = 1;
            Theme.posts = t.posts;
            Theme.max_page = t.max_page;
    
            var e = $(t.content);
    
            $(".norpost_list").append(e.fadeIn(300));
    
            if (t.max_page < 2) {
                $("#pagination a").hide();
            } else {
                $("#pagination a").show();
            }
    
            if ($("#post_pager").length && $("#post_pager").length > 0) {
                if (t.max_page < 2) {
                    $("#post_pager").hide();
                } else {
                    $("#post_pager").show();
                    pager_prev.hide();
                    pager_next.show();
                    $(".pager_inner").attr("paged", "1");
                }
            }
    
            $(".loading_box").remove();
            lazyLoadInstance.update();
            $(".posts_cat_nav ul li a").removeClass("disabled");
        }
    })

这样就差不多了，文章列表和片刻列表就可以被缓存。

给前台静态资源（图片、css、js 等）设置缓存

我在通过lighthouse检测网站性能时发现，很多资源都没有设置缓存，lighthhouse也建议我添加缓存周期。

以下是解决办法

修改网站的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 秒）是网站前端静态资源缓存的常见做法，你也可以自己调整时间。