Yes! B/S !
JustinYoung's Blog
博客园  首页  新随笔    管理  订阅 订阅

如何提高网页的效率(下篇)——Use YSlow to know why your web Slow

你的网页太臃肿!
图:你的网页太臃肿了!
网站最重要的东西是什么?
——内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度!
内容再丰富的网站,如果慢到无法访问也是毫无意义的; SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭(页面效率和搜索蜘蛛之间的关系,需要进一步的确认,此为和上篇保持统一); UE设计的再人性化的网站,如果用户连看都看不到也是空谈。

所以网页的效率绝对是最值得关注的方面。虽然我们在 《如何提高网页的效率(上篇)——提高网页效率的14条准则》提到了如何提高网页效率的14条准则,但是如何知道我们现在的网页的效率到底如何?到底处于怎样一个级别?又有哪些方面做的不够好,需要改进呢?也许,你会说,问一下用户不就知道了吗?但是相比感性比例占据太大的用户感受而言,理性的工具和数据更具有说服力。本篇就将向你介绍一款评测网页效率的工具——YSlow(why slow,这个名字起的太好了)。

yslow,yslow Logo
yslow

YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug 又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。虽然有点绕,但是最终说明的问题是:

  • 很遗憾,微软的IE系列浏览器不能使用YSlow。
  • YSlow只能使用在FireFox浏览器上。
  • 如果要想使用YSlow,那么你必须先安装FireFox。
  • 如果要想使用YSlow,那么你就要安装FireFox上的Firebug插件。

这看上去好像有点令人沮丧,但是事实上它并不像想象中的那么麻烦,只要按照下面的步骤你将能很快的使用YSlow:

  1. 到http://www.mozilla.net.cn/firefox/在新窗口打开此链接 下载最新版的FireFox,并安装它。当然如果你已经安装了FireFox可以跳过此步。
  2. 到https://addons.mozilla.org/en-US/firefox/addon/1843/在新窗口打开此链接 下载最新版的Firebug,并安装它。当然如果你已经安装了Firebug可以跳过此步。
  3. 到https://addons.mozilla.org/en-US/firefox/addon/5369/在新窗口打开此链接 下载最新版的YSlow,并安装它。当然如果你已经安装了YSlow可以跳过此步。

firefox,firebug,yslow
图2:在菜单中先打开Firebug插件
这时候打开FireFox,你将在【工具】菜单中看到【firebug】(如图2)。打开firebug,然后在firebug中点击YSlow菜单,便看进入YSlow的主界面(如图3)。
点击小图查看完整大图
图3:在菜单中先打开Firebug插件(点击小图查看完整大图)

点击【Performace】菜单

YSlow便开始分析此页的效率,并从13个最影响网页效率的方面给出评估(如图4)。

firefox,firebug,yslow
图4:YSlow给出的本页面效率评估

可以看出来,YSlow评估的依据就是我们在 《如何提高网页的效率(上篇)——提高网页效率的14条准则》中提到的前面13条。前面蓝色的字母表示这一条准则的得分。A最高。点击右面的三角形可以得到更多的信息和建议,有些信息里面还有“放大镜” 图标,点击也将展示更为详细的信息和建议。(如图5所示)

firefox,firebug,yslow
图5:YSlow可以给出每条准则的详细评估信息和建议

点击【Stats】菜单

这个视图会告诉你页面的总体统计信息。包括页面大小、css样式表大小、脚本文件大小、总体图片大小、flash文件大小和css中用到的图片文件大小。还会告诉你,哪些东西被缓存了,缓存了多少等等。

firefox,firebug,yslow
图6:【Stats】视图信息

点击【Components】菜单

这个视图是一个页面所有部件的信息列表。从中我们可以得知每个部件的各种详细信息。如:类型、URL、Expires数据、状态、大小、读取时间、ETag信息等等。通过对这个列表的分析,我们就可以知道到底是什么东西最耗费我们的资源,从而有针对性的进行优化。

firefox,firebug,yslow
图7:【Components】视图信息,点击“放大镜”图标我们可以知道更详细的信息(点击小图查看完整大图)

点击【Tools】菜单

