使用阿里云CDN教程,让你的WordPress网站飞起来

研究表明,用户最满意的打开网页时间,是在 2 秒以下。用户能够忍受的最长等待时间在 6~8 秒之间。就是说,8 秒是一个临界值,如果你的网站打开速度在 8 秒以上,那么你将失去大部分用户。研究显示,如果等待 12 秒以后,网页还是没有载入,那么 99% 以上的用户会选择关闭网页。

Google 做过一个试验,10 条搜索结果的页面载入时间需要 0.4 秒,显示 30 条搜索结果的页面载入时间需要 0.9 秒,结果后者使得 Google 总的流量和收入减少了 20%。Google 地图上线的时候,首页大小有 100KB,后来下降到 70~80KB。结果,流量在第一个星期上升了 10%,接下来的 3 个星期又再上升了 25%。Amazon 的统计也显示了相近的结果,首页打开时间每增加 100 毫秒,网站销售量会减少 1%。

以上数据说明了一个非常重要的问题,如果你的网站速度如果超过 2s 以上,那么你的客户可能在流失和离你而去了。这一点对于电商网站尤其重要,打开速度慢,那么将造成转化率降低,损失将会大量增加。

网站的访问速度受到很多因素影响。服务器的带宽、服务器的 cpu、内存等硬件配置、网站的代码质量、css 和 js 文件是否合并成了一个请求、用户的访问地理位置、用户的线路、数据库语句是否高效等等。影响一个网站速度的因素非常多,需要针对每一项因素做优化。

随着云计算的普及,cdn 逐渐随着云计算的普及而普及。而且随着云计算技术的发展,很多大厂商开发了很多底层系统,将这些服务直接打包用来出售。例如 cdn 服务,随着这几年技术的发展,cdn 的价格已经越来越便宜。如果自己逐一去优化网站中每个性能瓶颈,那么将耗费大量的时间。cdn 服务将整套服务打包,将全站的访问速度整体提升一个量级,不再需要你再做耗时耗力的优化工作,能够节约大量时间去做推广。今天就来介绍下 WordPress 使用 阿里云 cdn 的教程。

手把手教你 WordPress 使用阿里云 CDN 教程 让你的网站飞起来

添加域名

进入域名管理,点击添加域名,如下图:

9b8fd0290c75431e1ae14c6ac49d62236891afab
  • 「加速域名」输入你要加速的域名,一般是你的二级域名:如:www.domain.com。
  • 「业务类型」选择「图片小文件」。
  • 「源站信息」选择「IP」,输入框输入自己源站的 IP 地址。
  • 「端口」,如果源站是 http 的,则选择 80 端口,如果源站是 https 的,需要选择 443 端口,否则会导致 cdn 不断的 301 重定向,导致网站无法访问。

添加完成后,界面提示如下:

94bf30c802a4832d1c6586575be7be997ac6a46d

配置 CNAME

b8c359d6015a950c81b99506a24e6a61bac4330c
  • 进入云解析控制台,选择对应的域名,添加一条 CNAME 记录。
2020-02-09-106

https 配置

如果源站是 https 的,还需要在 cdn 上进行 https 配置。

域名管理控制台,选择对应的域名,选择「HTTPS 配置」。

d5e88948058b5890774b30bdfb6ca9a7bc535067
  • 勾选「HTTPS 安全加速」,如果你的 https 证书是在阿里云购买的,在「证书类型」选项,选择「云盾」,系统会自动将证书导入。关于如何购买阿里云 SSL 证书,可以参考阿里云免费申请 SSL 证书。因为我是阿里云购买的,所以直接选择了云盾。
  • 「强制跳转」处,勾选 「HTTP -> HTTPS」。
  • 勾选「HTTP/2」,勾选「TLS 版本控制」-> 「TLSv 1.3」。

缓存配置

缓存配置分为目录和文件后缀名 2 种方式,权重分为 1~99 等级,99 最大,1 最小,权重大会优先缓存。如果控制台的缓存不配置,阿里云 cdn 默认缓存的时间是:(当前时间 - lastModified) * 0.1,取值范围为:10s~3600s 之间。

1a0e819ad0debfeff33938e35b56228984783da5

下图是我的站点配置方案,可以做参考:

