开发者社区> 问答> 正文

【云服务器分享】如何节省网站流量

                                                                       本文章摘自专家博客
现在做网站,最贵的成本是什么?当然是网络流量。 CPU、内存和磁盘都是白菜价了,但是网络流量的价格一直高高在上。 1Mbps带宽,从单线的几十块钱到 BGP多线的几百块,永远是站长心中的痛。特别是流量的波动很大,可能平时用的不多,搞个活动,流量是平时的几倍甚至几十倍,虽然云计算技术可以及时的调整带宽,但是费用也是不可估量的。所以,我们一定要 ...省 ...省 ...省带宽啊!

第一招:开启http 压缩
目前主流的 web服务器都已经支持 gzip压缩,可以对 html、 css、 javascript等文本内容进行压缩。一般情况下,开启 gzip压缩之后能节省 60%以上的流量,具体的压缩率,我们可以通过站长之家提供的工具来识别。

第二招:在浏览器端生成页面
由于 HTML标准本身的问题,一个 web页面包含了非常多的用户不可见的标签,这些标签的传输占据了大量的带宽。通过使用 JavaScript/AJAX技术,把用户可见的内容传输过来,在客户端的浏览器上实时生成页面,不单可以加快页面下载速度,还可以有效的减轻服务器的压力。一般的页面可以节省 1/3以上的流量,对于表格类等重排版的页面,流量节省可以高达 80%以上。

第三招:优化JavaScript 和CSS 代码
现在的网页,都是包含了不少的 JS文件和 CSS文件。不管是手写的还是工具生成的 JS和 CSS文件,里面的内容包含了大量的空行,空格,注释信息,长的变量名称等,可以通过工具进行优化。
JS文件我们可以使用 JSmin之类的工具进行优化,原始的 JS文件大小是 2463字节,经过压缩之后变为 1115字节,经过 http的 gzip压缩,最终变为了 640字节,整个 JS文件变为了原来的 26%。
使用 CSS在线压缩工具,原始的 CSS文件大小是 2289字节,经过压缩之后变为 1753字节,再经过 http的 gzip压缩,最终变为了 612字节,整个 CSS文件大小变为了原来的 27%。
虽然我们的目标是想尽办法榨干每一个多余的字节,但是 JS文件和 CSS可能会要对其进行修改,因此自己需要控制好压缩率,不要为了流量而大大增加了修改的成本。

第四招:图片的优化
图片应该是网站的头号通缉犯了,网站使用的图片不但多,而且越来越大。我们可以来看看煎蛋网首页,共有图片 41张,总计 1311KB,占了整个页面大小的 90%。图片优化得好,不但可以提高页面的加载速度,提升网站的用户体验,而且还可以节省网站的带宽。通过下图我们可以看出,在不影响图片质量下,不同文件格式不同压缩比下面,图片文件差异还是很大的,最大和最小的图片相差 6倍,如图:
                                                                  [attachment=29369]
我们可以通过绘图工具,将图片保存为自己需要的格式,再利用 Smush.it之类的工具对图片进行更深入的优化。同时在能使用缩略图的地方尽量使用缩略图,而不是借用浏览器的缩放功能。
对图片进行延迟加载,只有当图片滚动到可视区域时候,才动态的从后台获取图片。由于不需要一次性把全部图片取到位,因此不单网页加载速度大大提高,还极大的提升了用户的体验。目前已经很多的 JS库支持了,常见的如 JQuery。

第五招:巧借外部免费资源
目前云计算技术兴起,很多网站提供了一定额度的免费流量,利用好这些免费额度,能够给你网站减少不少成本。目前阿里云的 OSS提供了 10G的免费流量,换算成 300KB的图片,可以被浏览 3.5万次。如果同时借用多个免费的服务,就可以节省不小的成本。

第六招:对移动设备进行优化
目前智能手机越来越普及,使用移动上网的份额在不断的扩大,而目前的移动终端的显示屏大部分还不能跟 PC终端相比,因此如果网页提供的可视区域大于移动终端的显示区域,要么就是不可见,要么就是被缩放了。
目前的移动设备,大部分还是使用 2G和 3G的网络,下载速度是非常有限的,所以我们对移动终端的优化不但可以减小网站的网络使用带宽,还可以有效的增强用户体验。虽然目前的移动终端的浏览器的功能已经非常强大,但是受限于设备的计算能力和屏幕大小,因此网页尽量不要使用大幅图片,不要使用庞大的 JS库等。

