0.背景
本人的博客服务器在香港,由于特殊原因,域名备案流程极为繁琐,目前不考虑对域名进行备案。不备案是无法使用境内的CDN或对象存储服务的。前期为了给博客提速,使用了Cloudflare的CDN,无法对境内提速,效果不明显。并且博客所在服务器性能低下,而WordPress的页面都是靠php实时吐出来的,如果刷新多了访问多了就会:
综上原因,开始对博客进行静态化+动静分离处理,并且对静态资源进行CDN加速。
1.静态化
- 前期准备
首先,需要在“设置-固定链接”中更改固定链接,否则无法静态化,注意不能使用“朴素”。以下是我的配置:

完成之后需要设置伪静态,否则访问文章页面会报404。进入到“宝塔面板-网站-设置-伪静态”,添加规则如下(nginx):

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

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

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等文件是否在已备案域名下,如图:

启用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 等类似的域名加载静态资源。

