前台页面优化

据调查，网页大小在2013年平均增长了32%，平均达到了1.7M，单独的HTTP请求达到96个。这是令人震惊的数字，而且这只是个平均值，有一半的网站会大于这个值。网站也得了肥胖症，而我们这些开发者就是罪魁祸首。

一个超重的网站会对你产生如下影响：

1. 网站代码越多，用户下载的就越多，加载速度就会越慢。在这个地球上，并不是每个人都能享受20M的宽带，每一个开发者心里都很清楚，用户不愿意等。

2. 众所周知，移动互联网发展迅速，对于2G网络来说，加载1.7M的页面甚至需要一分钟时间。

3. 影响搜索引擎抓取速度将会对网站排名造成很大影响。

4. 对于开发者来说，代码量越大，就越不容易更新和维护。

我猜测今年页面平均代码量会减小，希望事实如我所愿。如今已经有很多人开始关注这个问题，并出现了很多优化的工具，而且这些技术都非常容易上手，不需要花太多时间，也不需要重新开发。

在本文中，我会给大家一些建议。前三个建议实际上不能给网页减肥，但它们仍能有效的加快网页加载速度。

1. 用GZIP格式压缩

gzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序。它是Jean-loupGailly和MarkAdler一起开发的。第一次公开发布版本是1992年10月31日发布的版本0.1，1993年2月发布了版本1.0。

我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了，效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载. 一般服务器中都安装有这个功能模块的。

根据W3C组织调查，大部分的网站都没有启用压缩功能。 

2. 支持浏览器缓存

如果浏览器支持缓存，我们就不用重复下载网页资源。最简单的设置缓存方法是在响应头中添加相应的内容，包括：Expires header，Last-Modified等。

你可以可以通过配置服务器来自动添加这些属性。比如你在Apache服务器中配置缓存所有的照片一个月:

 
 

  
  

   
   
<IfModule mod_expires.c>
ExpiresActive On
 
<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>
 
</IfModule>
  
  
  
  

   
   
   
   

    
    

     
     

     
     

    
    
   
   
   
   
  
  
 
 

3. 使用内容分发网络 (CDN)

CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。CDN有别于镜像，因为它比镜像更智能，或者可以做这样一个比 喻：CDN=更智能的镜像+缓存+流量导流。因而，CDN可以明显提高Internet网络中信息流动的效率。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题，提高用户访问网站的响应速度。 

为更好地理解CDN，让我们看一下CDN的工作流程。当用户访问已经加入CDN服务的网站时，首先通过DNS重定向技术确定最接近用户的最佳CDN节点，同时将用户的请求指向该节点。当用户的请求到达指定节点时，CDN的服务器（节点上的高速缓存）负责将用户请求的内容提供给用户。具体流程为: 用户在自己的浏览器中输入要访问的网站的域名，浏览器向本地DNS请求对该域名的解析，本地DNS将请求发到网站的主DNS，主DNS根据一系列的策略确定当时最适当的CDN节点，并将解析的结果（IP地址）发给用户，用户向给定的CDN节点请求相——应网站的内容。

以上三个方法可以有效地加快页面的访问速度，现在我们将对你的代码进行诊断，帮助我们给页面减肥。

4. 删除不需要的资源

当你不再需要一个组件的时候，你应该删掉它的CSS和JavaScript代码，如果这些代码都单独放在一个文件中，那删掉它们也不是难事，但如果已经没有用的代码和其它代码在一个文件中，那你肯定要费不少精力去删掉它们。这个时候你就需要使用第三方的工具来帮你一键解决，比如JSLint, Dust-Me Selectors, CSS Usage, unused-css.com 或是像grunt-uncss一样的构建工具。

5. 通用和最小化CSS

理想情况下，需要一个单独的CSS文件，让每个页面都调用这一个布局，当然，如果你想要支持老版本的IE，你就得多弄一个CSS文件。当你把它们构建到服务器上之前，你应该把代码间所有不必要的格式都删掉。

有很多预处理工具都可以帮你解决这件麻烦事，比如Sass, LESS 和Stylus。

有一些方法可以帮助你直接合并多个CSS文件，在Windows上：

 
 

  
  

   
   
copy file1.css+file2.css file.css
  
  
  
  

   
   
   
   

    
    

     
     

     
     

    
    
   
   
   
   
  
  
 
 

在 Mac或Linux上：

 
 

  
  

   
   
cat file1.css file2.css > file.css
  
  
  
  

   
   
   
   

    
    

     
     

     
     

    
    
   
   
   
   
  
  
 
 

 你可以把得到的CSS文件再经过在线的CSS压缩工具删除格式化，cssminifier.com, CSS Compressor & Minifier 和CSS Compressor都是很不错的工具。

最后，在head标签中加载所有的CSS，这样浏览器就知道你的页面样式不用多次重绘了。

6. 通用和最小化的JavaScript

平均每个页面加载了18个javascript文件，虽然把像jQuery这样的库文件单独分开非常实用，但是你自己的JavaScript代码应该保持通用和最小化。同样很多第三方的工具可以帮你解决这样事情，比如 YUI Compressor, Closure Compiler 和我最喜欢用的 The JavaScript CompressorRater。简化的JavaScript代码会加快网页的访问速度，减少HTTP请求次数。

最后，最好在HTML的body标签后放置JavaScript引用代码，这样能保证JavaScript代码不影响到其它内容的加载。

7. 使用正确的图片路径

加载错误的图片格式会对你的网页造成很大影响，一般来说选取图片我们应用遵循如下原则：

1.照片使用JPG格式。

2.其它所有的图片都使用PNG格式。

8. 调整大图的大小

目前智能机所拍出的照片越来越大，你不可能把原照片直接展示在页面中。普通的编辑器都会直接上传原图，这样会让页面的加载速度慢到另一个级别。在正常的照片处理中，一般都没有必要给用户高质量的图片展示。所以你需要一个自动调整图片大小的工具。

需要注意的是，图片的尺寸是不能超过容量的大小的，这样一来页面加载了全图，却无法展示出来。现在照片的尺寸基本上都超过电脑显示屏的尺寸了。

图片的大小在网页总大小中占很大的比重，图片减小50%会导致整体页面大小减少75%，所以你应该认真解决一下图片的加载。

9. 进一步压缩图片

仅仅调优图片的大小是不够的，你应该通过第三方工具对图片进行分析，进一步压缩图片。比较好用的工具有OptiPNG, PNGOUT, jpegtran 和jpegoptim。这些工具大都能安装成独立的工具或是整合到开发过程中，另外像Smush这样的工具，还可以直接在云端处理。

10. 删除不必要的字体

Web fonts已经彻底改变了字体的设计，它减少了很多不必要的文本。然而，目前的字体仍然会给你的网页带来多余的字节。如果你使用超过两种字体，这就已经开始对性能造成影响了。

结论

我相信大部分网站都可以通过以上的优化减小大概30%-50%的重量，但是身为一个完美主义的开发者这是远远不够的，我们在接下来的系列文章中会继续对网站瘦身进行深入研究，感兴趣的可以关注一下极客头条的微博和微信，我们会将接下来的文章在各个社交平台上进行推送。

如果你已经尝试了基础的热身，那我们就继续采取一些更极客的解决方案。

1. 移除网站中社交网络的组件

看到这个标题请不要惊讶，我并不是让你放弃第三方社交平台，而是希望你能放弃那些肥胖的官方组件。你的网站中有社交平台的分享按钮么？这些按钮会为你的网站增重大概0.5M。我们知道，这些分享功能都是由JavaScript实现的，有些分享组件的网络连接会强制在加载页面之前进行。

太大的社交组件完全没有必要，你完全可以添加一个轻量级的社交分享按钮在你的网页中，几行html代码就能搞定的事为什么要弄的这么复杂呢？很多人可能都没有在意到一个小细节，FaceBook的官方”赞“按钮就要270KB！现在你应该明白这么做的必要性了，我们应该深入研究如何优化社交组件。

如果你觉得一个简单的按钮无法提供数据统计等功能，可以看一看这篇文章，学习一下如果添加高性能的轻量级社交组件。

