UI笔记——网站优化
响应慢甚至停止响应的网站非常恼人。
将会用到的工具
- 文本编辑器的选择
- 配置好的LAMP服务器（Linux、Apache或Lighttpd、Mysql、PHP5）
- FTP帐号。FTP是向服务器中上传文件的通用方法。
- SSH帐号。为了修改远程Linux服务器的配置文件，你需要能通过访问的SSH帐号，可选的客户端有Putty或者Jellyfish。
- MySQL初级调试工具（如果没有访问MySQL配置文件的权限、你的服务器不是Linux、你的数据库不是MySQL——请跳过）否则，请登录http://launchpad.net/mysql-tuning-primer/下载最新的MySQL调试脚本。使用FTP或者SSH将脚本上传到服务器中，但是先不要运行。
- 安装Smush：这是一个Firefox插件，提供了大量图片优化的快捷方式，它是一个顺手的工具。登录http://sumsh.it/下载。Firefox的NoScript插件会和冲突，请禁用。（Smush被包含在YSlow中，已经不需要独立下载安装了）
- 安装Firebuy和YSlow插件：Yahoo提供了一个Firebug插件YSlow，提供了快速分析网站的功能，并且提供了非常实用优化网站想要速度的建议。
- 下载安装Firefox
- 运行Firefox并按照Firebug
- 安装YSlow
- 开始分析。（步骤重启Firefox打开网站，选择工具>Firebug>OpenFirebug，然后打开YSlow标签点击Performance）
在IMG标签中表明正确的图片尺寸
大图片缩放成小像素图片，不要让浏览器对图片进行缩放，这样很耗时，请自己手动修改。
好处：处理过的图片更易于传输，速度更快，提供了更好的用户体验。
减小图像的尺寸
应当注意网站中每个图片的尺寸，检查是否可以将图片的调色板设置为256色或更少。
好处：网站中的图片越小，加载时间越快，用户体验越好。
图片聚合
即使用CSS精灵
好处：减少HTTP的请求数目降低了网站的加载时间，提升了用户体验。
服务器和内容分发网络
YSlow建议将静态内容，如图片放在世界各地的服务器上，这样图片的储存就更接近用户。
如果可以的话，租用一台专门的服务器，作为一台廉价的今天内容专用服务器。
好处：合理使用缓存能够降低带宽费用，提供用户体验。
整合CSS和JavaScript
通过将所有样式文件放入一个大的样式文件，将所有JavaScript文件放入一个JavaScript文件，可以减少传送用户访问网页时的HTTP请求数量。当然，开发过程中可以继续使用多样式和多JavaScript文件的方法。但是每个开发周期中都需要进行一次文件的整合
可以通过文本编辑器进行手工整合。或者，如果你使用Linux，在CSS文件夹中，可以用Cat（concatenate的缩写）命令整合文件.
因为文件中存在覆盖的问题（CSS中的属性重写或这JavaScript中的代码依赖），在整合过程中需要特别的注意JavaScript文件和CSS文件的加载顺序。如果你决定进行整合，确保在不同文件之间使用注释进行分割。
好处：减少HTTP请求数量可以提高网站的响应时间，同时带来用户体验的提高。
CSS放在顶部，而JavaScript放在底部
将CSS文件放在HTML文件的<head></head>标签之间。这样，浏览器在得到THML元素之前就知道如何进行显示，而不必在加载的过程中对元素进行重新调整。
将JavaScript文件放在<body>结束标签之前。这样可以避免JavaScript正在加载中的页面进行渲染。
好处：尽可能加快页面的加载速度，提升用户体验度。
压缩CSS和JavaScript
很多基于正则的JavaScript压缩器在遇到有问题的代码时非常不紊地。为了节省时间，最好先使用JSLint检测一遍代码，将找出的问题分类。即使代码通过了JSLint的检测，也应当尽力保证代码接近完美。因为在很多情况下，一个分号都会导致压缩器的失败。
在文本编辑器中复制你的CSS或JavaScript代码，然后粘帖到Minify（http://www.reneschmidt.de/tools/minify/）相应的输入框中。单击“Hit Me”，并将结果应用在你的网站上。压缩代码越多，网站的表现就会越好。对于JavaScript来说，效果比较明显，而CSS则小不了太多。（整合工具Packer 3.1和Minify在代码压缩方面有着非常好的表现，当然其他工具不错也可以尝试如YUICompressor）
好处：减小了文件尺寸，降低了带宽消耗，JavaScript的表现得到了显著地提升，改善了用户体验。
使用外部CSS和JavaScript文件
不要使用内嵌的CSS或JavaScript，把它们都放在外部单独的文件中。这样不仅易于理解，而且也减少的了需要缓存的HTML文件的尺寸，提高了缓存的利用率（复用），同样也降低了HTTP的请求数。
好处：改善了缓存利用，页面重新加载时间变得更短，提升了用户体验。
选择一个文档类型
选择文档类型虽然对于改善速度没什么直接影响，但是通过为浏览器指定清晰、明确的HTML和CSS解析规则，可以充分发挥它们的潜力。
不要在任何地方漏掉文档类型的声明，这样会导致浏览器去猜测应该使用什么标准。
好处：告诉浏览器处理网站的方式，是非常重要的步骤，确保了在不同浏览器间网站外观的一致性。
验证页面
特别是你提供基于网络的服务时，潜在用户会仔细分析你的站点，来判断你对于质量的关注究竟到何种程度。通过W3C（http://validator.w3.org）的验证服务的页面表明你对于质量非常关注，而且致力于设计在普通网络浏览器上表现一致的页面。（潜在用户的信任感）
不要使用CSS表达式
支持CSS表达式不被网页标准所接受，而且要比普通的CSS花费更多的步骤，处理速度明显地降低了，这是一种资源的浪费。（即使它的“创造者”微软，也在IE8中抛弃了它）
服务器部分
（拥有服务器的root权限）配置Web服务器需要一些服务器的底层进入权限，通常是通过SSH的方式。每种服务器软件都不一样，所以提出要点，请自行寻找操作方式。
Apache：如何设置过期时间（决定了文件多长时间应当进行刷新，稳定HTTP请求次数）
YSlow中可以查看缺少过期头（expires header）的报警
Lighttpd：如何设置过期头
Apache：如何配置ETags（实体标签—entity tag，是HTTP响应头（response header）中用来判断文件内容是否被修改的标志）
Lighttpd：如何修改ETags
为PHP安装eAccelerator
MySQL Tuning Primer（调试MySQL也需要SSH权限，还需要一个能获得MySQL运行信息的账户和一个运行的MySQL服务器）
启用透明压缩（如果网站访问量不大，只是提供一些小的HTML、CSS和JavaScript文件，压缩文件并不十分必要，因为即便负载高到严峻的程度，即时的压缩会给服务器带来额外的压力。但是如果有大量的资源和大尺寸文本文件，应当激活压缩功能，这样可以节省带宽、减少传输时间）
启用Apache的压缩功能
激活Lighttpd的压缩
打开PHP的压缩选项
检测压缩效果
尽可能避免重定向
网站在使用一段时间后会产生很多重定向。有些文件因为过期或者突然消失而被移走了，这时重定向是个好办法，可以帮助用户找到他搜索的，但是应该尽量压缩。
好处：如果能够仔细的优化重定向链，服务器就能够处理更多的并发访问。
如何探测长时间跳转链？
完整的链接
避免死链接
如何检查内部的死链接？