【网站测试工具】-测试网页速度用YSlow网站策划维护工具

1、星期八职场经验网（）【现成经验助你快速完成工作】测试网页速度用YSlow网站策划维护工具YSlow 是 yahoo 美国开发的一个页面评分插件，非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们该怎么去改进和优化。 仔细研究了下 YSlow 的评分规则。 主要有 12 条： 1. Make fewer HTTP requests 尽可能少的 http 请求。我们有 141 个请求（其 中 15 个 JS 请求，3 个 CSS 请求，47 个 CSS background images 请求），多的可 怕。思考了下，为什么把这个三种请求过多列为对页面加载的重要不利因素呢， 而过多的

2、 IMG 请求并没有列为不利因素呢？ 发现原来这些请求都是可以避免的。 15 个 JS 和 3 个 CSS 完全可以通过特殊的办法进行合并（这个技术部已经帮我们 解决了，实在是太感谢了，嘿嘿。），这样合并以后，一般情况下页面上只会出 现一个 JS 和一个 CSS（对 JS 的封装得有一定的要求）。 但是 47 个 CSS background images 请求改怎么解决呢？为什么页面上的纯 IMG 请求时合理的，而 CSS background images 请求过多就是不利因素了呢。这个我 想了很久，总算明白，原来是这样的： 一般页面上的 ICON，栏目背景啊，图片按钮啊，我们都会用图片

3、CSS 背景来实 现，而一般这个图片 CSS 背景用到的图片都是比较小的，所以完全可以把这些图 片合并成一个相对比较大的图片，这样页面上只会出现一个 CSS background images 请求，最多也就 2-3 个。后来仔细看了下雅虎美国的页面，他们的确也 是这样做的，虽然这样做需要花一定的时间来有规则的合并这些 ICON，栏目背 景，图片按钮，以方便 CSS 调用，但是这样做绝对是合算的，而且是有必要的， YSlow 也是极力推荐的。 2. Use a CDN 这项我们的评分是 F 级，最低。说实在的，我刚开始什么是 CDN 都不知道。后来查了 GOODLE 才知道。CDN 的全称是

4、Content Delivery Network， 即内容分发网络。其目的是通过在现有的 Internet 中增加一层新的网络架构， 将网站的内容发布到最接近用户的网络”边缘”，使用户可以就近取得所需的内 容，解决 Internet 网络拥挤的状况，提高用户访问网站的响应速度。从技术上 全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访 问网站响应速度慢的问题。 看来上述的解释后，基本上明白了 CDN 是怎么回事，后来咨询了下中文站点 SA， 得知我们网站目前的确还没有做 CDN 的优化， 但是据说我们有更加先进的技术来 解决类似的问题（具体什么技术那就保密了），但是毕竟

5、CDN 也是个相当不错的 技术，所以在我们先进技术的基础上在做 CDN 优化，肯定比现在更好，嘿嘿。据 说 SA 明年会做几个点的 CND。 3. Add an Expiresheader 设置过期的 HTTP Header.设置 Expires Header 可以 将脚本, 样式表, 图片, Flash 等缓存在浏览器的 Cache 中. 其实我们网站也做了这个优化，至少图片在这个上做过优化，但是没有做完全。 我们的 CSS 和 JS 都还没有做过优化，倒是外部引入的一个广告 JS 做了，呵呵。 其实设置过期的 HTTP Header 更应该做在脚本, 样式表, Flash 上.不过据说这

6、个 SA 也是没有做的，但是有一定的风险，因为 JS 和 CSS 是有一定的逻辑，如果 服务器端和客户端都存在缓存的话，万一出了什么问题，对我们以后查找问题的所在和增加难度，不过我想两者中是可以权衡和并存的。4. Gzip components 对我们的页面内容进行 Gzip 格式的压缩，Gzip 格式是一 种很普遍的压缩技术，几乎所有的浏览器都有解压 Gzip 格式的能力，而且它可 以压缩的比例非常大，一般压缩率为 85%，就是说服务器端 100K 的页面可以压 缩到 25K 左右的 Gzip 格式的数据发给客户端， 客户端收到 Gzip 格式的数据后自 动解压缩后显示页面。 这点我们网站基

7、本上是 100%做到了， 但是我们这项的评分并没有达到想象中的 A 级，原因是出在我们的外部链接，比如我们首页，有外部的广告投放 JS，这个 JS 说拥有的网站是没有做过 GZIP 优化，连累了我们网站，所以我们也只有 B， 或者 C 级：5. Put CSS at the top 把 CSS 外部链接放到页面的顶部。 其实这个原则我们一般都遵守的， 如果把 CSS 外部链接作为逻辑的一部分出现在 页面头部以下，我个人觉得这个本身就是个错误。还好，我们的页面基本上都做 到了，可是有些页面比如 LIST 页面，还是出现了和逻辑挂钩的 CSS 链接，原因 是为了解决一些本来就不合理的产品逻辑。所以

