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

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

Yslow的安装方法

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

安装Yslow要先安装 Firebug(本地址以火狐为例),两种方法启动Yslow:1、打开Firebug窗口,选择Yslow选项。2、直接点击火狐右下角的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的第二个选项卡

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

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

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

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

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

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

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

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

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

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

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

Tools(辅助工具)—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:这个是打印用的,部门开会、前端设计师讨论、向老板汇报时估计用的上。

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

时间: 2024-10-06 12:32:31

网站性能工具Yslow的使用方法的相关文章

ASP.NET网站性能提升的几个方法

1. HTTP 压缩 HTTP 压缩通常用于压缩从服务端返回的页面内容.它压缩HTTP请求和响应,这个会是巨大的性能提升.我的项目是基于Window Server 2003开发的,可以参考这篇文章. 2. 让ViewState失效 ViewState允许页面状态保持在客户端,它不区别于Cookie或者服务器内存.View State保存数据在一个隐藏域中.可以肯定的是,这个是很很强大的特性,但它的缺点使页面大小和在服务器中的内存增大. 所以,我们要避免使用ViewState,特别是,DataGr

网站性能的影响因素与优化方法(阅读笔记)

原文: http://www.cnblogs.com/leefreeman/p/3998757.html 另: http://www.cnblogs.com/leefreeman/p/3585032.html 怎样编写高质量的java代码 1. dns解析速度 2. 网络连接速度(不同地区IDC, 不同网络间使用代理, 主要地区使用CDN) 在各运营商发达的地区的IDC(互联网数据中心,可以理解成机房)部署网站服务器,各运营商的用户即可通过各自的骨干网访问服务器. 购买代理服务,也就是原来联通用

YSLOW(一款实用的网站性能检测工具)

 概述 YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化.  安装  官网:http://yslow.org/ 官方下载,点击安装,Google在扩展程序中直接拖进也可以,安装成功后会在右上角显示图标  YSLOW有什么作用? YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化. YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSl

网站性能评分工具Yslow 使用教程

Yslow 这个工具相信无论是搞前端的攻城师或者是搞网站的站长都了解,Yslow 可比谷歌的PageSpeed 有名多了:那个百分制下的评分数据总让国人着迷,看来应试教育造的孽太深了.Jeff 认为的话,Yslow 比较专业,但是因为是英文的,所以在个人分析结果上对某些人比较吃力,建议先使用PageSpeed Insights熟悉熟悉. 网站性能评分工具Yslow 简介 YSlow (解析为 why slow)是雅虎基于网站优化规则推出的工具,帮助你分析并优化网站性能.雅虎网站优化规则在十几个方

PHP提高网站性能的一些方法

前段时间面试问到了这个问题,回答的不是很全面,就去问了度娘,得到了一些比较全的答案,由于出处较多就没法确定原文出处了.下面是分享的答案. 一.大型网站性能提高策略: 大型网站,比如门户网站,在面对大量用户访问.高并发请求方面,基本的解决方案集中在这样几个环节:使用高性能的服务器.高性能的数据库.高效率的编程语言.还有高性能的Web容器.这几个解决思路在一定程度上意味着更大的投入. web容器是一种服务程序,在服务器一个端口就有一个提供相应服务的程序,而这个程序就是处理从客户端发出的请求,如Jav

不修改代码就能优化ASP.NET网站性能的一些方法

阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一些方法用于优化ASP.NET网站性能,这些方法都是不需要修改程序代码的.它们主要分为二个方面:1. 利用ASP.NET自身的扩展性进行优化.2. 优化IIS设置. 回到顶部 配置OutputCache 用缓存来优化网站性能的方法,估计是无人不知的. ASP.NET提供了HttpRuntime.Cache对象来缓存数据,也提供了OutputCache指

网站性能并发测试工具

网站性能并发测试工具 2012-05-05 22:04:26 分类: 项目管理 导读:随着Web 2.0技术的迅速发展,许多公司都开发了一些基于Web的网站服务,通常在设计开发Web应用系统的时候很难模拟出大量用户同时访问系统的实际情况,因此,当Web网站遇到访问高峰时,容易发生服务器响应速度变慢甚至服务中断. 随着Web 2.0技术的迅速发展,许多公司都开发了一些基于Web的网站服务,通常在设计开发Web应用系统的时候很难模拟出大量用户同时访问系统的实际情况,因 此,当Web网站遇到访问高峰时

浅谈 html5 兼容性 < IE9 + 的 解决方案 以及 网站 性能优化 的 工具

1> ie-css3.htc                     css3  < IE 9+兼容方式(部分兼容,canvas 不好使)link:http://fetchak.com/ie-css3/2> html5shiv.js                   html5  < IE 9+兼容方式 link:https://github.com/xgqfrms/html5shiv 3>网站 性能优化 tool Yslow + (firefox) firebug lin

优化Web网站性能

一.前端优化 网站性能优化是一个很综合的话题,涉及到服务器的配置和网站前后端程序等各个方面,我只是从实际经历出发,分享一下自己所尝试过的网站性能优化方法.之所以在标题上挂一个web2.0,是因为本文更偏重于中小网站的性能优化,我所使用的系统也是典型web2.0的LAMP架构. 首先讲讲前端的优化,用户访问网页的等待时间,有80%是发生在浏览器前端,特别是页面和页面中各种元素(图片.CSS.Javascript. flash…)的下载之上.因此在很多情况下,相对于把大量的时间花在艰苦而繁杂的程序改