【Tools】菜单包含4个子菜单,就是4个实用工具。【JSLine】工具会生成JSLine报表,报表是对本网页中JS脚本的分析报告,包含错误和建议。【ALL JS】工具,将生成本页面所有脚本代码便于阅读和打印的报表页面。【ALL CSS】工具,将生成本页面 所有CSS样式表代码便于阅读和打印的报表页面。【Printable View】将【Performance】和【Stats】视图中的信息生成一份更适合阅读和打印的报表页面。

firefox,firebug,yslow
图8:【Tools】菜单,包含了4个子菜单

点击【Help】菜单

【Help】主要是些常用的帮助途径的入口。从这里你可以很方面的访问YSlow的官方网络和博客。如果你还对YSlow的使用有什么疑惑的话,那么在这里你将获得满意的解答。

firefox,firebug,yslow
图8:【Help】菜单是些常用的帮助入口

后记

“工欲善其事,必先厉其器!”好的工具的确能很大的提高我们的工作效率。但是“阿斗”就算手里拿着“方天画戟”,估计也没有几个人怕他。好的工具是一方面,但是更重要的还是提高我们自身的知识水平。就如同这款YSlow,如果没有 《如何提高网页的效率(上篇)——提高网页效率的14条准则》中的理论知识,工具提供的信息我们看到的可能只是表面,就算看懂了数据,我们也很难知道对应的手段和措施。壮汉拿厉斧,这样伐木才能又快又轻松。

关于本文的讨论

博客园【web标准设计小组】关于本文的讨论
Tag标签:yslow,yslow使用,yslow教程,网页打开速度慢,开网页速度慢,网页速度慢,网页打开速度很慢,网页打开速度,提高网页浏览速度,浏览网页速度慢,网页打开速度太慢,打开网页的速度慢,如何提高网页的效率,如何提高效率
posted @ 2007-11-28 08:59 阿一(杨正祎) 阅读(6175) 评论(44)  编辑 收藏 网摘
发表评论
  回复  引用  查看    
2007-11-28 09:05 | flyingchen      
沙发一次!
  回复  引用    
2007-11-28 09:23 | 路过 [未注册用户]
多谢楼主,好东西!
  回复  引用  查看    
2007-11-28 09:33 | 沙加      
很好,一直找不到一个合适的工具来测试浏览器端的缓存. 在别人网站上测试呢又不太方便,还要传上去.
  回复  引用  查看    
2007-11-28 09:36 | 木野狐(Neil Chen)      
good
  回复  引用  查看    
2007-11-28 10:48 | bullion      
再次为楼主打气来了, 楼主辛苦了, 党和人民感谢你

楼主有没有基于IE的调试插件介绍一下
  回复  引用    
2007-11-28 11:05 | 婚纱 [未注册用户]
呵呵,学到了.
  回复  引用  查看    
2007-11-28 11:29 | Klesh Wong      
@bullion
IE 来来去去好像就一个IE Developr Toolbar
  回复  引用  查看    
2007-11-28 11:39 | 杨正祎      
@bullion
谢谢。关于ie下的工具,可以看这个:
http://www.cnblogs.com/JustinYoung/archive/2007/04/19/719756.html
  回复  引用  查看    
2007-11-28 11:41 | 杨正祎      
@Klesh Wong
的确像你说说的。就一个IE Developr Toolbar好用。不过,想使用ie内核的第三方浏览器,也有一些相关插件的。但是都不如IE Developr Toolbar好用。
  回复  引用  查看    
2007-11-28 11:41 | 杨正祎      
@婚纱
相互学习,共同进步。
  回复  引用  查看    
2007-11-28 12:12 | 斧头帮少帮主      
请问一下,你那些像撕扯过的图片是怎么弄的?
  回复  引用    
2007-11-28 12:22 | zzz [未注册用户]
不支持Firefox3.0版,Firebug在Console标签下的Profile按钮,可以对每个函数进行分析,也是很不错的。

偶的2008 IE没法用IE Developr Toolbar,只能用Web Development Helper的只读的Dom Inspector
  回复  引用  查看    
2007-11-28 12:54 | 阿不      
这个是很不错的工具。
  回复  引用  查看    
2007-11-28 12:56 | 阿不      
已经把它安装起来了。
  回复  引用  查看    
