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

news/2024/5/10 16:51:09/文章来源:https://blog.csdn.net/weixin_30703911/article/details/94777893

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/dtdxrk/archive/2012/07/19/2599683.html

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

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

相关文章

10款方便的在线文件格式转换工具网站。

1.online-convert online-convert是一个十分优秀的在线格式转换应用,支持格式覆盖文档、图片、音频、视频、电子书、Flash以及一些 不常见的格式。使用非常简单,你只需根据在你想转换成的格式的分类(如文档的在document converter&#xff09…

获得alexa网站下面美国排名前二十的网址

为什么80%的码农都做不了架构师&#xff1f;>>> #!/usr/bin/python #encoding:utf8 #author:cosmeimport re import urllibdef getTop25ReginalSties():GETTOP25 re.compile(r^\<a\shref\\"/siteinfo/(?P<gettop>\S)\"\>\S\</a\>.*)…

最新70佳单页网站设计案例欣赏(中篇)

单页网站是指只有一个页面的网站&#xff0c;这种形式的网站曾经非常流行&#xff0c;现在依然有很多人喜欢。不过&#xff0c;并不是每个网站都适合做成单页&#xff0c;一般都是内容比较少而且将来内容也不怎么增加的情况才适合这样做。如果你打算做一个这样的网站&#xff0…

(转载)让网站变灰的CSS代码(支持IE、FIREFOX和CHROME)

2019独角兽企业重金招聘Python工程师标准>>> <p style"margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">原文&#xff1a;<a href"http://www.uisdc.com/gray-css-code"…

从两个服务器访问相同网站

目标: 从两台服务器访问同一个网站. 模型: 服务器A , 服务器B 上运行apache 安装php 服务器C 上保存网页文件, 及运行Mysql数据库 大致流程: 服务器C 建立网页存放目录和Mysql数据目录 启用 nfs 服务 并共享网页存放…

从杨致远辞去雅虎说起,那些衰落的网站巨头给我们的启示

盘点一下近些年衰落的互联网巨头 雅虎---无可置疑排名第一位&#xff0c;昔日的互联网霸主99年市值超过1200亿美金&#xff0c;记得小时候看过一个动画片&#xff0c;里面经常有个大猩猩叫“yahoo”哈哈&#xff0c;从哪个时候雅虎成为我第一知道的互联网品牌&#xff0c;但是今…

我的.Net电子商务网站第一步 - UI

决定要做一个电子商务网站&#xff0c;一直以来都觉得自己美工很烂&#xff0c;那先从美工入手吧&#xff01; 折腾了2天之后&#xff0c;有了最初的效果&#xff0c;在线demo请点击&#xff1a;http://byyee.com/software/shoppingmall/ 网站用的是国外空间&#xff0c;如果访…

自主服务器详细发布网站教程,能上网即可以做网站服务

很多人只知道固定公网IP发布网站&#xff0c;动态IP时甚至无公网IP时&#xff0c;如何发布网站呢&#xff1f;根据不同的网络环境分析不同的发布网站方式。一&#xff0c;固定公网IP时。通过dnspod或nat123域名解析&#xff0c;将域名解析到网站主机IP即可。二&#xff0c;动态…

IIS发布asp.net网站出现的错误

1、 【转】配置错误 不能在此路径中使用此配置节 配置错误 不能在此路径中使用此配置节(转)2011年12月29日 11:22 配 置错误 不能在此路径中使用此配置节。如果在父级别上锁定了该节&#xff0c;便会出现这种情况。锁定是默认设置的 (overrideModeDefault"Deny")&…

joomla的几个不错的网站

http://www.joomlagate.com/download/free-joomla-templates Joomla之门 ::下载 RSS Joomla! 免费模板 RSS 各种免费 Joomla! 模板 Free Joomla Templates. 不仅有前台模板&#xff0c;还包括后台模板&#xff1b;不仅有网站模板&#xff0c;还包括论坛模板、留言本模板等。 …

微软网站打不开_终于等到你,微软正式发布 Windows Terminal 预览版

前一段时间&#xff0c;一直在知乎、技术社区收到技术小伙伴们的终极拷问&#xff1a;微软Build 大会上提到的「6月中旬」要上Windows store 的 Windows Terminal 到底啥时候可以用到呀&#xff1f;有一次&#xff0c;我跑去我给 Windows Terminal 提的某个 issue 里问 Windows…

优秀设计:12个带给你灵感的创意单页网站作品

单页网站作为一个流行趋势已有一段时间了&#xff0c;但他们的受欢迎程度似乎并没有任何减少。这种页面设计方法并不适用于每个项目&#xff0c;但有时它是合适的&#xff0c;是有意义的。例如&#xff0c;当没有很多内容&#xff0c;而且你知道的内容在未来不会增长很多&#…

各大网站rss订阅源地址_网站优化技术第二篇(如何让某度快速收录新站)

如何让某度快速收录新站&#xff1f;根据某度现在的算法&#xff0c;给出以下总结&#xff0c;对某度快速收录很有帮助。seo优化经验总结如下1.网站域名一定要和网站主题相符&#xff0c;利于百度对网站的信誉评价。前期有能利用301转向pr值大于4以上的站点最好&#xff01;2.网…

发布ASP.NET网站到IIS

1. 在Web项目中点击发布网站&#xff0c;如图1所示 图1 2. 选择要发布的路径——>“确定”&#xff0c;如果项目显示发布成功就可以了。如图2所示 图2 3. 打开控制面板中的IIS信息服务管理器&#xff0c;按如图3所示操作 图3 4. 点击“下一…

百度seo排名规则_SEO界的潜规则(百度死不承认的SEO秘密)

说起潜规则&#xff0c;相信大家都不会陌生&#xff0c;因为人们知道如今各个行业都是有潜规则的&#xff0c;即使做SEO也不例外&#xff0c;下面筑梦导师大家分享一下seo优化的六大潜规则&#xff1a;1.标题部分是搜索引擎优化的重要组成部分&#xff0c;这个地方应该是优化的…

网站部署后无法访问sqlserver_实践|零基础创建一个网站的通用步骤是?

设为星标才不会错过哦 你好呀&#xff0c;我是然怡我的专业是计算机科学与技术该篇文章是对自己的实战小结及分享望有用写因 一方面是对自己做的这个项目进行总结回顾&#xff0c;另一方面或是个人兴趣&#xff0c;或是参加比赛&#xff0c;都可以给基础薄弱甚至没有基础但是…

网站前端性能优化总结【转】

一、服务器侧优化 1. 添加 Expires 或 Cache-Control 信息头 某些经常使用到、并且不会经常做改动的图片&#xff08;banner、logo等等&#xff09;、静态文件&#xff08;登录首页、说明文档等&#xff09;可以设置较长的有效期 &#xff08;expiration date&#xff09;&…

提高 网站 百度权重

2019独角兽企业重金招聘Python工程师标准>>> 很多的企业都存在这样的困惑&#xff1a;一个网站做了很久&#xff0c;不仅只在百度等搜索引擎检索到很少的网页&#xff0c;而且网站的PR值和百度权重很低或者几乎没有。存在这样的问题&#xff0c;究其原因在于没有重视…

最全的静态网站生成器(开源项目)

原文地址&#xff1a; http://www.iteye.com/magazines/133-Static-Site-Generators#595将动态网页静态化&#xff0c;可以有效减轻服务器端的压力&#xff0c;并且静态网页的访问速度要快于动态网页。此外&#xff0c;使用静态网页还有利于搜索引擎的收录&#xff0c;从而提高…

JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示

一、&#xff08;一&#xff09;中的代码还可以修改的地方。 在&#xff08;一&#xff09;中&#xff0c;如果是运行在服务器下&#xff0c;如apache等&#xff0c;可以把head和navigation的div抽取出来&#xff0c;放置在另一个html文件里&#xff0c;然后在页面中&#xff0…