一张图片优化5k带来的带宽成本及其前端页面的优化方法

上周，我参加了公司的一门课程《网站性能优化》，讲师提出了一个问题：一张图片优化后减少5K，1年内可以大概省下多少宽带成本呢？非常好奇，仔细听完讲师分析，计算出来的数据让小伙伴们都惊呆了，仅仅5K，看起来真的没什么，一年内大概节省540元~1440元，这说明一个问题，用户数庞大的网站中，一点优化可能会带来巨大的带宽成本节省，表现出价值是特别高的，不容忽视小小优化带来的意义。相信很多同学也好奇这个数据是怎么计算的，公司的内部数据不好透露，给大家重新举个例子：

<!-- 
    公司内某个活动的最高峰半小时PV大概占总PV的3%，某天PV大概去到50万
    高峰期的半小时PV大概就是500000*0.03 = 15000，每秒PV是15000/1800 = 8.3(次每秒)（活动页面一般只访问一次，不考虑客户端缓存的情况）
    一张图片优化了5K，减少的宽带就是5*8.3 = 41.6kByte/s
    Byte是字节数，bit是位数，在计算机中每八位为一字节，也就是1Byte＝8bit
    那么5K产生的带宽就是41.6*8/1024 = 0.325Mbit/s
    不同地区的IDC服务效果不同，价钱差异也比较大，每月100M大概在1万~2.68万不等(09年市场带宽成本价算的，数字不一定精准，但也是有力的数据)
　  5K的图片所带来的0.325M带宽的成本，大概每月32.5元~87.1元
    那么，一年大概节省390元~1045元
-->

这个例子只是图片的优化，对于实际工作中，还有很多节省宽带成本的方法，如果要去算，那这个影响会放大10倍，100倍甚至是1000倍以上的数量级。网站性能的优化是一个一直不容忽视的话题，曾经写过《提高网站加载速度的3项黄金守则》一文，有兴趣可以了解下，平时多关心自己网站的性能优化，无形地为公司省钱，老板不止关心赚钱的事情，省钱的事情老板也会关注，如果你为老板省钱，说不定他一高兴就涨你工资了~

今天写这篇文章不止是想告诉大家小小优化带来的价值，另外给大家带来jpg图片的优化技巧，相信如何优化图片也是大家特别关心的问题。

实际运营的业务，很多图片存在被被忽视的优化，近期我在部门网站上下载了4张jpg广告图共300K+，这几张广告图上线前已被公司内部的优图工具压缩过，而我自己再通过软件进行二次压缩，保证图片质量良好下，优化后可以减少150K+，压缩率100%，那么，是什么软件压缩率这么好呢？

相信很多同学会猜想是我们非常熟悉的photoshop，ps的确是非常优秀的图像处理软件，基本上做web开发都会使用它，我们可以使用它压缩图片，效果也非常不错，以前我一直是使用它的存储为web格式的功能来压缩图片。今天介绍另一款图片处理软件，回顾博文《PNG的使用技巧》， 推荐过大家在移动端使用PNG8 alpha格式，该格式不仅文件小，节省流量，而且半透明效果良好，而导出它的软件正是传说中fireworks，没错，就是它，强大的图片压缩软件，为 网页设计而出生的作图软件， 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具，我们来看实例~

保证图片质量良好的情况下，使用firework与photosop分别对jpg图片的进行，对比它们压缩率

下图是上上周上线的一张广告图：

1.用photoshop CS6压缩处理图片

按存储为web所有格式(CTRL+ALT+SHIFT+S)，弹出如下界面，设置如下，优化后的图片大小为55.5K，减少了40.8K

2.用firework CS6压缩处理图片

 如下界面，在优化面板中选择：JPEG - 较高质量

使用导出功能来压缩图片，优化后的图片大小为49.2K，减少了47.1K


经过笔者多次尝试使用后，firework对图片(jpg、png、gif)压缩处理上比photoshop要优秀（例外：photoshop在png32的压缩处理稍微好点），关于png的压缩处理，可以参考《PNG的使用技巧》。强烈推荐大家使用firework，即便是Adobe公司在CC版本停止了firework，但相比其他图片处理软件，值得肯定的是，它的压缩图片功能(压缩图片的算法)是一流，未来我们还是可以继续使用。

话说回来，按照文章开头的计算，该广告图使用ps和fw压缩后可剩下多少钱多少流量呢，相信这也是一个惊人的数据，具体还跟页面的PV、广告的上下线时间等有关系。。

【原】提高网站加载速度的3项黄金守则

如何优化网页加载速度是每个前端开发工程师需要了解的，也是前端开发工程师需要具备的基本条件。

