WordPress网站速度优化高级教程 – 动静分离(二)
前文《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服务商对比
免费额度 | 加速节点 | 流量包价格 | HTTPS请求另计费 | |
阿里云 | 无 | 多 | 100G 20元 | 0.05元/万次 |
腾讯云 | 10G/月 | 多 | 100G 19元 | 无 |
百度智能云 | 无 | 多 | 100G 18元 | 无 |
百度云加速 | 10G/天 | 少 | 1T 180元 | 无 |
又拍云 | 15GB,需放置LOGO与链接 | 多 | 100G 20元 | 0.05元/万次 |
七牛 | 10G/月不支持HTTPS | 较多 | 100G 25元(https) | 0.19元/万次 |
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配置:
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
评论功能已经关闭!