2007-11-28 13:32 | 杨正祎      
@zzz
FF下面这类的工具,的确要多一些。firebug是个极品。
  回复  引用  查看    
2007-11-28 13:32 | 杨正祎      
@斧头帮少帮主
抓图工具,SnagIt。
  回复  引用    
2007-11-28 14:06 | good [未注册用户]
非常不错
  回复  引用  查看    
2007-11-28 15:31 | Leepy      
谢谢!很喜欢阅读您的文章!
  回复  引用  查看    
2007-11-28 17:21 | 杨正祎      
@Leepy
感动,谢谢。
  回复  引用  查看    
2007-11-28 17:21 | 杨正祎      
@good
谢谢阅读。
  回复  引用    
2007-11-28 20:17 | 飞雪尔 [未注册用户]
IE Developr Toolbar的功能和Firebug相距甚远,完全不是一个级别的插件。
毕竟fx是开源并且可扩展的,插件开发比ie方便的多了。
  回复  引用  查看    
2007-11-28 22:50 | Jeffrey Zhao      
@飞雪尔
其实插件功能都足够,只是IE下太多收费插件了
  回复  引用    
2007-11-28 22:57 | 小临时工 [未注册用户]
YSlow 似乎不兼容 Firefox/2.0.0.9
郁闷
  回复  引用  查看    
2007-11-28 23:06 | 杨正祎      
@小临时工
可以兼容ff2的,我的就是哦。没有问题的。
  回复  引用  查看    
2007-11-29 08:05 | BlackCat      
好,不错
  回复  引用  查看    
2007-11-29 10:22 | Enzo      
@杨正祎
没想到SnagIt 还有这个特效
  回复  引用  查看    
2007-11-29 13:29 | 杨正祎      
@ Enzo
SnagIt可以对抓到图进行简单的后期处理。
  回复  引用  查看    
2007-11-29 14:56 | 沙加      
联想到用这个测试MS Atlas生成的脚本文件,也就是WebResource.axd(大概是这个)? xxx这种东西,看起来好象都不能被缓存,即使在web.config里面把Cache打开也是一样, 怪不得那么慢,还是不用为好,现在改用jQuery了~~~
  回复  引用    
2007-12-03 13:28 | woncs [未注册用户]
关注您的BLOG很久,在这里学到了很多,也进步了许多,谢谢!

另,可否借贵BLOG问几个问题:

1.网页的head和foot整站调用,include iframe js三种调用方式哪种更有“性价比”,相对而言速度影响小,而且也不影响搜索引擎?

2.页面上的FLASH,直接放入<object>代码和JS输出的方式,采用哪种为佳?

3.把握不好标签何时何用,写的整页只有DIV UL LI SPAN A五种标签,这样合理不合理?

请不吝赐教,谢谢!
  回复  引用  查看    
2007-12-03 22:59 | 杨正祎      
@woncs
1:都不好,而应该用模板定这些内容,vs2005以上版本可以用masterpage
你所提到三种方法,SEO都十分不利。
2:object好像,至少我感觉。
3:显然不合理。你需要了解每个标签的语义,然后在合适的时候用它们。现在好像还没有什么书能明确的说明什么标签,什么语义。至少,我还没有见过。虽然有很多类似的,但是都是一些过时的说法。最好的办法是,网上的积累,和自己的理解。
  回复  引用    
2007-12-04 10:39 | woncs [未注册用户]
@杨正祎

感谢指点!
  回复  引用  查看    
2007-12-24 21:25 | volnet(可以叫我大V)      
昨晚才知道这个软件,一个同事从csdn大会听回来的,看了一下淘宝和网易的得分,真不知道说什么好……
昨晚的测评结果居然和今天早上的结果大相径庭,郁闷掉……
  回复  引用    
2007-12-27 13:33 | 徐迎霞 [未注册用户]
刚开始关注这个软件,楼主讲的很好,偶也学的很快,谢谢了~
看了楼主网站的得分,很不错哈~
http://www.cnblogs.com/
  回复  引用  查看    
2008-02-19 20:25 | 笼民      
2.页面上的FLASH,直接放入代码和JS输出的方式,采用哪种为佳?

2:object好像,至少我感觉。

