如何提高网页的效率(二)
如何提高网页的效率(下篇)——Use YSlow to know why your web Slow
网站最重要的东西是什么?
——内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度!
内容再丰富的网站,如果慢到无法访问也是毫无意义的; SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭(页面效率和搜索蜘蛛之间的关系,需要进一步的确认,此为和上篇保持统一); UE设计的再人性化的网站,如果用户连看都看不到也是空谈。
所以网页的效率绝对是最值得关注的方面。虽然我们在 《如何提高网页的效率(上篇)——提高网页效率的14条准则》提到了如何提高网页效率的14条准则,但是如何知道我们现在的网页的效率到底如何?到底处于怎样一个级别?又有哪些方面做的不够好,需要改进呢?也许,你会说,问一下用户不就知道了吗?但是相比感性比例占据太大的用户感受而言,理性的工具和数据更具有说服力。本篇就将向你介绍一款评测网页效率的工具——YSlow(why slow,这个名字起的太好了)。
yslow
YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug 又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。虽然有点绕,但是最终说明的问题是:
- 很遗憾,微软的IE系列浏览器不能使用YSlow。
- YSlow只能使用在FireFox浏览器上。
- 如果要想使用YSlow,那么你必须先安装FireFox。
- 如果要想使用YSlow,那么你就要安装FireFox上的Firebug插件。
这看上去好像有点令人沮丧,但是事实上它并不像想象中的那么麻烦,只要按照下面的步骤你将能很快的使用YSlow:
- 到http://www.mozilla.net.cn/firefox/ 下载最新版的FireFox,并安装它。当然如果你已经安装了FireFox可以跳过此步。
- 到https://addons.mozilla.org/en-US/firefox/addon/1843/ 下载最新版的Firebug,并安装它。当然如果你已经安装了Firebug可以跳过此步。
- 到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的使用有什么疑惑的话,那么在这里你将获得满意的解答。
图8:【Help】菜单是些常用的帮助入口
后记
“工欲善其事,必先厉其器!”好的工具的确能很大的提高我们的工作效率。但是“阿斗”就算手里拿着“方天画戟”,估计也没有几个人怕他。好的工具是一方面,但是更重要的还是提高我们自身的知识水平。就如同这款YSlow,如果没有 《如何提高网页的效率(一)——提高网页效率的14条准则》中的理论知识,工具提供的信息我们看到的可能只是表面,就算看懂了数据,我们也很难知道对应的手段和措施。壮汉拿厉斧,这样伐木才能又快又轻松。
如何提高网页的效率(二)相关推荐
- 如何提高网页的效率(下篇)——Use YSlow to know why your web Slow
网站最重要的东西是什么? --内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度! 内容再丰富的网站,如果慢到无法访问也是毫无意义的: SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭(页 ...
- 转:如何提高网页的效率(下篇)——Use YSlow to know why your web Slow
网站最重要的东西是什么? --内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度! 内容再丰富的网站,如果慢到无法访问也是毫无意义的: SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭(页 ...
- SQL Server提高事务复制效率优化(二)快照初始化优化
SQL Server提高事务复制效率优化(二)快照初始化优化 测试数据表量1500w+,使用初始化默认的快照代理参数,复制的三个过程包括快照初始化,订阅初始化和数据修改复制,主要对快照代理.分发代理. ...
- 如何提高CSS网页渲染效率
如何提高CSS网页渲染效率?CSS学习过程中需要关注的细节之处非常多,而这些细节之处也是影响CSS的网页渲染效率的重要因素,黑猫整理了由前辈们提出的提高CSS网页渲染效率的方法,一起来学习一下. 1. ...
- 【PHP】如何提高网页加载速度?
[php]如何提高网页加载速度? 1.减少页面请求: 从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少. 之前我下载163邮箱 ...
- 推荐一些提高学习工作效率的电脑工具软件(一)
工欲善其事,必先利其器,在电脑上安装并使用合适的工具软件,可以大大提高学习工作效率,下面就推荐一下个人电脑上安装的工具. 电脑的操作系统是windows 10. 一.everything 强烈推荐必装 ...
- 开源作品:引流宝!集活码、短网址等功能为一体的工具!致力于提高引流效率,减少资源流失!
前言 开发这款工具的初衷是为了辅助自己的工作,提供自己日常工作的效率,自己使用了一段时间下来觉得很有用,于是完善之后开源.如今已经开源近2年,第一个版本是在2020年9月份开源,收获了390个star ...
- 如何提高App的邀请效率
本文笔者将对邀请机制中的邀请流程和形式做分析,讲述:如何提高App的邀请效率? App 邀请机制是每个产品几乎必做的功能点,它一般以两种形式存在:一是作为常置功能用于推荐,二是作为裂变活动用于邀请. ...
- 上海瀚示医药拣货标签在医药电商仓库改造中的解决方案—— 提高拣货效率
一.产品介绍 项目核心产品为自主知识产权的智能电子货位标签系统(包含硬件产品.软件系统及增值服务).系一组安装在货架储位等载体上的电子设备,包含显示屏和信号灯按钮.此标签可彩屏显示.信号灯按钮提示等操 ...
最新文章
- poj 2104: K-th Number 【主席树】
- c++ 把数字和中文字符分开_C语言中的字符常量与变量
- 基于docker部署的微服务架构(四): 配置中心
- MySQL 索引 :哈希索引、B+树索引、最左前缀匹配规则、全文索引
- 养心灵,才能美容颜,拥有好日子(图)
- c语言ATM机文件储存账号密码,C语言实现_ATM自动取款机系统
- ssh 免密码登录远程主机 免登录运行指令
- 编写linux脚本操作 java 服务
- MongoDb 聚合报错
- 时间选择插件jquery.timepickr
- 「 计算机视觉」帧差法移动侦测
- 图文安装VMware Workstation教程
- Ch6 深度前馈神经网络
- css加密数据 图片解析破解
- 1.3 博弈结构和博弈的分类
- cmd命令行进行C++代码编译运行;实现进程调度和存储管理
- 问题解决29:微信获取高清图像
- JavaSE自学笔记016_Real(多线程)
- 骆驼(Camel)命名法、帕斯卡(Pascal)命名法、匈牙利命名法
- 解决QODBCDriver::disconnect: Unable to disconnect datasource