第七招:赶上HTML5 潮流
HTML5来啦!目前各大浏览器厂商已经相继支持 HTML5, IE6的市场份额已经不足 8%,就算国内市场,也不足 20%了。你可能没有注意到一个隐藏的数据流: cookie,这个数据量不大,但是每次访问 web页面,都是需要来回各传送一次的。很多网站为了方便用户输入,增强用户体验,把用户的输入进行自动保存,每次保存都需要提交并刷新页面。网页应用的某些数据是可以静态缓存的,这样没必要让用户每次刷新的时候重新下载一遍。使用 HTML5的本地存储功能,把这些可以存放在本地的数据在浏览器端缓存起来,减少每次交互的数据量,对网站的带宽使用也会产生很大的影响的。

技术可以驱动成本的降低,但是技术的改造不是一朝一夕可以完成的。当前的最有效的降低网络带宽费用的方式,就是使用动态的带宽,可以根据自己的业务需要,按天甚至按小时对实际使用的网络流量进行买单。目前像阿里云等很多云计算公司都提供了这种动态带宽变更,让站长的带宽费用更加的合理。

云服务器其他相关了解:     
     到底什么是“云”服务器?与传统VPS相比有什么特点?...
     经常出现服务器资源不够用,网页打开缓慢,怎么办?...
     是什么影响了您的网站速度,同时影响了您的网站流量...
     阿里云弹性计算帮您节省成本,让您更可靠,更放心!...


现在马上参加分享,还可以抽奖哦! 点此参加

展开
收起
dreamdoo 2012-10-15 10:36:09 83021 0
13 条回答
写回答
取消 提交回答
  • Re【云服务器分享】如何节省网站流量
    引用第2楼ap6214f2r于2012-10-18 16:36发表的  :
    关于cookie,可以借鉴下GOOGLE、新浪、百度和淘宝的做法,让静态元素在另一个域下储存,杜绝COOKIE浪费流量


    不太明白啊
    2013-03-02 00:11:02
    赞同 展开评论 打赏
  • 写得不错。
    2013-03-01 22:17:26
    赞同 展开评论 打赏
  • Re【云服务器分享】如何节省网站流量
    我上个月超流量了,来看看,云主机安装还不会,弄个试用看下。
    2013-03-01 19:13:03
    赞同 展开评论 打赏
  • Re【云服务器分享】如何节省网站流量
    一天IP不到一千。。。要这么做吗?
    2013-01-22 09:34:30
    赞同 展开评论 打赏
  • 写得好呀.
    2013-01-21 21:10:34
    赞同 展开评论 打赏
  • Re【云服务器分享】如何节省网站流量
    帖子真给力。
    2013-01-21 17:53:24
    赞同 展开评论 打赏
  • 内容很不错的 我的网站带宽太小,流量还好不大,不然就头疼了
    2013-01-06 11:25:41
    赞同 展开评论 打赏
  • 回6楼g63336180的帖子
    你的域名怎么给注销了
    2013-01-05 13:27:47
    赞同 展开评论 打赏
  • 专业网站系统开发
    Re【云服务器分享】如何节省网站流量
    这个讲的很不错

    -------------------------

    回7楼wsg18356的帖子
    备案中,网站还没上线,不是被注销了,你是做什么站的?
    2013-01-05 09:01:20
    赞同 展开评论 打赏
  • web开发,运维,微信公众号开发,app混合开发,H5制作,http://dutuwang.net
    Re【云服务器分享】如何节省网站流量
    学习了
    2012-11-10 22:16:30
    赞同 展开评论 打赏
  • 引用第2楼ap6214f2r于2012-10-18 16:36发表的  :
    关于cookie,可以借鉴下GOOGLE、新浪、百度和淘宝的做法,让静态元素在另一个域下储存,杜绝COOKIE浪费流量

    非常正确,静态资源独立子域名,不单可以减少传输的流量,还可以加快客户端网页的加载速度。
    2012-10-20 08:24:11
    赞同 展开评论 打赏
  • 关于cookie,可以借鉴下GOOGLE、新浪、百度和淘宝的做法,让静态元素在另一个域下储存,杜绝COOKIE浪费流量

    -------------------------

    有机会我再补充点

    2012-10-18 16:36:26
    赞同 展开评论 打赏
  • 给力阿里云啊
    2012-10-18 15:24:45
    赞同 展开评论 打赏
滑动查看更多
问答排行榜
最热
最新

相关电子书

更多
如何运维千台以上游戏云服务器 立即下载
网站/服务器取证 实践与挑战 立即下载
ECS计算与存储分离架构实践 立即下载