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

最新推荐文章于 2024-09-08 13:30:46 发布

weixin_34279246

最新推荐文章于 2024-09-08 13:30:46 发布

阅读量109

点赞数

原文链接：http://blog.51cto.com/sweicheng/193079

版权

文章出处： 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个项目来进行（目标很明确）：

Content

从上图可以看出在这一大项里面主要包括：减少HTTP请求数、减少DNS查询、避免重定向、使AJAX可缓存、减少DOM元件数量、杜绝空链接的出现(404错误)。除了第一点其他都为A，因此主要优化页面的对外请求数。
目前情况：根据分析结果来看，目前站点首页有16个Javascript外部连接数，整体连接请求过多；
解决方案：尽可能的合并JS，减少连接数，同时将首页单独调用的小段脚本直接写入页面中，以文本方式执行，并对所有的JS代码进行压缩优化；
这里说下调用JS的事情，页面是部分写入JS脚本还是全部外部调用，其实讨论结果是各有利弊，全部外部调用固然能使页面和脚本分离彻底，便于后期维护，但会增加外部连接数，而只将本页用到的简短JS直接写入页面里，可以降低外部的请求连接数，因此权衡之下决定将部分有用到的JS压缩后直接写入页面中。
部分JS直接写入的必要性，可以通过Yahoo分析的看到(总体还是要尽量外调，但少许必要的可以直接写入)
分值N/A，已取消对于外置JS和CSS的评分。
Cookie

Cookie项包括：减小Cookie体积、对组件使用无Cookie的域名两项，都是A，就此跳过。
CSS

CSS项包括：将CSS放置到顶部、避免使用CSS中的Expressions、将JS和CSS外置(关闭项)、压缩JS和CSS、删除重复脚本和样式、避免使用过滤器。
评分都是A，就不深入了，顺带说下避免使用CSS 的Expressions，主要是因为当需要渲染的元素很多的时候，会照成卡死的现象，资源消耗极大。另外如果使用透明效果，尽量避免使用过滤器，需要的话可以直接使用PNG8代替。
Images

站点图片项包括：不要直接在HTML中缩放图片、长时间缓存浏览器ICON并优化到1K以下；
以上两项没问题，另外还有两项：一个就是CSS SPRITE的使用，另一个就是PNG8格式的使用；
关于CSS SPRITE的好处，这个在网上已经有很多文章，这里就不再详细描述。
推荐一个合并png并自动生成css代码的站点：http://csssprites.com/
JS

通过上面的图片可以看到网站JS出现的问题就是，我们没有把JS放在页面的最底部，和没有压缩js的大小。在页面载入的时候遵循从上到下的载入机制，JS的放在页面的最后可以有效的减少载入页面的速度。所以我们把JS搬到页面的最后(body的前面)同时我们也对JS进行压缩，去掉不必要的注释、换行符等等。
Sever

最后这块是主要是针对服务器配置的优化。从上面的图标中可以看问题的重点出在CDN、Expires、GZIP压缩还有Etags。这几个都是涉及到服务器的配置问题，也是问题最大的一块。CDN从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。Expires设置过期时间，最大限度的引导浏览器使用缓存的信息。减少下载量。GZIP是对网站文件进行压缩，然后在浏览器进行解压。减少文件在网络传输的大小。