2. 检查所有第三方组件的大小

社交网络并不是唯一的原因，其它第三方的组件也大大增大了你网站的大小，这些组件有时候甚至会加载其它网站的内容，这些加载的数据可能高达几百KB。

如果你必须要使用这个组件，那我们要考虑的就是如何更好的处理和简化这个组件了。理想情况下，JavaScript组件应该都是轻量级的，它们在页面底部被加载，

3. 考虑使用懒加载或内容点播

假设你的网站是用来显示视频供应商提供的视频。无论用户是否有意要播放，页面都会加载视频API和其它相关的资源。为什么不让用户请求之后再加载这些东西呢？

你也可以采用滚动式页面，在用户往下拉滚动条时再开始加载新的内容，这样做虽然可能会对SEO造成影响，但是在特定的情况下，如照片展示，微博内容展示等都会有不错的效果。

4. 用CSS取代图片

你还在用切片技术创建图片的圆角边框等样式吗？我们都知道，CSS可以生成很多种前台效果，包括各种样式的按钮，背景……虽然他们在不同的浏览器中可能会有不同的展示样式，但用户并不会在意这些，他们不会像你一样开很多个浏览器对比同样的代码会有什么样的区别。

你完全不用担心古代浏览器会对CSS样式造成影响，当你构建一个响应式设计的页面，你要通配各种大小的屏蔽，这个时候如果你还是用图片就会有很多问题，所以CSS是很好的选择。

不过需要注意的是重绘CSS的阴影和梯度代价也是非常大的，特别是你同时在几十个元素中都添加了这些特性。所以你必须多次去实践，对比在你的网站中是用CSS好还是用图片好。这些都要因网站具体情况而定。

5. 用CSS效果和动画取代JavaScript

如果在你的JavaScript代码中到处都是$("#x").fade() 和 $("#y").slideDown()这会对你的网站造成很大的影响。在几年前我们必须得这么做，但是现在不同了，我们可以选择用CSS3的animations, transitions 和 transformations取代了JavaScript的效果，原因如下：

1). CSS3 animation是由本地浏览器自主绘制的，在没有错误的情况下，它会比JavaScript效果好，而且快很多。

2). CSS3 animation代码更容易编写，而且代码量少。

3). 如果JavaScript不使用第三方类库，3D效果的实现会比CSS3提供3D转换难很多。

6. 使用可缩放矢量图(SVGs)

SVGs 包括点，线和图形，它们被以矢量的形式被定义在XML中，SVGs是响应式设计中比更理解的解决方案，它们可以缩放成任意大小而且不会影响到显示的效果，而且文件大小一般都会小于bitmap。

当然，SVGs并不是在任何情况下都适用，如果是相册或是混合通道的图片就应该使用JPG或是PNG格式。其他比如logo，图表可以放心选用SVGs。

有一些工具可以直接把bitmaps格式的图转成矢量格式，但是多少影响到图片的效果。这里推荐Inkscape 和 SVG edit，它们都是很不错的创建SVGs的工具包。 

7. 用图标字体(icon fonts)代替图片

利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图，如：png，jpeg，放大后有锯齿或模糊现象。

由于图标字体的灵活性和易用性使得图标字体使用越来越广泛了，我们经常可以看到不同的UI框架都整合了各种的图标字体。

除了「分辨率无关」这个最大的优点之外，icon fonts 还具有：

• 文件小：相比图片几十几百KB的容量，icon fonts 几乎是羽翼级轻量。
• 加载性能好：因为图标都被打包进一套字体内，http request 减少。这如同我们常用的 css sprites 技术。
• 支持CSS样式：和普通字体一样，你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…
• 兼容性好：web fonts 起源很早，别说主流浏览器，连IE6/7都能良好支持。除了一些老的移动端浏览器，如Android 2.1以下的初代浏览器，Opera mini 这类自限型浏览器。

当然 icon fonts 也有它的不足：

