您当前的位置:首页 > 电脑百科 > 程序开发 > 开源程序 > WordPress

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

时间:2020-04-04 10:26:27  来源:  作者:

研究表明,用户最满意的打开网页时间,是在 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/ target=_blank class=infotextkey>WordPress 使用 阿里云 cdn 的教程。

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

添加域名

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

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

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

配置 CNAME

  • 进入域名管理,复制域名的 CNAME 值。

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

https 配置

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

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

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

缓存配置

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

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

我配置了根目录 / 的 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 查看,如下图:

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

  • 第 1 种方法:阿里云 cdn 配置 HTTP 头,在阿里云 cdn 控制台进入「缓存配置」->「HTTP 头」添加参数:Cache-Control:public。

  • 第 2 种方法:源站服务器添加 Cache-Control 配置,这里以 Nginx 为例,打开 nginx 的 conf 配置文件,在 server 节点下添加如下代码:

add_header Cache-Control public;

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

性能优化

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

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

如何查看是否命中 CDN 缓存

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

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

刷新缓存

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

效果如何?

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

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

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

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

查看更多:https://yq.aliyun.com/articles/744160?utm_content=g_1000104491

上云就看云栖号:更多云资讯,上云案例,最佳实践,产品入门,访问:https://yqh.aliyun.com/



Tags:WordPress CDN   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
研究表明,用户最满意的打开网页时间,是在 2 秒以下。用户能够忍受的最长等待时间在 6~8 秒之间。就是说,8 秒是一个临界值,如果你的网站打开速度在 8 秒以上,那么你将失去大部分用...【详细内容】
2020-04-04  Tags: WordPress CDN  点击:(95)  评论:(0)  加入收藏
▌简易百科推荐
说起 WordPress 优化加速来可以说是个经久不衰的话题了,包括明月自己都撰写发表了不少相关的文章。基本上到现在为止明月的 WordPress 优化方案已经固定成型了,那就是 WP Supe...【详细内容】
2021-11-02  明月登楼    Tags:WordPress   点击:(49)  评论:(0)  加入收藏
很多人在做了网站的搬家和网站的从新更换空间域名搬家之后,往往出现网站打不开的情况,这个问题其实并不难,但是很多新手站长因为不知道,导致在处理这类问题上花费了大量的时间。...【详细内容】
2021-08-17  企飞资源    Tags:WordPress   点击:(147)  评论:(0)  加入收藏
当访问者访问您的网站时,您只有几秒钟的时间来显示这个人正在寻找的信息,否则,他们只需点击浏览器的后退按钮,开始浏览器别的同类型的网站了。缓慢的WordPress网站会给您的访问...【详细内容】
2020-08-20      Tags:wordpress   点击:(112)  评论:(0)  加入收藏
WordPress 5.5如期而至,更新优化的主要三个领域:速度,搜索和安全。主要内容速度方面主要体现图片的加载优化上面,新版本采用了懒加载模式,在滚动到对应的位置,才会加载真实的图片...【详细内容】
2020-08-17      Tags:Wordpress5.5   点击:(97)  评论:(0)  加入收藏
【ALENG 自媒体】8月11日早间自媒体专稿,话说从2008年涉足独立博客至今,掐指一算,走独立博客这一行已经10多年了。10多年间,我的独立博客网站先后使用过早期的Z-blog博客系统,后...【详细内容】
2020-08-12      Tags:WordPress   点击:(114)  评论:(0)  加入收藏
安装好nginx、php、mysql之后,需要经过配置,才能使用起LNMP的环境。...【详细内容】
2020-08-06      Tags:WordPress   点击:(101)  评论:(0)  加入收藏
一台云服务器能做什么?上次介绍了薅腾讯云和阿里云两家厂商羊毛的方法和过程,那到手的云主机要干什么用呢?或者说,云主机有什么用?过了这么多年,"上云"这个说法好像并没有过时。简...【详细内容】
2020-08-04      Tags:WordPress   点击:(106)  评论:(0)  加入收藏
一般的大型网站系统,都依赖伪静态。如果服务器的伪静态没有配置好,访问部分链接就会出现 404 的情况。在 WordPress 则具体表现为后台“固定链接”选项设置失效。 下面就提供...【详细内容】
2020-07-04      Tags:WordPress   点击:(134)  评论:(0)  加入收藏
在本地的 Mac 电脑上配置开发环境安装 homeBrew安装 PHP 7 和 Composer安装 Valet配置 Valet安装 MySQL安装 WordPress在 Windows 电脑上配置开发环境安装 PHPstudy安装 Wor...【详细内容】
2020-06-20      Tags:WordPress   点击:(138)  评论:(0)  加入收藏
操作场景WordPress 是一款使用 PHP 语言开发的博客平台,您可使用通过 WordPress 搭建属于个人的博客平台。本文以 CentOS 7.6 操作系统的腾讯云云服务器为例,手动搭建 WordPre...【详细内容】
2020-04-27      Tags:WordPress   点击:(100)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条