WordPress 静态资源CDN配置方案
本文介绍的示例情况是:主站:www.zhanzhangb.com,已经将图片分离到img.zhanzhangb.com,将js与css文件分离到了static.zhanzhangb.com。接下来我们以腾讯云CDN和百度云加速来示范CDN配置方案。
选择腾讯云CDN(内容分发网络)作为示例,是因为节点较多,而且价格不贵,从笔者使用的情况来看,稳定性很好。
( 另外透露一下,教程的下一篇将介绍主站CDN加速的方案,同时已经请本站的程序猿文盲哥,制作一款腾讯云CDN全站加速的缓存自动刷新插件了,相信很快就能发布了。 )
首先打开腾讯云CDN管理界面 – 添加域名
如上图,我们可以同时添加 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之后,下列选项建议开启:
- 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域:
开启浏览器预先连接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配置: