`

YSlow工具的使用心得

阅读更多

 

YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化

 

使用Yslow了解为什么你的网站运行速度慢

-------------------------------------------------------------------------------------------------

Yslow安装说明

安装是很简单的了,不过还是简单说一下过程吧
1.到https://addons.mozilla.org/en-US/firefox/search?q=YSLOW&cat=all 下载FireFox的Add-in
这里提供下载
2.打开FireFox,把刚才那个东东拉到FireFox中,提示是否安装,当然是安装了
3.安装完成后重启FF,再重动时可以看到右下角有Yslow的图标,点击图标,再点击弹出框里的Preformance tab。可以看到有对网站的评分
----------------------------------------------------------------------------------------------------

仔细研究了下YSlow跌评分规则。

主要有12条:

1. Make fewer HTTP requests  尽可能少的http请求。。我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可怕。思考了下,为什么把这个三种请求过多列为对页面加载的重要不利因素呢,而过多的IMG请求并没有列为不利因素呢?

发现原来这些请求都是可以避免的。

15个JS和3个CSS完全可以通过特殊的办法进行合并(这个技术部已经帮我们解决了,实在是太感谢了,嘿嘿。),这样合并以后,一般情况下页面上只会出现一个JS和一个CSS(对JS的封装得有一定的要求)。

但是47个CSS background images请求改怎么解决呢?为什么页面上的纯IMG请求时合理的,而CSS background images请求过多就是不利因素了呢。这个我想了很久,总算明白,原来是这样的:

一般页面上的ICON,栏目背景啊,图片按钮啊,我们都会用图片CSS背景来实现,而一般这个图片CSS背景用到的图片都是比较小的,所以完全可以 把这些图片合并成一个相对比较大的图片,这样页面上只会出现一个CSS background images请求,最多也就2-3个。后来仔细看了下雅虎美国的页面,他们的确也是这样做的,虽然这样做需要花一定的时间来有规则的合并这些ICON,栏 目背景,图片按钮,以方便CSS调用,但是这样做绝对是合算的,而且是有必要的,YSlow也是极力推荐的。

2. Use a CDN  这 项我们的评分是F级,最低。说实在的,我刚开始什么是CDN都不知道。后来查了GOODLE才知道。CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络”边缘”,使用户可 以就近取得所需的内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均 等原因所造成的用户访问网站响应速度慢的问题。

看来上述的解释后,基本上明白了CDN是怎么回事,后来咨询了下中文站点SA,得知我们网站目前的确还没有做CDN的优化,但是据说我们有更加先进 的技术来解决类似的问题(具体什么技术那就保密了),但是毕竟CDN也是个相当不错的技术,所以在我们先进技术的基础上在做CDN优化,肯定比现在更好, 嘿嘿。据说SA明年会做几个点的CND。

3. Add an Expires header  设置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中.

其实我们网站也做了这个优化,至少图片在这个上做过优化,但是没有做完全。我们的CSS和JS都还没有做过优化,倒是外部引入的一个广告JS做了, 呵呵。其实设置过期的HTTP Header 更应该做在脚本, 样式表, Flash上.不过据说这个SA也是没有做的,但是有一定的风险,因为JS和CSS是有一定的逻辑,如果服务器端和客户端都存在缓存的话,万一出了什么问 题,对我们以后查找问题的所在和增加难度,不过我想两者中是可以权衡和并存的。
4. Gzip components   对 我们的页面内容进行Gzip格式的压缩,Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常 大,一般压缩率为85%,就是说服务器端100K的页面可以压缩到25K左右的Gzip格式的数据发给客户端,客户端收到Gzip格式的数据后自动解压缩 后显示页面。

这点我们网站基本上是100%做到了,但是我们这项的评分并没有达到想象中的A级,原因是出在我们的外部链接,比如我们首页,有外部的广告投放JS,这个JS说拥有的网站是没有做过GZIP优化,连累了我们网站,所以我们也只有B,或者C级:(

 

5. Put CSS at the top  把CSS外部链接放到页面的顶部。

其实这个原则我们一般都遵守的,如果把CSS外部链接作为逻辑的一部分出现在页面头部以下,我个人觉得这个本身就是个错误。还好,我们的页面基本上 都做到了,可是有些页面比如LIST页面,还是出现了和逻辑挂钩的CSS链接,原因是为了解决一些本来就不合理的产品逻辑。所以,我们WEB前端工程师有 义务杜绝这些不合理的产品逻辑破坏我们的页面结果及页面加载速度,不能为了实现而实现。

 6. Put JS at the bottom  把Javascript脚本尽量放到页面底部加载。

一开始为以为Javascript脚本尽量放到页面底部加载,是指所有的JS脚本都要放到底部,后来才发现,并不完全是这样,这里所指的脚本是指那 些在加载过程中要执行的脚本,所以一般的处理办法还是页面头部引入JS链接,页面底部执行JS脚本程序。为什么要这么做呢?呵呵,其实很简单,为了实现最 大的下载并行,页面加载初期做的事,最好只有下载,HTML的下载,CSS的下载,JS的下载,等下载完成后再去实现页面渲染,JS脚本运行。这个方面我 们还需要努力,很多页面我们在加载过程中运行了一部分脚本,或许是为了实现一些功能,没有办法,不过或许有更好的办法来替代呢。。。

7. Avoid CSS expressions 避免CSS表达式

其实在CSS中运行表达式和页面加载中运行大量的JS脚本差不多,或许还更慢,而且还不兼容,虽然可以使我们在页面逻辑简单不少,但是我们完全可以抛弃之。这个点,我们的页面基本上都做到了。不过说实话,CSS表达式,嘿嘿,我以前还不知道有这么回事。惭愧。哈哈。

9. Reduce DNS lookups  尽可能少的DNS查找。

这项我们做的不是很好。D级,有9个域名,一般不要超过4个。不过这个主要是服务器架构上的问题,我们也无能为力,现在单单首页的广告域名就有好几 个,好耶的广告域名,雅虎的广告域名,淘宝店广告域名,打点的域名。如果去掉这些,我们其实还是够用的,一个主域名,一个图片的,一个STYLE的,最多 加上IFREAM的刚好4个。

10. Minify JS  对Javascript代码进行压缩。

这点我很早以前就对此关注了,也找到了一个不错的压缩工具,yuicompressor,雅虎美国开发的JAVA压缩包 yuicompressor.jar。压缩的相当完美,不仅把代码间的空格换行给去除掉了,而且对变量名,北部方法名都进行的简化,无意中实现了混淆脚本 的作用。现在我们仅仅做到了JS合并,并没有对齐进行压缩,如果我用yuicompressor手工的去压缩,虽然实现了JS压缩,但是给我们自己的维护 量增加了一倍,因为我们需要维护2套JS脚本,一套是压缩前的(调试用的),一套是压缩后(发布到网上的),而且要保证2套代码一致。所以最完美的做法是 在发布的时候实现JS脚本合并,并对其用yuicompressor进行压缩,然后发布到晚上,把关键点移到发布的时候,这样我们只需要关心一套JS脚本 (发布前的版本)。而且我觉得这个方案完全是行动通的。

11. Avoid redirects  避免重定向(跳转)

怎么理解这点呢?

我们经常遇到的一种做法,注册成功后,旺旺会有一个页面提示“你已经注册成功,3秒后将自动跳转到XX页面”。我就觉得很奇怪,你为什么不直接跳转到该去的页面?还有一种,我们大家非常熟悉,一般我们页面的链接都写成:http://china.alibaba.com 或者http:// china.alibaba.com /,有人会问,有区别吗?我明确的告诉大家,有!服务器如果接收到的URL是http://china.alibaba.com ,它会自动重新定向到http:// china.alibaba.com/ ,虽然最后都打开了阿里巴巴中文站的首页,但是前者比后者多走了一步,重定向,显然多多少少浪费了一定的时间。所以以后我们加URL链接的时候,别忘了把最后的“/”给加上去。

12. Remove duplicate scripts   去除重复的脚本

这个其实没有什么好说的,大家都应该毫无条件的去遵守,但是越是明显,越是简单的事,我们往往会做不好,当然,很多理由的,项目时间太紧张了等等, 导致代码很乱,很多重复的地方。其实谁都知道重负不好,不过还好,我们的页面重复的脚本代码不多(至少一个页面里面,呵呵)。不过,我到是希望,我们不仅 要做到一个页面脚本不重复,而且要做到N个页面,脚本要重用。

   

13. Configure ETags   这个好像是服务器端配置的问题,我不太懂,也就不乱说了,怕把大家给误导了。

总共13个,但是看了YAHOO的官方说明,好像还有一个AJAX CACHE(AJAX 缓存)。我倒是觉得这个很重要,随着我们AJAX应用的广泛,AJAX 缓存这个概念一定要时刻在我们脑子中,AJAX是个好东西,但是重复的数据,无休止的向后台申请,绝对是个错误(不仅是速度上还是对服务器压力上来说), 所以我们就要对我们已经申请到的数据进行缓存,当第2次用到的时候,就直接从缓存中取,不要在去访问我们宝贵的服务器资源了。其实这个思想不仅仅适合 AJAX,在所有有数据复用的应用中都应该考虑到。

YSLOW就分析到这里完毕了,或许有些地方分析的不是很正确,或许有人分析的比我更早,更好,但是这些的确是我从工作中去积累,发现的,并很多都 实际应用到工作中去了,顺便说下,嘿嘿,LIST页面进行优化后,在0.92版本的YSLOW评分将达到76分,甚至80分,相当于0.8版本的90分以 上。不过评分毕竟是评分,关键还是速度。

分享到:
评论

相关推荐

    使用YSlow工具提高网页的效率

    【YSlow工具详解】 YSlow是由Yahoo开发团队推出的一款基于Firefox浏览器的插件,它依赖于另一款名为Firebug的扩展。Firebug是一款强大的Web开发工具,允许开发者深入检查HTML、CSS、JavaScript以及网络请求等方面。...

    yslow前端性能测试工具

    使用时,只需在浏览器中打开yslow插件,输入要测试的网页URL,工具就会自动分析并显示结果。 **总结** yslow作为一款强大的前端性能分析工具,为优化网站速度提供了科学的依据和实用的建议。通过深入理解并应用...

    YSlow使用指南最新2

    ### YSlow 使用指南详解 #### 一、简介 YSlow是一款由Yahoo!开发的网页性能分析工具,旨在帮助开发者优化网页加载速度。它基于一系列经过验证的高性能网页规则,通过评估网页的各项指标来提供针对性的优化建议。...

    [优]Yslow网站前端性能测试工具安装与使用简介

    ### Yslow网站前端性能测试工具安装与使用简介 #### 一、引言 在现代互联网应用开发中,网站性能优化已成为提升用户体验的关键因素之一。Yslow是一款由Yahoo!开发的前端性能测试工具,旨在帮助开发者识别并解决...

    yslow-3.1.0-fx

    Firebug是一款强大的Web开发工具,可用来调试HTML、CSS、JavaScript等,与yslow结合使用,可以提供更全面的性能评估。 安装过程如下: 1. 下载yslow-3.1.0-fx.xpi文件。 2. 打开Firefox浏览器,确保已开启"允许安装...

    yslow-3.1.8-fx最新版.rar

    YSLOW和Firebug,这两个工具在Web开发和优化领域中堪称经典组合,尤其对于Firefox浏览器用户来说,它们是提升网页性能不可或缺的工具。yslow-3.1.8-fx最新版.rar这个压缩包文件为我们提供了YSLOW的最新版本和适用于...

    yslow3_1_2

    **yslow3_1_2** 是一个针对Web前端性能优化的浏览器插件,它为开发者和测试人员提供了一个方便的工具,以便于评估和改进网页加载速度。这个插件基于YSlow规则,由Yahoo!开发,旨在帮助用户遵循最佳实践来提升网页的...

    yslow-3.0.9

    网站性能工具Yslow

    YSlow 2.0.0b6

    YSlow 2.0.0b6是前端开发者和网页优化人员的得力工具,它通过深入的分析和实用的建议,帮助提升网页性能,从而提高用户的浏览体验。尽管这个版本主要针对的是较旧的Firefox版本,但其核心理念和方法仍然适用于现代...

    FireBug1.9.1+yslow3.1.0

    FireBug和YSlow是Web开发和优化领域中的两个重要工具,尤其对于前端开发者而言,它们是不可或缺的利器。本文将详细介绍这两个工具的功能、用途以及如何使用它们来提升网页性能。 **FireBug** FireBug是一款集成在...

    yslow for firefox

    yslow for firefox v18

    yslow-1.0.2-fx

    yslow,用于检测网站性能,帮助开发人员进行性能调优的优秀工具

    firebug+YSlow

    Firebug和YSlow是Web开发和优化领域中的两个重要工具,它们在前端性能分析和调试方面发挥着关键作用。火狐浏览器的扩展Firebug是一款强大的HTML、CSS、JavaScript调试工具,而YSlow则是Yahoo!开发的一款性能分析插件...

    页面性能测试Showslow+Yslow

    本文档主要介绍了Showslow和Yslow的部署、使用方法,为需要进行页面性能测试的同僚提供入门帮助,希望能对各位有所帮助。

    firefox-firebug-yslow.zip

    总的来说,"firefox-firebug-yslow.zip"提供的工具集是前端开发者不可或缺的利器,它们将助力开发者在网页开发过程中实现更高的效率和更优的性能。无论是初学者还是经验丰富的专业人士,都可以从中受益,提升自己的...

    YSlow

    yahoo性能中心总结的高性能网站设计的14条规则,这个工具就是用来根据这些规则对你的网站进行测试评分的,下载后直接拖到firefox里就可以自动安装了,但是先要装另外一个插件firebug,在我上传的资源列表里可以找到

    yslow-3.1.8-fx.xpi

    YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。yslow3.18支持firefox30版本

    firefox基于firebug的插件yslow-3.1.0

    YSlow是Yahoo发布的一款基于FireFox的插件。 安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装。 YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。 YSlow可以...

Global site tag (gtag.js) - Google Analytics