静态化+动静分离为WordPress 提速

0.背景

本人的博客服务器在香港,由于特殊原因,域名备案流程极为繁琐,目前不考虑对域名进行备案。不备案是无法使用境内的CDN或对象存储服务的。前期为了给博客提速,使用了Cloudflare的CDN,无法对境内提速,效果不明显。并且博客所在服务器性能低下,而WordPress的页面都是靠php实时吐出来的,如果刷新多了访问多了就会:

综上原因,开始对博客进行静态化+动静分离处理,并且对静态资源进行CDN加速。

1.静态化

  • 前期准备
    首先,需要在“设置-固定链接”中更改固定链接,否则无法静态化,注意不能使用“朴素”。以下是我的配置:
    静态化+动静分离为WordPress 提速-图片1
    完成之后需要设置伪静态,否则访问文章页面会报404。进入到“宝塔面板-网站-设置-伪静态”,添加规则如下(nginx):

静态化+动静分离为WordPress 提速-图片1

location /
{
     try_files $uri $uri/ /index.php?$args;
}

rewrite /wp-admin$ $scheme://$host$uri/ permanent;
  • 插件配置
    这里使用的是WP Super Cache插件,当又访客访问页面时,会自动将页面以html形式缓存到服务器上,当下次有访客访问该页面时,直接访问缓存的静态页面,从而减小服务器的压力并提升速度。
    在插件市场直接下载启用WP Super Cache,启用缓存功能即可。

静态化+动静分离为WordPress 提速-图片2

  • 结果检验
    以访客身份访问,f12观察网页源码,如果最后几行有下图提示,则代表静态化配置已成功:

静态化+动静分离为WordPress 提速-图片3

2.动静分离

一个网站的资源可分为动态与静态两类,静态资源包括媒体、样式表、js脚本等,不需要程序处理,动态资源则需要程序处理,包括php等。对于在境外的服务器,通过一个已备案的域名访问静态资源,并进行CDN加速,可大大提升境内访问网站的速度。这里使用的是又拍云CDN。

  • 前期准备
    需要一个已备案的域名,这里是找朋友借的。在服务商添加解析记录,解析到博客所在服务器上。
  • 访问配置
    在宝塔面板中新建一个纯静态站点,域名为已备案的二级域名。为该站点申请ssl证书,启用强制https,然后在“设置-配置文件”中修改其配置文件,修改时要注意将其根目录设置为博客根目录,以下是我的配置,ssl信息、根目录信息、日志信息等请填写自己的信息:
server
{
listen 80;
listen 443 ssl http2;
server_name tigerxlystatic.togotoo.top;
index index.php index.html index.htm default.php default.htm default.html;
root /www/wwwroot/www.tigerxly.com;

#SSL-START SSL相关配置
#填写自己的ssl与https配置
#SSL-END

#ERROR-PAGE-START  错误页配置,可以注释、删除或修改
#error_page 404 /404.html;
#error_page 502 /502.html;
#ERROR-PAGE-END

#PHP-INFO-START  PHP引用配置,可以注释或修改
include enable-php-00.conf;
#PHP-INFO-END

#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
include /www/server/panel/vhost/rewrite/tigerxlystatic.togotoo.top.conf;
#REWRITE-END

#禁止访问的文件或目录
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md|\.php)
{
    return 404;
}

#一键申请SSL证书验证目录相关设置
location ~ \.well-known{
    allow all;
}

location ~* .*\.(gif|jpg|jpeg|png|bmp)?$ {
    set $width '';
    set $height '';
    set $width $arg_width;
    set $height $arg_height;
    if ( $width != '' ) {
        add_header Thumbnail "By Nginx";
    }
    if ( $height = '' ) {
        set $height '-';
    }
    if ( $width = '' ) {
        set $width '-';
        set $height '-';
    }
    image_filter resize $width $height;
    image_filter_buffer 2M;
    image_filter_jpeg_quality 80;
    image_filter_transparency on;
    expires max;
    access_log off;
}

location ~ .*\.(eot|otf|ttf|woff|woff2)?$ {
    add_header Access-Control-Allow-Origin *;
    expires max;
    access_log off;
}

location ~ .*\.(js|css)?$ {
    expires      12h;
    access_log   off;
}

location = /robots.txt {
    deny all;
}

access_log  /www/wwwlogs/tigerxlystatic.togotoo.top.log;
error_log  /www/wwwlogs/tigerxlystatic.togotoo.top.error.log;
}

静态资源域名重写
在博客“仪表盘-外观-主题编辑器”中修改functions.php,在?>前添加如下代码,注意相关域名修改为自己的:

function StaticCDN(){
function Rewrite_URI($html){
    $pattern ='/https:\/\/(blog\.|)tigerxly\.com\/wp-([^"\']*?)\.(jpg|js|css|gif|png|jpeg|woff|mp3)/i';
    $replacement = 'https://tigerxlystatic.togotoo.top/wp-$2.$3';
$html = preg_replace($pattern, $replacement,$html);
return $html;
}
if(!is_admin()){
    ob_start("Rewrite_URI");
}
}
add_action('init', 'StaticCDN');
  • 检查动静分离效果
    访问自己的博客,f12观察js等文件是否在已备案域名下,如图:

静态化+动静分离为WordPress 提速-图片4

启用CDN加速

这里使用的是又拍云,理论上讲是收费的,但是新注册用户会有代金券,加入又拍云联盟后每个月有15G免费流量,对于个人小站来说是够用的。

创建cdn服务,填写朋友给的二级备案域名与博客服务器所在ip。创建完成后会返回一个CNAME地址,将二级备案域名改为CNAME解析,解析到该地址上即可。由于是朋友操作,此处不截图了。需要注意的是,要在又拍云https配置中添加前期申请到的证书,否则可能会无法访问。

至此,静态分离加速理论上已经完成了,可以清空浏览器缓存,体验一下速度的变化。加入又拍云联盟需要在博客页脚加入又拍云logo。

利用多域名加快网页加载速度

利用浏览器的并发请求资源的功能,实现更快速加载。

拿 Chrome 浏览器为例来分析一下, Chrome浏览器的最大并发HTTP连接数为6,也就是说,如果同域名情况下,浏览器可以同时处理6个请求,而其它的请求只能排队,如果前面的请求加载阻塞,会影响后面的请求加载。

上面的示例中,站长帮的首页总共有 35 个请求,如果在带宽足够的情况下,也无法同时加载完毕。如果将这些请求分成多个域名,理论上浏览器处理的速度会更快(带宽足够的前提下)。

我们看看腾讯首页(www.qq.com),在浏览器的开发工具中可以发现,除了html页面之外,几乎所有的其它静态资源都不是www.qq.com这个域名,而是一些:mat1.gtimg.com、img1.gtimg.com、inews.gtimg.com、vm.gtimg.cn之类的域名。

再看看其它的大型网站基本上都是如此,大多采用img1.xxx.com、img2.xxx.com 、img3.xxx.com 等类似的域名加载静态资源。

 
老罗悟道
  • 版权声明 本文源自 FANTASY博客老罗悟道 整理 发表于 2026 年 1 月 29 日 22:10:57
  • 转载请务必保留本文链接:https://www.130510.com/2538.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证