使用七牛云存储加速网站前端文件的教程

所属分类: 网站运营 / 网站优化 阅读数: 88
收藏 0 赞 0 分享

CDN的全称是Content Delivery Network,即内容分发网络。对于它的好处我想大家都知道,但一直以来都只有大公司才用得起。但如今已经有了一些面对中小企业的CDN服务,甚至是免费的。如百度旗下的加速乐(http://jiasule.baidu.com/),安全宝(http://www.anquanbao.com/),而且安全宝还和DNSPod进行了无缝对接,很有吸引力。还有阿里云(http://www.aliyun.com/)开放存储服务 OSS、内容分发网络 CDN。这些都不错,对于个人站长来说质量和价格都能接受。但这些都有一些限制,有些需要备案,有些对个人开发者不是十分友好。
其实对于个人站点来说,只要能加速网站上的静态文件,比如图片、js文件、css文件,网站的访问速度就会大大的提升。像我的网站空间租用的是香港的服务器,ping值基本在45左右,南北互联延迟不是问题,瓶颈在于网页的加载速度(香港的空间一直都是小水管,带宽小)。基于这个需求,七牛云存储(http://www.qiniu.com/)是个不错的选择。每个月有免费的配额,操作又比较简单。它的直接竞争对手又拍云(https://www.upyun.com/index.html)也是个不错的选择。两者都是提供云存储、云处理、云分发的服务。由于七牛云存储后台操作简捷、直接,每个月又有免费的配额,所以个人推荐使用七牛云存储。

使用步骤
说了那么多现在直接进入主题,仅需三部轻松提升博客访问速度。
第一步:注册七牛云(https://portal.qiniu.com/signup?code=gmseew5nwy)
第二步:七牛云后台设置
首先需要建立一个Bucket(空间)。使用镜像加速需要设置为公开空间。
创建一个公开空间
然后空间需要绑定一个七牛云提供的二级域名(可自由设置),如果你的域名已经备案可以使用自己的域名,不过需要一段时间审核才能生效。
2016711103629115.jpg (560×312)

然后空间需要绑定一个七牛云提供的二级域名(可自由设置),如果你的域名已经备案可以使用自己的域名,不过需要一段时间审核才能生效。
2016711103655873.jpg (703×436)

最后开启镜像存储功能。
2016711103821276.jpg (687×415)

这里有几点需要注意:
1、如果你的wordpress站点不是建在根目录下面需要带上相应的路径。
2、为了防止网站因为开启镜像存储功能而被降权,开启镜像加速功能时七牛云会自动上传robots.txt到空间下面,不要不小心把它删了就行。
3、镜像存储和传统的CDN有些不同,镜像存储是存储(和普通的存储没什么不同,镜像功能只是存储的一个特性),不是缓存,故此镜像存储对每个资源来说只回源一次,后续访问的时候就不再回源了。所以在源站的url内容会经常发生变化时,并不适合用镜像存储(少量变化是可以接受的,你可以主动删除镜像存储里面的文件,从而达到强制刷新的目的)。
第三步:wordpress后台设置
这里需要借助一个插件WP Super Cache,这个插件几乎是必备插件(缓存插件,能极大提升页面加载速度),如果还没安装的话,不要犹豫马上安装。
点击设置界面的CDN选项卡:
2016711103845506.jpg (837×373)

在Off-site URL处填上七牛云提供的那个二级域名就行了。域名后面不用带上“/”。其它设置默认即可,然后保存。
至此所有设置都已经完成,这时你再访问你的站点会发现图片、js、css的链接都已经变了。
2016711103902795.jpg (533×130)

加速后可以很清楚的感觉到速度有提升,但到底提升了多少呢?下面以一张图片的加载速度做对比,可以更直观的感受到加速的效果
加速前:
2016711103919233.jpg (874×578)

加速后:
2016711103936487.jpg (838×571)

可见使用了七牛云存储的镜像加速功能后网站的访问速度有了质的飞跃。而且设置完成后无需任何后续操作,发文章就像以前一样在后台编辑好直接发布就行了。而当你不再需要这个功能时,直接在WP Super Cache插件中关闭CDN功能就行了,不会有任何的后遗症。


使用小结:
镜像就和平常照镜子一样,自己什么样镜子里的人就是什么样。七牛云空间里面存储的文件和自己站点里面的文件一模一样,不但加速了静态资源的访问,还做了次备份,可谓是一举两得。
在设置wordpress插件WP Super Cache的Off-site URL选项时有一行提示:“The new URL to be used in place of http://iyaozhen.com/yz_wp for rewriting.”意思就是插件将会把静态文件链接中的“http://iyaozhen.com/yz_wp”替换成“http://iyaozhen.qiniudn.com”。如“http://iyaozhen.com/yz_wp/wp-content/uploads/2013/09/01.jpg”替换成“http://iyaozhen.qiniudn.com/wp-content/uploads/2013/09/01.jpg”。当第一次加载这个文件时会进行同步(回源),“http://iyaozhen.qiniudn.com/”表示自己没有这个文件,七牛云服务器会认为这是一个新的文件,然后将图片(http://107.170.241.195/wp-content/uploads/2013/09/01.jpg)下载到自己的服务器。这样就完成了同步,可以看出同步需要双方都进行了正确的配置,所以进行第二步和第三步的配置时一定不要出错。由于第一次访问的时候需要回源,因此访问速度有点慢。主动同步数据可以提升第一次的数据访问速度。但主动同步数据比较麻烦,一般不去做。当然,如果是做别的应用开发,则就另当别论了。还有就是七牛云没有采用目录存储结构,而是采用了文件前缀,上传文件时候需要特别注意。
2016711103954407.jpg (480×276)

七牛云还有图片自动裁剪、自动添加水印、防盗链等功能。操作都很便捷,有需要的可以去设置一下。

PS:七牛云存储图片流量优化方案
我们都知道不同的图片格式在同等图片质量的情况下,文件的大小差异很大。比如在同等图片质量的情况下,bmp格式比png要大得多,而png可能比jpg又大得多,而jpg又可能比google最新推出的webp格式大得多。
在互联网时代,无论是移动端还是web端都追求一个极致的客户体验,因此在同等图片质量的情况下,拥有较小的文件大小的图片格式才是最好的格式。
七牛云存储支持webp的格式。你可以指定imageView2指令的format参数为webp来获取一个图片转换为webp格式后的结果。我们任意取一张图片来做演示。
2016711104022526.png (837×149)

上面获取资源的大小,可以使用命令curl -I <资源链接>来获取资源头部信息,然后查看Content-Length的值。
虽然这种webp格式拥有如此的魅力,但是由于不是所有的浏览器都支持,另外iOS平台默认也不支持这种格式,所以看上去没有办法在所有的平台推广。但是本着最大优化的原则,我们还是可以采用一些措施来极大地降低图片的流量。
我们把图片的访问分为移动平台和web平台。
对于移动平台,Android是默认支持的,iOS的话,如果是App,可以通过这个项目(https://github.com/seanooi/iOS-WebP)来集成webp图片解码功能。
对于移动端,目前只有chrome是支持webp格式的,chrome在访问图片的时候会默认给Accept头部添加image/webp值,如下图所示:
2016711104039802.png (800×32)

所以业务服务器端可以根据这种头部来判断终端浏览器是否支持webp,如果支持的话,返回webp格式的图片链接,如果不支持那么返回jpg格式的图片。这种在动态页面里面是很容易实现的。首先利用imageView2和imageMogr2支持webp的特点来将获取不同图片格式的指令定义为不同的样式,然后在MVC的结构里面,Controller可以去判断Accept头部里面是否有image/web,如果有则返回目标格式为webp的图片样式,否则返回目标格式为jpeg的图片格式。
上面的方案让webp覆盖了Android和iOS的移动设备和以chrome为内核的所有浏览器。另外对于实在无法支持的浏览器,采用jpeg的格式也会大大减少用户的流量。

更多精彩内容其他人还在看

网站优化必知:搜索引擎都重视原创的三大理由

作为一个优化人员应该知道原创是搜索引擎最重视的,想要做好网站,原创是必不可少的,那么,搜素引擎重视原创的理由是什么呢?
收藏 0 赞 0 分享

seo优化 获得高质量反向链接的方法

作为一名优化人员,我们都知道优化的时候是内容为王,外链为皇,说明外链对于优化来说也是非常重要的,那我们怎样才能获得高质量的反向链接呢?小编整理了几个获得高质量反向链接的方法,一起来看一下吧
收藏 0 赞 0 分享

新站必须要注意的一些关键点 才能稳定长久

在前期选取关键词时,尽量选用指数较小的关键词进行部署,由小词换大词,这样让网站有一个过渡期,就会可以很好的使网站稳定提升。下面为大家介绍新站必须要注意的一些关键点,来看看吧
收藏 0 赞 0 分享

如何做好网站运营呢?

网站不能主导市场,如果你实体店做的不咋地,网站就有可能一样带不来多少业务,尤其当市场上只需要一家的时候,有没有网站都很难改变这个趋势,那么如何做好网站运营呢?下面我们来看看吧
收藏 0 赞 0 分享

SEO常用到好用的工具有哪些?

做网站优化的一个瓶颈是SEO的自动化。到目前为止,绝大部分网站优化工作还得是人工去做。一些SEO工具可以辅助,但还没办法取代人工操作
收藏 0 赞 0 分享

大公司和小公司的产品推广方式有什么区别

在百度这样的大平台,获取流量和用户相对容易很多。我记得一个webapp的推广位,每天就能带来8K-12K的新增激活,像这样的位置至少有3-4个,虽然不同位置的量级大小不同,但每天2-3W的新增激活是很容易做到的,而且这只是我遇到的情况。
收藏 0 赞 0 分享

SEO优化的思维有哪些惯性陷井?

往往我们都会习惯性的分析网站的流量、查看网站的排名、网站的历史操作、现任的网站问题等等一系列状况,这对于大部份SEO来说这是习惯性的操作,但是这种习惯往往会潜伏着一个比较危险的信号,这个信号是隐藏,详情我们来看看吧
收藏 0 赞 0 分享

网站建设有哪些比较好的代码优化?

众所周知,现如今从搜索引擎的角度出发,我们都提倡使用div+css来布局网站,以此来更好的贴合搜索引擎的抓取习惯,但现在有一部分站长在网站建设中依然使用table来布局页面,下面小编就为大家介绍网站建设的代码优化,来看看吧
收藏 0 赞 0 分享

浅谈网站排名和文章的逻辑关系

对于搜索引擎的算,多数朋友都不会陌生,就像百度经历了链接投票算法、点击算法、到如今内容原创保护、和打击作弊等等各种算法,下面为大家浅谈网站排名和文章的逻辑关系,来看看吧
收藏 0 赞 0 分享

如何将优化做好?7天快速排名的基础SEO优化

如果网站的刚开始排名就不好那就要从自身的小细节做起了,所以大家一定要把基础优化做好,如何把一个行业地区词(郑州律师事务所)优化到前20名的,今天说的就是关于快速排名的基础优化的东西
收藏 0 赞 0 分享
查看更多