网站最重要的东西是什么?

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

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

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可以跳过此步。

图2:在菜单中先打开Firebug插件

这时候打开FireFox,你将在【工具】菜单中看到【firebug】(如图2)。打开firebug,然后在firebug中点击YSlow菜单,便看进入YSlow的主界面(如图3)。


图3:在菜单中先打开Firebug插件(点击小图查看完整大图)

点击【Performace】菜单

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

图4:YSlow给出的本页面效率评估

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

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

点击【Stats】菜单

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

图6:【Stats】视图信息

点击【Components】菜单

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


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

点击【Tools】菜单

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

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

点击【Help】菜单

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

图9:【Help】菜单是些常用的帮助入口

后记

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

转载于:https://www.cnblogs.com/wliang22/archive/2008/12/15/1355292.html

转:如何提高网页的效率(下篇)——Use YSlow to know why your web Slow相关推荐

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

    网站最重要的东西是什么? --内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度! 内容再丰富的网站,如果慢到无法访问也是毫无意义的: SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭(页 ...

  2. 如何提高网页的效率(二)

    如何提高网页的效率(下篇)--Use YSlow to know why your web Slow 网站最重要的东西是什么? --内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度! 内 ...

  3. 评测网页效率的工具—YSlow

    2019独角兽企业重金招聘Python工程师标准>>> [转]评测网页效率的工具-YSlow 本文转自:http://www.yuloo.com/news/2008-06-04/89 ...

  4. 测试网页速度性能的利器-Yslow和page speed

    Yahoo的YSlow大家应该都比较熟悉了,那是找出我们网页为什么缓慢的利器.其实Google也有类似的FireFox插件,名字叫做"Page Speed",虽然名字比YSlow逊 ...

  5. 如何提高CSS网页渲染效率

    如何提高CSS网页渲染效率?CSS学习过程中需要关注的细节之处非常多,而这些细节之处也是影响CSS的网页渲染效率的重要因素,黑猫整理了由前辈们提出的提高CSS网页渲染效率的方法,一起来学习一下. 1. ...

  6. 提高php编程效率的小结

    1.如果将类的方法定义为:static,它的执行效率将提升为近4倍 2.php中数组的元素调用,使用关联数组优于索引数组 3.使用each快于print. 4.尽量使用foreach()替代for() ...

  7. 提高PHP编程效率的53个要点(转)

    核心提示:用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数&q ...

  8. 记住这53个要点提高PHP编程效率

    2019独角兽企业重金招聘Python工程师标准>>> 用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo ...

  9. 提高PHP编程效率的53个要点

    *用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数" ...

最新文章

  1. 如何用计算机对cad的草图,AutoCAD2020图纸如何导入su草图大师软件?
  2. php+json对象格式,PHP 创建对象来输出 JSON 格式
  3. 不使用输入框如何实现下拉_如何利用Axure实现下拉子菜单?
  4. ARM裸机工作笔记0001---ARM那些事
  5. PADS无模命令总结
  6. 走进我的交易室01_引子
  7. android mysql sqlite_android内嵌的SQLite创建数据库,在哪里查看?
  8. OpenGL 概念整理
  9. 自制病毒——控制桌面鼠标以及开关机
  10. [BZOJ4199][NOI2015]品酒大会(后缀数组+单调栈+ST表)
  11. 大智慧策略投资终端_智慧历史:不需要宏伟的策略,只需开放
  12. Java基础编程实现2-面向对象-类
  13. 数据管理平台与数据治理平台的区别和联系
  14. 【03】品优购电商项目:00-品优购项目代码规范
  15. 免安装版tomcat 开机自启动设置
  16. (OK) dnf - Fedora23——删除多余不用的内核
  17. 拉勾网职位数据爬取与分析(一)
  18. A*,那个传说中的算法
  19. 吃鸡无线重新链接服务器,吃鸡跟新时发生错误 无法连接更新服务器 | 手游网游页游攻略大全...
  20. CSS实现PNG图片背景透明效果

热门文章

  1. C语言文件打开模式(r/w/a/r+/w+/a+/rb/wb/ab/rb+/wb+/ab+)浅析
  2. 手机三维模型产品Web3D可视化vr线上展示
  3. Python基础学习(第二节 下)
  4. html显示queryset,Django用queryset将对象从视图返回到HTML?
  5. jupyter notebook无法自动跳转浏览器
  6. Cannot find module ‘fs/promises‘
  7. 【计算机专业毕设之基于python的nba爬虫数据可视化分析系统】
  8. DDD—领域模型映射代码结构
  9. H.264的DTS、PTS、frame_num、poc
  10. 联想微型计算机c200电脑烂了,联想C200一体电脑基本配置