8、，我们 WEB 前端工程师有义务杜 绝这些不合理的产品逻辑破坏我们的页面结果及页面加载速度， 不能为了实现而 实现。 6. Put JS at the bottom 把 Javascript 脚本尽量放到页面底部加载。 一开始为以为 Javascript 脚本尽量放到页面底部加载， 是指所有的 JS 脚本都要 放到底部，后来才发现，并不完全是这样，这里所指的脚本是指那些在加载过程 中要执行的脚本，所以一般的处理办法还是页面头部引入 JS 链接，页面底部执 行 JS 脚本程序。为什么要这么做呢？呵呵，其实很简单，为了实现最大的下载 并行，页面加载初期做的事，最好只有下载，HTML 的下载，CSS

9、 的下载,JS 的下 载，等下载完成后再去实现页面渲染，JS 脚本运行。这个方面我们还需要努力， 很多页面我们在加载过程中运行了一部分脚本，或许是为了实现一些功能，没有 办法，不过或许有更好的办法来替代呢。 7. Avoid CSS expressions 避免 CSS 表达式 其实在 CSS 中运行表达式和页面加载中运行大量的 JS 脚本差不多， 或许还更慢， 而且还不兼容， 虽然可以使我们在页面逻辑简单不少， 但是我们完全可以抛弃之。 这个点，我们的页面基本上都做到了。不过说实话，CSS 表达式，嘿嘿，我以前 还不知道有这么回事。惭愧。哈哈。8. Reduce DNS lookups 尽可

10、能少的 DNS 查找。 这项我们做的不是很好。D 级，有 9 个域名，一般不要超过 4 个。不过这个主要 是服务器架构上的问题， 我们也无能为力， 现在单单首页的广告域名就有好几个， 好耶的广告域名，雅虎的广告域名，淘宝店广告域名，打点的域名。如果去掉这 些，我们其实还是够用的，一个主域名，一个图片的，一个 STYLE 的，最多加上 IFREAM 的刚好 4 个。 9. Minify JS 对 Javascript 代码进行压缩。 这点我很早以前就对此关注了，也找到了一个不错的压缩工具，yuicompressor， 雅虎美国开发的 JAVA 压缩包 yuicompressor.jar。压缩的相

11、当完美，不仅把代 码间的空格换行给去除掉了，而且对变量名，北部方法名都进行的简化，无意中 实现了混淆脚本的作用。现在我们仅仅做到了 JS 合并，并没有对齐进行压缩， 如果我用 yuicompressor 手工的去压缩，虽然实现了 JS 压缩，但是给我们自己的维护量增加了一倍，因为我们需要维护 2 套 JS 脚本，一套是压缩前的（调试 用的），一套是压缩后（发布到网上的），而且要保证 2 套代码一致。所以最完 美的做法是在发布的时候实现 JS 脚本合并， 并对其用 yuicompressor 进行压缩， 然后发布到晚上，把关键点移到发布的时候，这样我们只需要关心一套 JS 脚本 （发布前的版本）

12、。而且我觉得这个方案完全是行动通的。 10. Avoid redirects 避免重定向（跳转） 怎么理解这点呢？ 我们经常遇到的一种做法，注册成功后，旺旺会有一个页面提示“你已经注册成 功，3 秒后将自动跳转到 XX 页面”。我就觉得很奇怪，你为什么不直接跳转到 该去的页面？还有一种，我们大家非常熟悉，一般我们页面的链接都写成： 或者 别吗？我明确的告诉大家，有！服务器如果接收到的 URL 是 ，它会自动重新定向到 前者比后者多走了一步,重定向，显然多多少少浪费了一定的时间。所以以后我 们加 URL 链接的时候，别忘了把最后的“/”给加上去。 11. Remove duplicate scr

13、ipts 去除重复的脚本 这个其实没有什么好说的，大家都应该毫无条件的去遵守，但是越是明显，越是 简单的事，我们往往会做不好，当然，很多理由的，项目时间太紧张了等等，导 致代码很乱，很多重复的地方。其实谁都知道重负不好，不过还好，我们的页面 重复的脚本代码不多（至少一个页面里面，呵呵）。不过，我到是希望，我们不 仅要做到一个页面脚本不重复，而且要做到 N 个页面，脚本要重用。12. Configure ETags 这个好像是服务器端配置的问题，我不太懂，也就不乱说 了，怕把大家给误导了。 总共 12 个， 但是看了 YAHOO 的官方说明， 好像还有一个 AJAX CACHE(AJAX 缓存)。 我倒是觉得这个很重要，随着我们 AJAX 应用的广泛，AJAX 缓存这个概念一定要 时刻在我们脑子中，AJAX 是个好东西，但是重复的数据，无休止的向后台申请， 绝对是个错误（不仅是速度上还是对服务器压力上来说），所以我们就要对我们 已经申请到的数据进行缓存，当第 2 次用到的时候，就直接从缓存中取，不要在 去访问我们宝贵的服务器资源了。其实这个思想不