优化网站加载速度的原理主要是减少网站文件的大小，减少HTTP请求数。网站文件越小，浏览器加载页面会比较轻松，打开页面的速度也会提升；一个HTTP请求，对页面打开速度造成的延时大概是0.01秒，HTTP的请求数越多，网站打开的速度就会越慢。

那么如何减少网站文件的大小，减少HTTP请求数呢？笔者做前端(重构方向)有2年多了，这里分享3项优化网站加载速度的方法，希望能给有需要的同学以及刚接触前端的初学者带来帮助~

comm on！一起来优化你的网站~

1、优化图片

使用Css Sprites（适用于大流量的网站）

其原理是把网页中一些背景图片整合到一张图片文件中，再利用CSS的"background"的进行背景定位。Css Sprites 最大的好处是减少http请求数，减轻服务器的压力，但使用它是需要付出"降低开发效率，增大维护成本的代价"，对流量小的网站带来的好处并不明显，使用 它取决网站的流量。

图片合成的工具如：Photoshop，输出样式的工具如：LinrPStoolkit-5、腾讯鬼哥的Css Sprites 样式生成工具；这样做的好处是尽可能减少图片数，将HTTP请求减少到最低，减轻服务器的压力。

示例：合并5张小图


合并后的代码

[css] view plain copy
  1. .ico-1,.ico-2,.ico-3,.ico-4,.ico-5  
  2. {  
  3. display:inline-block;  
  4. background: url(img/ico.png) no-repeat;  
  5. overflow:hidden;  
  6. }  
  7. .ico-1{width:106px;height:104px;background-position:0 0;}  
  8. .ico-2{width:44px;height:104px;background-position:-107px 0;}  
  9. .ico-3{width:25px;height:104px;background-position:-152px 0;}  
  10. .ico-4{width:44px;height:52px;background-position:-178px 0;}  
  11. .ico-5{width:44px;height:51px;background-position:-178px -53px;}  

合并后的Css sprite图片

给图片减肥
保证图片不失真的前提，适当压缩是图片大小，不仅可以减少用户等待时间，降低公司带宽使用，节约成本。

下面的截图是去年公司的一张轮播广告图，每张图片大小都超过100K左右，在0.5M低带宽下，最大一张等待了7秒，仅仅4张轮播广告图就等了20秒，这种情况用户还会继续等待吗？


查了原因，了解这些图片从设计师给过来后，产品经理直接通过广告系统发布上线，并没有进行压缩图片，导致了用户在低网速情况下等待时间过久，无疑会流失很多用户。

如何压缩jpg图片呢？

这里以广告图为例，通常广告图的内容和色彩是比较丰富的jpg图片，jpg是有损压缩格式，压缩的时候主要注意保证图片清晰为前提，把图像上一些人眼不敏感的细节去掉，来达到减少图片大型的效果。使用最常见图片处理软件PS，存储为web所有格式(快捷键是alt+shift+ctrl+s)可压缩jpg图片。


把图片质量调整为中，品质在45~60之间，可一定幅度减少jpg图片的大小，大家可以试试看。


如何压缩png图片呢？

一淘UX的一丝冰凉，有篇png的秘密，写得非常好，对png图片解释的非常详细，文章最后有png的各种压缩工具，这边我搬过来了，如下：