不对。看这里:
http://www.adobe.com/devnet/activecontent/articles/devletter.html
  回复  引用  查看    
2008-02-20 10:09 | 杨正祎      
@笼民
谢谢指点,我会过去看看。
  回复  引用  查看    
2008-02-20 10:09 | 杨正祎      
@笼民
谢谢指点,我会过去看看。
  回复  引用    
2008-03-26 16:30 | 草根网 [未注册用户]
好文,收藏至20ju.com
  回复  引用    
2008-04-16 13:25 | 苏州婚纱 [未注册用户]
如果按照这个标准来做的话,恐怕世界上有90%的的网页都不合格哦.:)
  回复  引用    
2008-05-03 00:26 | 楷子狐 [未注册用户]
非常好

很好,很强大!
  回复  引用    
2008-05-03 22:26 | liangjianzhao [未注册用户]
这个工具能区分 网络、服务器、以及页面全部在客户端展现的时间么?
  回复  引用  查看    
2008-08-09 14:07 | 爱在戏院前      
很遗憾的是FF跟IE展现的不一致……
我的网站在FF下比IE要快个30%的样子……
新用户注册  刷新评论列表  

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看

  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-11-28 09:17 编辑过
Google站内搜索


China-pub 计算机图书网上专卖店!6.5万品种 2-8折!
近千种 9-95 新二手计算图书火热销售中!

相关文章:

相关链接:



最新IT新闻:
微软:不裁员也不削减研发开支
2008年11月22日科技博客精选
诺基亚将支持Lotus Notes 和黑莓争夺市场
Mozilla公布去年收入报告
2008年11月21日科技博客精选
 
Copyright ©2008 阿一(杨正祎)

姓名:杨正祎(阿一)
程序员,专注于B/S模式的项目开发,擅长于Web标准页面设计,现就职于上海沪江网。

第三届 D2 前端技术论坛 (上海)

2008年3月

手里拿的是刚挖出来的毛竹笋

2007年6月

笑对未来

2006年2月

丈母娘家的狗

2005年4月

社会,我要进入你!

2004年11月

忆当年也是处男一个
随笔

阅读最新的随笔文章 Rss订阅此栏目 开心、困恼、畅快、郁闷,灵感、发现、思考,回忆、展望、幻想。想法与思维的轨迹,展现自己的人生经历。生活上,工作上,所有的,都想与他人分享。RSS订阅我的随笔,展现一个真实的自我。

JavaScript

阅读最新的JavaScript文章 Rss订阅此栏目JavaScript是B/S开发中必不可少的技能,利用JavaScript能够实现很多事情,现在Ajax的火热更是体现了JavaScript的无限可能性……RSS订阅此栏目,和我一起在此领域一起进步。

Web标准设计

阅读最新的CSSWeb标准文章 Rss订阅此栏目由于浏览器标准的不统一,非Web标准网站所展现出来的问题已经越来越严重,如何让尽可能多的浏览器能够正常浏览我们网站?RSS订阅此栏目,让我们一起在Web标准的道路上前进。

Ajax & UE

阅读最新的CSSWeb标准文章 Rss订阅此栏目网站的黏粘力第一要靠内容,第二要靠良好的用户体验度。如何让浏览者获得所需信息的同时,有更好的体验度已经是一个好站点应该考虑的问题。 RSS订阅此栏目,让我们一起在为客户着想。

ASP.Net

阅读最新的CSSWeb标准文章 Rss订阅此栏目在B/S开发模式的舞台上,微软公司的MircoSoft Visual Studio 200X无疑是把最耀眼的利器,如何把这把斧头打磨锋利,达到事半功倍?RSS订阅此栏目,让我们一起打造最尖锐的工作利器。

网站推广

阅读最新的CSSWeb标准文章 Rss订阅此栏目如何让更多的人访问我们的网站,推广网站的道路上如何主动出击。网站制作时要注意哪些问题,如何做到搜索引擎的优化(SEO)。 RSS订阅此栏目,让我们一起把“香酒”抬出“巷子”。

杂7杂8

阅读最新的CSSWeb标准文章 Rss订阅此栏目Select …… Case …… Default ……。这里便是Default里面的东西啦。杂7杂8的东西,就像跳蚤市场一样。说不定就能淘到自己的所需。RSS订阅此栏目,一起在跳蚤市场中寻找宝贝。

