35网站首页全方位优化过程分享

文章出处： http://ui.35.com/2009/08/10/35oz/

 

 

 

一直以来我们都在寻找提高网站访问性能的方法，日益庞大的内容和页面效果使我们的网站越来越臃肿，速度越来越慢。有没有什么办法能有效的解决这个问题呢？答案是肯定的。下面是对我们公司站点优化瘦身的要点拿出来跟大家分享。

说到站点优化，各式各样的分析工具和优化方法琳琅满目，我们推荐目前较为主流的2种优化分析工具作为衡量标准：(FireFox + FireBug + YSLOW)和IE + HttpWatch。

浏览器：FireFox  3.5.1 (下载地址： http://www.mozillaonline.com/ 或 http://g-fox.cn/)
调试工具：Firebug  1.4.1 (下载地址： http://getfirebug.com/)
FF分析工具：YSlow  2.0.0b4 (下载地址： https://addons.mozilla.org/zh-CN/firefox/addon/5369)
IE分析工具：HttpWatch （下载地址： http://download.pchome.net/internet/browser/plugin/22585.html）

在这里我们主要使用Yahoo的Yslow工具优化：
Yslow 是雅虎出的一款页面分析工具，他使用在firefox浏览器下，必须结合fireBug一起使用。安装好软件后按F12键就可以打开Yslow面板。好了废话少说，现在转入正题：

优化前，网站通过yeslow的评价为D级，总得分61分，页面元素65个共271K。(Yahoo：D级是不及格的说；我们：-_-！) 
  

通过分析，Yslow非常人性化得为我们指出了问题的所在，请看下图：
图片中Yslow为我们提出了22个项目6个分类的问题，我们的优化主要是针对这22个项目来进行（目标很明确）：

1. Content
   
   从上图可以看出在这一大项里面主要包括：减少HTTP请求数、减少DNS查询、避免重定向、使AJAX可缓存、减少DOM元件数量、杜绝空链接的出现(404错误)。除了第一点其他都为A，因此主要优化页面的对外请求数。
   目前情况：根据分析结果来看，目前站点首页有16个Javascript外部连接数，整体连接请求过多；
   解决方案：尽可能的合并JS，减少连接数，同时将首页单独调用的小段脚本直接写入页面中，以文本方式执行，并对所有的JS代码进行压缩优化；
   这里说下调用JS的事情，页面是部分写入JS脚本还是全部外部调用，其实讨论结果是各有利弊，全部外部调用固然能使页面和脚本分离彻底，便于后期维护，但会增加外部连接数，而只将本页用到的简短JS直接写入页面里，可以降低外部的请求连接数，因此权衡之下决定将部分有用到的JS压缩后直接写入页面中。
   部分JS直接写入的必要性，可以通过Yahoo分析的看到(总体还是要尽量外调，但少许必要的可以直接写入)
   分值N/A，已取消对于外置JS和CSS的评分。
2. Cookie
   
   Cookie项包括：减小Cookie体积、对组件使用无Cookie的域名两项，都是A，就此跳过。
3. CSS
   
   CSS项包括：将CSS放置到顶部、避免使用CSS中的Expressions、将JS和CSS外置(关闭项)、压缩JS和CSS、删除重复脚本和样式、避免使用过滤器。
   评分都是A，就不深入了，顺带说下避免使用CSS 的Expressions，主要是因为当需要渲染的元素很多的时候，会照成卡死的现象，资源消耗极大。另外如果使用透明效果，尽量避免使用过滤器，需要的话可以直接使用PNG8代替。
4. Images
   
   站点图片项包括：不要直接在HTML中缩放图片、长时间缓存浏览器ICON并优化到1K以下；
   以上两项没问题，另外还有两项：一个就是CSS SPRITE的使用，另一个就是PNG8格式的使用；
   关于CSS SPRITE的好处，这个在网上已经有很多文章，这里就不再详细描述。
   推荐一个合并png并自动生成css代码的站点：http://csssprites.com/
5. JS
   
   通过上面的图片可以看到网站JS出现的问题就是，我们没有把JS放在页面的最底部，和没有压缩js的大小。在页面载入的时候遵循从上到下的载入机制，JS的放在页面的最后可以有效的减少载入页面的速度。所以我们把JS搬到页面的最后(body的前面)同时我们也对JS进行压缩，去掉不必要的注释、换行符等等。
6. Sever
   
   最后这块是主要是针对服务器配置的优化。从上面的图标中可以看问题的重点出在CDN、Expires、GZIP压缩还有Etags。这几个都是涉及到服务器的配置问题，也是问题最大的一块。CDN从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。Expires设置过期时间，最大限度的引导浏览器使用缓存的信息。减少下载量。GZIP是对网站文件进行压缩，然后在浏览器进行解压。减少文件在网络传输的大小。

经过以上所有优化工作之后，我们再来看看站点的评分：评价从原本的D级上升到了B级，总得分为81分(我们：o~Yeah~!)，页面元素缩减后剩下12个，总大小为116.7K。
 

 

最后，我们总结下这次影响到页面性能的主要问题和优化经验：

• 页面的总元素数：我们应该尽量减少页面的元素，能公用或合并的元素，全部统一共用或合并。

• 是否利用了缓存：缓存是一个我们平时很容易忽略的东西，起用缓存能大大的提升我们页面的访问效率。

• 文本对象是否进行了压缩：文件对象的大小直接影响到文件的下载速度。不论是图片，CSS，还是JS我们都应该尽量的减小体积。

• 是否有大量的并发阻塞出现：由于IE限制了并发数的量（默认并发数为2）所以大量的并发数必然导致访问阻塞。应该尽量减少。

通过以上方法我们的网站性能已经有明显提高（有没有很快？:D），但是仍旧有相当多的提升空间，我们将继续努力并争取达到A级评价(超过Yahoo：D)，感谢大家观看，谢幕~~~！