网站性能工具Yslow的使用方法

news/2024/5/14 2:52:57/文章来源:https://blog.csdn.net/weixin_33801856/article/details/93495425

Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开速度,这款插件还帮助我分析了不少其他网站的代码,之前我还特意写了提高网站速度的秘籍,就是通过这款插件分析得出的。网络上已经有不少Yslow使用说明了,本文我想介绍下我使用Yslow的方法和一些别人没提到的小技巧。

Yslow的安装方法

现在Yslow已经有很多版本了,本文介绍的是3.0.4最新版,打开Yslow官网就能看到有四个版本可供选择:火狐(firefox)浏览器、谷歌(chrome)浏览器、欧朋(opera)浏览器和移动版。

安装Yslow要先安装 Firebug(本地址以火狐为例),两种方法启动Yslow:1、打开Firebug窗口,选择Yslow选项。2、直接点击火狐右下角的Yslow启动按钮。

Yslow的启动界面

(图1:Yslow的启动界面)

点击 Run Test 运行Yslow,也可以点击 Grade, Components, 或Statistics选项开始对页面的分析,如果在 Autorun YSlow each time a web page is loaded 上打上对勾,它将自动对以后打开页面进行分。

注意图中的红框,这里是规则集,YSlow (V2)包含了所有22个测试的规则,YSlow (V1)包含原始13规则,小网站或博客-这个规则集包含14个规则,适用于小型网站或博客,建议对号入座。

雅虎评估网站性能的23条军规

雅虎曾经针对网站速度提出了非常著名34条准则:《Best Practices for Speeding Up Your Web Site》。而现在将34条精简为更加直观的23条,并针对每一条给出从F~A的评分以及最终的总分。

而现在23条网站性能优化建议在YSlow的官网首页就能看到,当然也可以不看,在使用Yslow后,在控制面板里就会给你评分提示,和改进建议。

Grade(等级视图)—Yslow的第二个选项卡

YslowGrade(等级视图)给出的网站性能评分

(图2:Yslow给出的网站性能评分)

Yslow给出的网站性能评分,从F~A,A是最好的,通过测试卢松松博客来看,网站有4处得分最低,例如图2中的最低分提示:我博客的HTTP请求太多。其中应用了14个外部JS、3个CSS文件(之前我已从6个合并为3个)、14个CSS背景图片。

Yslow的建议是让我合并这些,至于合并CSS引用图片我在“提高网站打开速度的7大秘籍”中介绍过。

Components(组件视图)—Yslow的第三个选项卡

通过Components考验查看网页各个元素占用的空间大小

(图3:通过Components考验查看网页各个元素占用的空间大小)

通过Components考验查看网页各个元素占用的空间大小,例如我博客某个页面,有236个images(图片),占用了489.2K,通过详细查看,发现来自gravatar(评论头像)的引用图片非常大,在加上我博客本省评论量就打,每个头像就占用几K,几百个就占用了整个网页50%的大小,而且图片还是引用的,加载就更慢。

所以,我得出的结论是:gravatar虽然增强了互动性和个性,但也结结实实影响了网站速度。

Statistics(统计信息视图)—Yslow的第四个选项卡

Yslow的统计信息视图

(图4:Yslow的统计信息视图)

左侧图表显示是页面元素在空缓存的加载情况,右侧为页面元素使用缓存后的页面加载情况。从图中可以直观的看出(尤其是我标的红框),这个网页263个HTTP请求,网页的大小达到773.9K,意味着打开没打开一个页面几乎需要下载1M的东西,而通过使用缓存后我们可以看到效果图片基本靠缓存,而网页的总大小压缩到43.2K。

Statistics这个统计信息视图工具和Components(第三选项卡)一样,只是效果更直观,如果要获得性能优化建议还是要看Grade(第二选项卡)的详细建议。

Tools(辅助工具)—Yslow的第五个选项卡

Yslow提供的小工具

(图5:Yslow提供的小工具)

JSLint是一个强大的工具,它可以检验HTML代码以及内联的Javascript代码,通过JSLint发现了google analytics上的一个js错误。

ALL JS:查看你这个网页上一共引用了多少JS。

All JS Beautified:把所有JS放在打开的页面中,利用站长统一检查(我感觉作用不大)。

All JS Minified:同上,但它显示的是压缩过的js代码,如果你要JS优化,它已经给你优化好了,来过来直接用。

All CSS:显示你网页所有CSS文件。

YUI CSS Compressor:显示网页压缩后的CSS文件,也是拿过来可以直接用的。

All Smush.it™:图片在线优化网站,点击它后会自动跳到smushit网站上给你自动优化CSS图片,该网站提供了优化前与优化后的对比,点击直接下载优化后的图片,在覆盖到自己网站上就可以了,强烈推荐。

Printable View:这个是打印用的,部门开会、前端设计师讨论、向老板汇报时估计用的上。

转载于:https://www.cnblogs.com/zhangchenliang/p/3909382.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_773635.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

github ssh 配置_教大家怎么用GitHub免费搭建自己的博客网站

先给你们看看个效果网站:https://www.a2data.cn/环境准备:Node.jsHexoGitGitHub SSH keyTypora (Md格式书写工具)idea(就是编辑工具,推荐webstorm)安装Node.js中文网:https://nodejs.org/zh-cn/download/官方网站:https://nodejs.org/en/直接…

网硕主机php升级,如何将phpwind8.7程序网站升级9.0方法

无忧主机小编真的很开心,在经过了这么多日子的测试,phpwind9.0终于正式发布了。无忧主机小编终于可以把自己的网站升级到最新的版本了。但是phpwind9.0整个架构都改版了,小编我也不敢乱升级,于是无忧主机小编参考了phpwind官方的升…

