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免费流量包,请点这里

腾讯云CDN - 添加域名
腾讯云CDN – 添加域名

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

往下拉,进行服务配置

腾讯云CDN - 缓存配置
腾讯云CDN – 缓存配置

按照上图所示,选择开启过滤参数和开启分片回源,过滤参数的功能是,当请求的文件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配置:

腾讯云CDN - HTTP Header配置
腾讯云CDN – HTTP Header配置

  • 微信或QQ扫一扫

留下评论