Web站点优化基本原则
【IT168 专稿】
年初的时候，Steve Souders（雅虎的首席Performance设计师）和他的Performance团队发表了一系列关于前端页面性能优化的“规则”。
前端页面性能优化的“规则”这篇指南采用了非常实用，基于例子的方法来告诉你如何实现这些原则。这篇文章的主要读者就是那些web开发者，他们所开发的费用的预算很有限，很有可能使用共享主机，并且在运行应用程序的时候还会有许多的限制。共享主机要想玩转Apache的设置很困难，有些时候甚至是不可能的，因此，我们有必要看看这种情况，如果你给定在一些常见的限制约束下，你还能做什么。现在假设你的主机运行的是PHP 和Apache。
这篇指南分为了四个部分：
1 基本优化准则
2 优化站点资源（图片，脚本，风格）
3 优化特殊的脚本
4 优化特殊样式
指南导读
这篇文章并没有详细解释Yahoo提升性能的方法，因此你需要自己很好的通读整个文章，来更好的了解它们的重要性，规则背后的原理，和为什么它们是这样的。下面就是那些规则的列表：
1 产生较少的HTTP请求
2使用一个内容交付网络（CDN）
3 页面头部增加一个过期设置
4 Gzip压缩站点内容
5 将CSS移至最页面顶部
6 将script脚本移至页面底端
7 CSS中避免JavaScript表达式
8 在外部调用JavaScript和CSS
9 减少DNS查找
10 减小JavaScript
11 避免重定向
12 删除重复的脚本
13 配置Etags
你能在雅虎开发者网站读到这些规则。也能在Steve Souders写的书《"High Performance Web Sites》上读到，以及Tenni Theurer的博客上也有。
基本的优化原则
减少下载大小
减少下载大小不仅仅是雅虎优化网站的规则，这个规则是很明显的。但是，我不认为没有必要重申一下，让我们说这是规则#0吧，一个不成文的规则。
当我们浏览一个简单的web页面时，我们能看见的有：
- 一些HTML代码
- 由HTML引用的各种页面组成部分
网站的组成包括图片，脚本，风格样式，或许还有一些多媒体，如Flash电影或者Java applet小程序。因此，当提到下载大小，你的目标就是将这些部分尽可能减轻，有建议说能扩展成HTML内容更好。创建一个瘦的HTML代码意味这使用更好的标记（markup），这将和SEO（搜索引擎优化）的工作重叠，SEO（搜索引擎优化）是一个网站创建必要的部分。大部分的专业web开发者知道，一个好的标记（markup）的重要特征是它仅仅描述内容，而不是表示页面（当然也不是用于布局的表格）。任何布局或者表现的元素应该交给CSS来完成。
下面是是给一个导航菜单写的，非常好的HTML标记（markup）例子：
<ul id="menu"> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul>
这类标记应该提供"hooks"标记，允许使用CSS来产生你想要的效果，出现你希望的菜单样式，可以是很奇特的加重号，边框，翻转，或者就将菜单项变为水平。这个标记是最小的，这就意味这下载的时候只需要下载很少的字节；它是语义的，意味这它描述的是内容（一个导航菜单是一个链接的列表）；并且最小限度能够给你提供一个SEO优势：普遍达成一致共识搜索引擎搜索页面时候更喜欢那些富含内容标签的页面。
一旦你确保你的标签很轻便，语义的，你就应该从头到尾确保他们还是最小规模的。举个例子，检查是否有可能在不流失画质的情况下压缩图片，或者选择不同的文件格式来获得很大程度的压缩。工具诸如PNGOUT和pngcrush都是很好的。
确保更少的HTTP请求
确保更少的HTTP请求，结果就是它会成为最重要的优化技术，产生最大的效果。如果你的时间有限，只能完成一个优化的任务，就选择这个吧。当你显示你的页面的时候，HTTP请求是通常是浏览器运行是最“昂贵”的花销。因此，你应该确保你的页面尽可能的少进行请求。
在保持页面的多元性的同时，如何做到这些呢？
- 结合使用scripts和样式表：在你的网页头部有一些少的<script>标记吗？那么，那么将这些.js脚本归为一个，接着同样的对CSS文件进行处理。
- 使用图形子画面：这个技术允许你结合几个图片成为一个，然后使用CSS显示你所需要的图片部分。当你结合了5个或者10个画面到一个文件，你已经做了一个恨得优化了，节省了请求/响应开销了。
- 避免重定向：一个重定向就增加了客户端到服务器的一个往返请求，因此没有很及时的处理你的页面。在收到第一个初始请求后，浏览器会作出第二个请求，并且等待第二个响应。
- 避免使用frame框架：如果你使用frame，浏览器不得不请求至少三个HTML页面，而不是一个，当然那些frameset也是这样的。
现在你已经知道了最基本的规则了。总之，让你的页面的资源尽可能小，使用你能使用的结合的方法，使用更少的组成部分。如过你非常关注优化的效果的话，这么做了的话，你和你的网站访问者就会发现有了一个重要的改观了。
除了一些最基本的原则外，还有一些性能优化的工具，有利于你进行web站点优化。
性能优化工具
有许多的工具有助你的站点性能优化。很重要的是，当你的页面被加载时，你想监视当时发生了一些什么变化，因此你能做出灵通的决定。使用下面的这些工具吧：
- Firefox Firebug Net panel，见http://www.getfirebug.com
- Yslow，Yahoo 性能扩展Firebug，见http://developer.yahoo.com/yslow/
- Firefox LiveHTTP Headers,见http://livehttpheaders.mozdev.org/
- IE Fiddler,同时也是一个多用途封包监听器，见http://www.fiddlertool.com/fiddler/
- IE HTTPWatch,见http://www.httpwatch.com/
- Web检查工具，见http://webkit.org/blog/?p=41
0
相关文章
关注我们
