#精品

WordPress网站速度优化高级教程 – 动静分离（二）

前文《WordPress网站速度优化高级教程 – 动静分离（一）》已经详细说明了如何将网站静态资源分离到其它域名进行加速，本文将重点介绍WordPress网站静态资源配置CDN的方法，以及相关CDN服务商的介绍。

WordPress 静态资源CDN配置方案

本文介绍的示例情况是：主站：www.zhanzhangb.com，已经将图片分离到img.zhanzhangb.com，将js与css文件分离到了static.zhanzhangb.com。接下来我们以腾讯云CDN和百度云加速来示范CDN配置方案。

配置腾讯云CDN静态资源加速

选择腾讯云CDN（内容分发网络）作为示例，是因为节点较多，而且价格不贵，从笔者使用的情况来看，稳定性很好。

（ 另外透露一下，教程的下一篇将介绍主站CDN加速的方案，同时已经请本站的程序猿文盲哥，制作一款腾讯云CDN全站加速的缓存自动刷新插件了，相信很快就能发布了。 ）

首先打开腾讯云CDN管理界面 – 添加域名

（注册和开通腾讯云CDN，领取每月10G免费流量包，请点这里）

如上图，我们可以同时添加 img.zhanzhangb.com 和 static.zhanzhangb.com 两个域名，因为这两个域名访问的资源类型是一样的，而且是同一个源站。其中回源协议建议选择协议跟随，意思是请求的是https协议，回源也用https。

往下拉，进行服务配置

按照上图所示，选择开启过滤参数和开启分片回源，过滤参数的功能是，当请求的文件URL后面带上参数，会被过滤掉，例如abc.js?ver=1.0过滤后，变成：abc.js，这样的好处是提高缓存的命中率，另外开启分片回源的作用是：有助于减少大文件分发时回源消耗，缩短响应时间。

在缓存配置中，将全部缓存的刷新时间改为最大值：365天。（当源站更新了程序、主题或插件时，再手动刷新一下CDN缓存即可。否则静态资源一般没什么变动的。）PS：这个缓存时间的值会影响浏览器缓存时间。

完成上面的步骤后，进入域名的详细配置，参照以下推荐设置，其余保持默认设置即可：

防盗链配置： referer白名单（ 包含空referer ），加上主网站域名或*.主域.com ，再加上下列搜索引擎的域名（不加的话，在搜索引擎快照中无法显示一些内容）：

• *.baidu.com
• *.bing.com
• *.qq.com
• *.sogou.com
• *.google.com
• *.so.com
• *.baiducontent.com
• *.sogoucdn.com
• *.bingj.com
• *.googleusercontent.com

IP访问限频配置：建议值60-100次/秒。通过对用户端 IP 在每一个节点每一秒钟访问次数进行限制，可进行高频 CC 攻击抵御、防恶意用户盗刷等。

如果网站开启了HTTPS的话，在高级配置中开启HTTPS。可自行上传证书，或申请腾讯云的免费证书。具体方法： https://cloud.tencent.com/document/product/228/41687

开启HTTPS之后，下列选项建议开启：

• HTTP2.0配置：开启
• OCSP装订配置：开启

设置完成后，将域名需要解析至腾讯云CDN分配的CNAME，解析生效后就能体验CDN的快感了。

配置百度云加速

百度云加速可谓是良心CDN了，现在免费版也支持HTTPS证书配置了，而且每天有10G免费流量，免费版的缺点是节点较少只有6-12个、没有移动线路、只提供3条自定义缓存规则（只是缓存静态资源的话，一条就够了）。

如果是英文、外贸网站，建议使用 Cloudflare ，配置方法与百度云加速类似，Cloudflare的全球加速效果是不错的，因为服务器在境外，不过国内站点还是用国内的CDN吧（PS，通过域名分线路解析，可以国内与国外CDN并存哦）。

百度云加速的接入方式推荐：CNAME接入方式，因为它的域名DNS服务器不太清楚是否可靠啊。

按提示接入完成后，添加相关域名，然后打开 特定页面规则 配置，如下图：

节点缓存有效期：免费版的只能选择遵循源站了，否则最大值只能选择1周。选择遵循源站后，可以在源服务器配置中，将静态资源文件的expires值改为365d，如下示例( nginx )：

    location ~ .*\\.(gif|jpg|jpeg|png|bmp|swf|js|css)$
    {
        expires      365d;
    }

如果是Apache服务器，如下（需开启mod_expires模组）：

 <IfModule expires_module>
     #打开缓存
     ExpiresActive on 

     #css文件缓存25920000/3600/24=300天
     ExpiresByType text/css A25920000

     #js文件缓存300天
     ExpiresByType application/x-javascript A25920000
     ExpiresByType application/javascript A25920000

     #html文件缓存300天
     ExpiresByType text/html A25920000
     
     #图片文件缓存300天
     ExpiresByType image/jpeg A25920000
     ExpiresByType image/gif A25920000
     ExpiresByType image/png A25920000
     ExpiresByType image/x-icon A25920000
 </IfModule>

常见的几大CDN服务商对比

WordPress网站开启CDN后，其它一些优化

预先连接CDN域：

开启浏览器预先连接CDN域加快响应速度，我们可以在WordPress的主题模板header.php文件的中加入以下代码：

<!--以下代码添加到</head>之前-->
<link href=\"https://static.zhanzhangb.com\" rel=\"preconnect\" />
<link href=\"https://img.zhanzhangb.com\" rel=\"preconnect\" />

或者在主题functions.php文件中，添加以下代码：

function preconnect_wp_head() {
    echo \'<link href=\"https://static.zhanzhangb.com\" rel=\"preconnect\" />\'
    echo \'<link href=\"https://img.zhanzhangb.com\" rel=\"preconnect\" />\';   
}
add_action(\'wp_head\', \'preconnect_wp_head\');

字体文件CDN加载：

如果主题自带字体或Font Awesome等，需要将相应CSS文件中的URL修改成对应的CDN域名URL，然后添加Access-Control-Allow-Origin *，否则会加载失败造成网页中的字体或icon无法显示。

腾讯云CDN添加Access-Control-Allow-Origin示例：

高级配置 -> HTTP Header配置：