• 样式单一，无法针对不同分辨率来调整icon 的细节，比如降低大尺寸icon 的线条粗细。
• 颜色单一，CSS 无法方便的去定义彩色的 icon，倒是有通过叠加组合的方式来达到彩色图标的目的。
• 移动端浏览器兼容性还不够完善，像Opera mini、Windows phone 7.0-7.8 都不能正常显示icon fonts。
• 有少量的移动设备有可能会和 icon fonts 的字符编码冲突，导致icon 显示不正常（我们自己风车Android 版本就碰到了这个问题）。

所以 icon fonts 也并不是一套完美的响应式图片的解决方案，当它适宜你的应用场景时，比如：

• 你的网站是扁平化或简约风格，图标样式单一，颜色为纯色。
• 你的目标用户使用桌面浏览器为主，或者，
• 你愿意为非兼容设备做兼容hack。

icon fonts 是一个令设计师和前端工程师都心花怒放的方案。

icon fonts 的制作主要有两条思路：

1. 利用字体工具手动制作
2. 利用在线工具自动生成

8. 使用sprite来优化图片资源

Sprite”(精灵)这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上，并且通过简单的程序或硬件即可正确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有单独占用内存，所以被取名为“Sprite精灵”。

时间进行到2000年，Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生，它基于同上文提到的游戏Sprite同样的原理，并且使用CSS更容易控制，很快的流行开来。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

CSS Sprites可以用在很多场合，大型网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间通常会留出较大的空白，使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目 的方式。

在网站图片的解决方案中，CSS3应该是首选，其次是SVG和icon font,最后才是Bitmap。经常使用的Bitmap文件应该打包放在一个单独的sprite中，这样一来图片就可以在CSS中访问到了，像这样：

 
 

  
  

   
   
.sprite {
    width: 16px;
    height: 16px;
    background: url("sprite.png") 0 0 no-repeat;
}
 
.sprite.help { background-position: 0 -16px; }
.sprite.info { background-position: 0 -32px; }
.sprite.user { background-position: 0 -48px; }
  
  
 
 

9. 使用data URIs

假设你有一个图片，把它在网页上显示出来的标准方法是：

 
 

  
  

   
   
<img src="http://gbtags.com/images/A.png"/>
  
  
  
  

   
   
   
   

    
    

     
     

     
     

    
    
   
   
   
   
  
  
 
 

这 种取得资料的方法称为 http URI scheme ，同样的效果使用 data URI scheme 可以写成：

 
 

  
  

   
   
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
 
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
  
  
  
  

   
   
   
   

    
    

     
     

     
     

    
    
   
   
   
   
  
  
 
 

换句话说我们把图像档案的内容内置在 HTML 档案中，节省了一个 HTTP 请求。

data uri的主要优点是减少了http请求数，调用起来比css sprite更加灵活，缺点是增加了客户端的资源消耗。

在所有浏览器的非缓存的模式下， CSS sprite 方式比 data URI 方式快了数百微秒。但事实上 CSS Sprite 比 Data URI 方式多发送了一次连接请求，包括 TCP 慢启动招致所有相关的连接开销。

缓存条件下 Android 4.2 和 iOS 6 的 CSS sprite 模式都有大概 2 倍的速度提升，只是 iOS 条件下减少了 220ms 而 Android 减少了 70ms （原生浏览器）。相对来说，Chrome 和 Firefox 的情况平衡得好点，缓存和非缓存情况下只有 50% 到 60ms 左右的性能差异。

在这里我建议将 data URIs 用于非常小的资源，并且不能在 CSS 和 内联 HTML 中多次使用它们。

10. 使用网站评估工具

检查是否减肥成功的最好方法就是站到称上称一下，同样，你需要使用网站评估工具评估一下你给网站瘦身的效果。很多开发者工具和免费的在线测试工具都不错，百度和Google的站长分析工具都很好用。

总结

大家可以明显的发现这篇文章比第一篇不正常多了，更显极客范儿，相信能把实践跟到这的站长已经不多了。对于我们来说，极客的瘦身之道远不仅如此，在下一篇文章中，我会列出更加疯狂的瘦身技巧。成功的都是坚持到最后的那些人，共勉之~