621b89b7863791ec14deaa4b4b55908070a49eab

我配置了根目录 / 的 7 天过期时间,是因为我的网站所有结构都是 1 级目录结构(www.domain.com/ur1/),无法根据 url 目录详细区分,如果你的站点可以区分 url 目录结构,可以配置的更加详细。

动态内容无需缓存,所以我对 wp-admin 目录缓存时间设置为 0。

控制台配置的缓存时间并不是绝对时间,假设你的 js 缓存时间是 3 个月,但是你的站点访问量非常少,cdn 会提前将内容过期,直到下次重新访问,缓存才会重新生效。

配置 Cache-Control

Cache-Control 是什么?Cache-Control 通用消息头字段,被用在 http 请求和响应中,通过指定指令来实现缓存机制。阿里云的 cdn 也是通过这个字段来判断是否缓存的,如果你的服务器容器的 Cache-Control 为 no-cache,那么阿里云 cdn 是无法进行缓存的。这个字段可以通过 chrome 浏览器的 Network 查看,如下图:

45fb2b955f46e591badc546c82798f396a5e428e

配置 cache - control 有 2 种方法,阿里云 cdn 控制台配置 HTTP 头、源站配置 Cache-Control。

  • 第 1 种方法:阿里云 cdn 配置 HTTP 头,在阿里云 cdn 控制台进入「缓存配置」->「HTTP 头」添加参数:Cache-Control:public。
04612ec38eb4268741505738c544c98fa172d10a
  • 第 2 种方法:源站服务器添加 Cache-Control 配置,这里以 nginx 为例,打开 nginx 的 conf 配置文件,在 server 节点下添加如下代码:
add_header Cache-Control public;
a4d14bb716aeeb9fb5984b6c725438525ae823e7

关于阿里云 cdn 详细的解释可以参考配置缓存过期时间

性能优化

性能优化主要勾选阿里云 cdn 控制台的 3 个选项。

755b0e08f6ff18ff49b21b91627bc150ec48e5c9
  • 页面优化,主要是去除 HTML 页面页面冗余内容,如注释以及重复的空白符,节省带宽,加快访问速度。
  • 智能压缩,对静态文件类型进行 Gzip 压缩, 有效减少用户传输内容大小。
  • Brotli 压缩,Google 在 2015 年 9 月推出了无损压缩算法 Brotli。Brotli 通过变种的 LZ77 算法、Huffman 编码以及二阶文本建模等方式进行数据压缩,与其他压缩算法相比,它有着更高的压缩效率。开启后,查看 css、js 的 content-encoding 值为 br,就说明启用了 Brotli 压缩。
c8620985d75453ea6720f38f75f4be919a42b8f8

如何查看是否命中 CDN 缓存

首先在 dos 界面 ping 域名,查看返回信息,如果返回后缀为:w.kunlungr.com 的域名信息,说明 CNAME 的配置生效了。但是这并不能说明网站已经命中 cdn 缓存。

查看网站是否命中 cdn 缓存的方法。打开 Chrome 浏览器的 Network 选项卡,刷新网站,找到 Response Headers 的 x-cache 属性,如果为 HIT 则表明命中缓存,如果为 MISS 则表明未命中缓存。

0d3fe1c9b4beeab6f67eca68adbc4d65e0e341e0

刷新缓存

如果在源站更新了内容,想要立刻生效,可以使用「刷新预热」功能。

49b77818db1b07f70e84459131818d916c166c94

效果如何?

我们花了大量的时间和精力做了 cdn 的配置和优化,那么效果到底如何呢?有没有可以量化的数据来验证呢?下面是我的统计数据图。

未配置 cdn 前的统计时间,平均时间大约为 1500 ms。

39983590fbabd42a5522c709c789ff58fcf479ea

启用 cdn 后,时间降低为 130 ms 左右。

de32ddfa7cabef19610b226da9739c2d6259cdb9

访问时间直接提升了 10 倍以上,提升效果还是非常明显的。

本文由 8源码吧 作者:liaolong 发表,其版权均为 8源码吧 所有,文章内容系作者个人观点,不代表 8源码吧 对观点赞同或支持。如需转载,请注明文章来源。

发表评论