聚合与订阅
抓虾
google reader
鲜果
哪吒
有道
转载声明
创作共用版权协议

YES!B/S! 所有文章遵循创作共用版权协议,要求署名、非商业、保持一致。在满足创作共用版权协议的基础上可以随意转载,但请以超链接形式注明出处。

和我联系
给我短信
给我电邮
友情链接

订阅赵劼的博客老赵点滴 TerryLee'sBlogTerryLee

订阅ANYTAO的博客ANYTAO 订阅flyingchen的博客flyingchen

订阅jillzhang的博客jillzhang Blom LogsBlom Logs

订阅棕熊的博客棕熊的博客 订阅张子阳的博客张子阳

跳转到阿一试验田阿一试验田 跳转到巧虎视频巧虎视频

搜索

 

随笔分类(52)

  • IE7的web标准之道(9)
  • Web标准(20)
  • 阿一web标准学堂(7)
  • 恶俗歌曲分享系列(9)
  • 系列文章(7)

积分与排名

  • 积分 - 859584
  • 排名 - 16

最新评论

1. 老兄 急需你的帮助啊
我想制作个关于物流的搜索引擎
需要你的帮助啊 这个是我的QQ:46983574
拜托你加下~
麻烦了 (陈禹行)
2. re: 虚拟村庄3图文攻略(附突发事件和游戏下载)
怎么去弄三个小人把梯子修好啊!!我怎么也弄不好呢
(12)
3. re: 深度金山词霸2009破解版 (牛津版)(附绿色完整破解版和破解补丁下载)
--引用--------------------------------------------------yuyunhong: 破解补丁被赛门铁克杀掉了怎么办?现在无法使用DXict.exe.直接被... (阿一(杨正祎))
4. re: 深度金山词霸2009破解版 (牛津版)(附绿色完整破解版和破解补丁下载)
破解补丁被赛门铁克杀掉了怎么办?
现在无法使用DXict.exe.直接被赛门铁克当成病毒杀了,如何办? (yuyunhong)
5. re: 联想系列笔记本无法更改电源使用方案解决办法(附图解)
联想的这个功能实在太垃圾了,还得取消掉,又这么费事,搞得跟行业机密似的。垃圾垃圾。 (HH12345)

阅读排行榜

  • 1. 非常恶俗地分享一首歌曲(群星·北京欢迎你)【附视频】(55379)
  • 2. FireFox3推荐安装附加组件Top10(附官方主页和下载地址)(13962)
  • 3. 强烈向喜欢玩魔兽TD的朋友推荐这个小游戏(附下载)(12354)
  • 4. 使用EditPlus技巧,提高工作效率(附英文版、自动完成文件、语法文件下载)(12200)
  • 5. IE6和IE7共存方法(别人是别人的,我是我的)(10187)
  • 6. 如何提高网页的效率(上篇)——提高网页效率的14条准则(8798)
  • 7. 利用《死亡打字员》提高程序员的命根子技能——打字速度(附游戏下载)(8324)
  • 8. IE多版本共存的解决方案——IETester(推荐)(8267)
  • 9. IE6、IE7、IE8共存方法(8105)
  • 10. 全国哀悼日14点28分上海悲鸣的声音(附音频)(7558)

评论排行榜

  • 1. 博客园T恤内部泄漏版(附图)(148)
  • 2. 今天向我女朋友求婚了~(139)
  • 3. 使用EditPlus技巧,提高工作效率(附英文版、自动完成文件、语法文件下载)(110)
  • 4. 如何提高网页的效率(上篇)——提高网页效率的14条准则(90)
  • 5. 强烈向喜欢玩魔兽TD的朋友推荐这个小游戏(附下载)(90)
  • 6. 我的2007,拐点与蜕变(86)
  • 7. I hate English! 囧rz~ 但是我想成为高高手。(80)
  • 8. FireFox3推荐安装附加组件Top10(附官方主页和下载地址)(78)
  • 9. 非常恶俗地分享一首歌曲(群星·北京欢迎你)【附视频】(78)
  • 10. 《播客》项目总结——web标准页面设计方面(74)
51count统计