推荐压缩工具 PngOptimizer （http://psydk.org/PngOptimizer)
推荐压缩工具 Pngout (http://advsys.net/ken/utils.htm)
推荐压缩工具 雅虎: Smush.it（http://www.smushit.com/ysmush.it/）

2.优化HTML页面

删除不必要的空白字符和注释

删除对执行结果无影响的空格、换行、tab和注释

减少DOM元素数量

HTML页面中节点数目越多需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢，减少不必要的标签嵌套可提升页面性能。

使用连接式link缓存CSS和JS文件

使用外部连接式link，加载CSS和JS文件，浏览器第一次访问页面后缓存他们，以后调用他们拥有更快的页面加载速度。
内置在HTML页面中的CSS和JS，会在每次请求中随HTML文档重新下载，这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的CSS和JS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。

[css] view plain copy
  1. <link href="global.css?v=20130219" rel="stylesheet" type="text/css" />  


大型网站主页内置CSS和JS

比较适合使用内置代码的例外就是大型网站的主页，主页在一次打开中拥有较少（可能只有一次）的浏览量，采用了减少HTTP请求的方法，把CSS写到HTML文件里，而不采用外部调用的方法，也可以防止css没有加载完毕出现页面乱的现象，内置CSS和JS对于终端用户来说会加快响应时间，用户体验好。 

[css] view plain copy
  1. <style type="text/css">  
  2. ......  
  3. </style>  
  4.   
  5. <script type="text/javascript">  
  6. ......  
  7. </script>  


减少css、js文件数目

CSS和JS文件可以合并的最好合并

[html] view plain copy
  1. 例如  
  2. <link rel="stylesheet" type="text/css" href="reset.css" />  
  3. <link rel="stylesheet" type="text/css" href="common.css" />  
  4. <link rel="stylesheet" type="text/css" href="index.css" />  
  5. <link rel="stylesheet" type="text/css" href="page.css" />  
  6. <script type="text/javascript" src="page.js"></script>  
  7. <script type="text/javascript" src="v4.js"></script>  


1.reset.css和common.css是公用的样式，可合并为global.css

2.index.css和page.css为私有的样式，可合并为index.css

3.page.js和v4.js为私有脚本，可以合并为index.js

合并后：

[html] view plain copy
  1. <link rel="stylesheet" type="text/css" href="global.css" />  
  2. <link rel="stylesheet" type="text/css" href="index.css" />  
  3. <script  type="text/javascript" src="index.js"></script>  


这样一来可以减少3个http请求

css放页头head标签中，js文件放页面底部

用户没有太多的耐心等待页面加载，我们可利用网页先展现给用户，后加载功能原则

1.优先加载css：

浏览器渲染HTML的顺序是从上到下，下载和渲染是同时进行的，在载入HTML元素之前，先加载css，可以避免HTML出现无样式状态，先将网页展现给用户

2.最后加载js：

如果js文件放到页面顶部，浏览器加载网页，加载js时，还没有加载HTML代码，网页显示为空白，脚本阻塞了HTML的加载，也可能会出现js捕捉不到操作的节点，就会报错

网址后加反斜杠

有些网址，比如"https://www.tenpay.com/v2/mapp"，当服务器收到这样一个地址请求的时候，它需要花费时间去确定这个地址 的文件类型。在网址后多加一个斜杠，让其变成"https://www.tenpay.com/v2/mapp/"，这样服务器就能一目了然地知道要访问 该目录下的index文件，从而节省了加载时间。

img、table、iframe标签标明高度和宽度

例如网页上添加图片时，标明它们的高度和宽度，也就是height和width参数。如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
下面是一个比较友好的图片代码：
<img width="120" height="40" src="logo.gif" alt="logo" />
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容，从而加载时间快了，浏览体验也更好了。

3、优化CSS文件

不要在ID或者class选择器前使用标签名
一般写法：span.ico-peun
更好写法：.ico-peun
尽量少使用层级关系，使用长命名
一般写法：.main .line span.txt{...}
更好写法：.main-line-txt{...}

为什么要这样写呢？浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。 比如.main .line .txt{...}，浏览器的查找顺序如下：先查找html中所有class='txt'的span元素，找到后，再查找其父辈元素中是否有 class="line"的元素，再判断.line的父元素中是否有class="main"元素，如果都存在则匹配上。 浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

长命名的写法有2个好处：一来可以减少代码量，二来可以提高选择器解析css代码的速度。

使用class代替层级关系
一般写法：.main ul li a{display:block;}
更好写法：.block{display:block;}

CSS代码简写

简写的好处是代码简练，提高开发速度，并减少多余的代码量

[css] view plain copy
  1. .test{  
  2.       margin-top: 10px;  
  3.       margin-right: 20px;  
  4.       margin-bottom: 10px;  
  5.       margin-left: 20px;  
  6. }  
  7. 简化为：  
  8. .test{margin: 10px 20px 10px 20px;}  


CSS代码一行式编码风格，去掉不需要的空白字符（空格、换行、tab缩进）

一行式的好处是有效减少css文件的行数和空白符，最终减少文件的大小

[css] view plain copy
  1. .test{  
  2.       width:50px;  
  3.       height:100px;  
  4.       color:#000000;  
  5. }  
  6. 简化为：  
  7. .test{width:50px;height:100px;color:#000000;}  


压缩css，最有效的减少文件大小(去除注释、空白字符)

如把css文件复制成为2份，把其中一份保留原稿，令一份压缩并添加min后缀，并把压缩这份用于线上使用


常见压缩工具：YUICompressor，淘宝封装的css和js压缩工具TBCompressor，站长工具等，都适合css和js文件的压缩，去掉不需要的空白字符（空格、换行、tab缩进）

posted @ 2016-05-11 16:38  AutismTune  阅读(912)  评论(0)  编辑  收藏  举报