首页课件丨教程安装教程WordPress网站速度优化高级教程 – 动静分离(二)

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

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配置:

声明: 1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:ceo@zunw.cn,我们将第一时间处理! 2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持 3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明。

给TA赏金
共{{data.count}}人
人已赏金
安装教程

WordPressSitemapXML站点地图自定义教程

2022-11-9 23:00:27

安装教程

WordPress建站流程(四)速度优化

2022-11-9 23:00:29

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
MySSL 安全签章