原始数据哪里找?这些网站要用好!200个国内外经济/金融/行研/咨询数据网站大全(附链接)...

本文约8000字,建议阅读10分钟本文为你提供200个国内外经济、金融、行研、咨询数据网。资料搜集是个相当繁琐与累的工作,也是投资入门的基本,良好的信息资料搜集能力有利于我们快速了解投资主体的基本情况,为后续的调研及一手资料的…

Linux运维基础(五):网站流量度量

IP IP(Internet Protocol),这里指独立IP数。 独立IP数:一般一天内相同IP地址的客户端访问网页只会被记录一次,被计入的总次数为独立IP数。 记录独立IP数的时间可为一天,一个月,目前通用的标准为一天。 独立IP数与实际…

sdr 软件_软件定义无线电网站 sdr.hu 宣布关闭

软件定义无线电网站 sdr.hu 宣布关闭,站长给出的理由是这是一个个人业余爱好项目,他的关注点现在转移到了其他项目,既没有精力继续维护网站,也无法防止其被滥用。“防止被滥用”更像是一个来自当局施压的结果,许多人怀…

php签入html出来的影响seo吗_seo步骤优化师那个好

seo步骤优化师那个好很多人现在都在手机上运用语音搜索。物质的真实物质情形上,20%的移动查问是语音搜索。语音搜索的重要性正在提升。由于这个,您需求着手思索问题很多人在执行语音搜索特殊情况运用的天然语言。并将您的发觉添加到关键字列表…

阿里云服务器搭建个人网站(●‘◡‘●)

云服务器搭建个人网站(针对新手) 转载地址:https://developer.aliyun.com/article/758856? ​ 简介: 首先,我们需要购买阿里云服务器和域名。域名建议用.com后缀的(一般五十左右)&#xff0c…

python sqlite3 带密码_Python爬虫+Flask,带你创建车标学习网站!超级吊有木有!

文化不分边界人,为什么要读书?举个例子: 当看到天边飞鸟,你会说:“落霞与孤鹜齐飞,秋水共长天一色。”而不是:“卧靠,好多鸟。”; 当你失恋时你低吟浅唱道:“人生若只如初见&#xf…

php刷网站关键词排名,网站关键词排名如何刷点击流量?

关于网站关键词排名刷点击流量从收录到排名再到引流一、收录问题在站长交流群里面我看了分享的原创文章,说实话从语言描述和逻辑上分析,的确是亲自敲打的文章,称之为原创也不为过,但是细细斟酌,会发现根本就是流水线&a…

webpack打包jquery多页_用webpack打包老网站(jquery切图)或重构浅谈!

随着前端技术的快速发展,前端技术栈也越来越复杂多样了。什么是webpack?他能干些啥?WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓…

各类数据集网站收集

来源于:https://www.jianshu.com/p/42697d0d2fc1 1.Mall Dataset: http://personal.ie.cuhk.edu.hk/~ccloy/downloads_mall_dataset.html 2.ShanghaiTech https://pan.baidu.com/s/1nuAYslz WorldExpo 10 This paper is in cooperation with Shangha…

【服务器架构】十张图带你了解大型网站架构

目录 1、初始阶段的网站架构 2、应用服务和数据服务分离 3.使用缓存改善网站性能 4、使用应用服务器集群改善网站的并发处理能力 5、数据库读写分离 6、使用反向代理和CDN加上网站相应 7、使用分布式文件系统和分布式数据库系统 8、使用NoSQL和搜索引擎 9、业务拆分 …

Ping计算机名和Ping网站域名都是由DNS解析吗?

背景 最近公司换了一台打印机,在终端上添加扫描的时候主机名输入计算机名报错“连接超时”,但是将主机名改为IP后就可以“正常连接”了。在处理这个问题的时候首先想到的就是DNS、wins等服务器IP没配置导致不能解析计算机名所致。 引言 通过给打印机配…

IE退役,建议使用IE的网站如何打开,Edge接力。

微软宣布将于美国当地时间6月15日(北京时间6月16日),停止对IE( Internet Explorer)浏览器的所有支持和更新,为这款服务用户超过27年的浏览器画上句号。未来,将由微软推出的Edge浏览器接棒。 尽管…

学习-安全类网站

SeEBug: https://www.seebug.org/ Sebug安全文档: http://old.sebug.net/paper/ OWAPS: http://www.owasp.org.cn/owasp-project 欢迎关注公众号:

大型网站架构:负载均衡(1)

面对大量用户访问、高并发请求,海量数据,可以使用高性能的服务器、大型数据库,存储设备,高性能Web服务器,采用高效率的编程语言比如(Go,Scala)等,当单机容量达到极限时,我们需要考虑业务拆分和分…

大型网站架构:负载均衡(2)

大型网站架构系列:负载均衡详解(2) 本文是负载均衡详解的第一篇文章,介绍负载均衡算法, 硬件负载均衡。部分内容摘自读书笔记。 三、负载均衡算法 常用的负载均衡算法有,轮询,随机&#xff0…

大型网站架构系列:负载均衡详解(3)

一、软件负载均衡概述 硬件负载均衡性能优越,功能全面,但是价格昂贵,一般适合初期或者土豪级公司长期使用。因此软件负载均衡在互联网领域大量使用。常用的软件负载均衡软件有Nginx,Lvs,HaProxy等。本文参考大量文档&a…

大型网站架构系列:负载均衡详解(4)

本文是负载均衡详解的第四篇,主要介绍了LVS的三种请求转发模式和八种负载均衡算法,以及Haproxy的特点和负载均衡算法。具体参考文章,详见最后的链接。 三、LVS负载均衡 LVS是一个开源的软件,由毕业于国防科技大学的章文嵩博士于19…