Yslow安装使用, 网站性能工具Yslow

本文whyboy站长讲解 Yslow安装 以及 Yslow使用 ,打开Yslow官网就能看到有四个版本可供选择：火狐（firefox）浏览器、谷歌（chrome）浏览器、欧朋（opera）浏览器和移动版。本文介绍的火狐版

本文whyboy站长讲解Yslow安装以及Yslow使用,打开Yslow官网就能看到有四个版本可供选择：火狐（firefox）浏览器、谷歌（chrome）浏览器、欧朋（opera）浏览器和移动版。本文介绍的火狐版的，因此我们先安装火狐浏览器。想要安装Yslow，必须先安装firebug，可在火狐浏览器上直接选择附加组件，搜索firebug，安装后，再搜索Yslow，并安装。

如何启用Yslow? 安装完了以后，打开firebug（可按F12），就会看到Yslow选项。或点击右下角启动按钮图标。

你第一次打开Yslow时，以下图像作为Firebug的一部分被显示在的浏览器窗口。点击 Run Test 运行Yslow，也可以点击 Grade, Components, 或Statistics选项开始对页面的分析。也可以选择 Autorun YSlow each time a web page is loaded 它将自动对以后打开页面进行分析， 您也可以右击YSlow状态栏，然后选择或取消自动运行。

要学会Yslow的使用，首先要了解Yslow视图：

YSlow显示测试结果的分析,分为等级、组件、统计信息。你可以浏览这些观点之间选择标签以观的名字在YSlow标签的Firebug控制台。 以下是说明的等级、组件、统计信息。

一、等级视图

查看一个分析,选择页面的性能等级标签或点击网页的字母等级在状态栏这页纸的底部。 视图显示了等级为网页的成绩单。整个字母等级为页面显示在顶部随着全面数值的表现。这个页面是基于22可分级的高性能网页的规则(见性能规则)。这些规则是列在按重要性的顺序,从最重要不重要。从 A 级到 F 级，A 级为最高。 下面是一个等级的例子：如果页面与某一个规则无关，则显示 N/A ，表示不适用。点击每一规则，都给出了改进建议。

二、组件视图

分组显示页面组件，表格列出组件的信息，点击 Expand All展开显示给个分组内各的组件信息。

TYPE：该组件的类型。该网页是由组成部分的下列类型： doc, js, css, flash, cssimage, image, redirect, favicon, xhr, and iframe.

SIZE(KB)：该组件的大小以千字节。

GZIP(KB)：该组件的gzip压缩的大小以千字节。

COOKIE RECEIVED(bytes)：字节数在HTTP设置的Cookie响应头。

COOKIE SENT(bytes)：节数的Cookie在HTTP请求报头

HEADERS：HTTP信息头，点击放大镜查看全面信息。

URL：链接地址

EXPIRES(Y/M/D)：日期的Expires头，属于缓存设置一种。

RESPONSE TIME (ms)：响应时间

ETAG：ETag响应头，也是缓存设置的一种

ACTION：额外的性能分析

三、统计信息视图

左侧图表显示是页面元素在空缓存的加载情况，右侧为页面元素使用缓存后的页面加载情况。我们可以看到，页面元素缓存后的使页面的http请求和页面总大小都减少，从而加快了页面打开时间。

YSlow菜单栏

一、规则集

1 、YSlow （ 2版） -这一规则集包含了所有22个测试的规则。

2 、精英（ V1导联） -这个规则集包含原始13规则中使用了YSlow 1.0 。

3、小网站或博客-这个规则集包含14个规则，适用于小型网站或博客。参照下方的图片，看看哪一种规则，在这个规则集。

请注意，最后选定的规则集成为默认的规则集。默认规则集可以是一个预定义的三个之一或您自己创建的一个。

要创建您自己的规则集，单击Rulesets下拉菜单旁边的 Edit 按钮。新的规则集屏幕将显示：

1、点击左侧 New Set 按钮，出现全部22调规则，勾选你所需的

2、点击 Save ruleset as... 保存，会弹出个命名窗口，命名就可以了。

3、你还可以对自定义的规则再次编辑或者删除。

YSlow工具

YSlow的工具菜单上提供了多种报告工具，您可以使用获得的信息，以帮助您的网页分析。以下是截图工具菜单：

1、JSLint

JSLint收集所有外部和内部的JavaScript从目前的网页，提交给JSLint ，一个JavaScript验证，并打开一个单独的窗口了一份报告，存在问题，该网页的JavaScript的。该报告包括大致位置的源代码的问题。很多 时候，这些问题是语法错误，但JSLint寻找风格公约的问题和结构性问题。

2、All JS

收集所有外部和内部的JavaScript的网页，并显示在一个单独的脚本窗口。您可能想要使用这个工具来查看某个脚本，以及是否实际使用是正确的。

3、All JS Beautified

将js以人们可读的方式展示。

4、All JS Minified

收集所有外部和内嵌JavaScript，删除评论和白色空间以缩小的脚本。以改善网页的性能。

5、All CSS

收集所有的行内和外部的样式表在网页上，并将其显示在一个单独的窗口。

6、All Smush.it

如果您按一下所有Smush.it ， Smush.it将运行在网页上所有的图片组成。此工具将告诉你该图像可被优化，并创建一个压缩文件，来优化图像。

以上就是Yslow的安装和使用指南，whyboy站长还收集了一些，基本的评测解释项。

User fewer HTTP Requests    减少HTTP请求

图片、CSS、JS、flash等这些都需要增加http请求数，减少这些元素的数量能减少响应时间。 把多个JS、CSS尽可能合并压缩（除了JS库，那东西用别的网站上的缓存比较靠谱）小图片尽可能拼在一起，利用CSS的background定位。

Use a Content Delivery Network    利用CDN技术

虾米CND技术？自己搜索去吧，反正是空间提供商的事情，和你没关系的。

Avoid empty src or href    不存在的空路径

类似于这样的链接不要出现。

Add an Expires headers    设置缓存控制

在.htaccess文件里面加一段

<IfModule mod_expires.c>

ExpiresActive On

ExpiresDefault “access plus 7 days”

ExpiresByType image/x-icon “access plus 30 days”

ExpiresByType image/gif “access plus 30 days”

</IfModule>

服务器如果不支持mod_expires就不可以用了。

Compress components with gzip    设置GZIP压缩

<p在cpanel的网站优化里面选择第二项全部压缩就好了。gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员，而是网站服务器管理员的工作范畴，这里就不详细讲解了。如果你对此感兴趣，可以资讯贵公司的网站服务器管理人员。< p="" style="padding: 0px; margin: 0px;">

Put CSS at top    CSS放头部

Put JavaScript at bottom    JS放脚下

Avoid CSS Expressions    避免CSS 表达式

CSS中的Expressions其实也是一种if判断首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。

Make Javascript and CSS external    使用外部JavaScript和CSS文件

Reduce DNS Lookups    减少DNS查找

减少网站从外部网站调用资源。

Minify Javascript and CSS

JS和CSS最小化，很多工具都可以用来压缩他们。

Avoid URL redirects    避免重定向

除了避免3XX类型的重定向，还有一个小问题，最好不要写aa.com/bb这样的网址，因为会被重定向到aa.com/bb/，虽然Apache可以使用mod_rewrite，但不这么写是最好的。

Remove duplicate javascript and CSS    删除重复脚本和CSS

最常见的就是多次加载jquery了，用jsview查看下就一目了然了。

Configure ETags    配置ETags

Etag（Entity tags ）实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。这和 “Last-Modified”的概念有点类似。很遗憾作为网页开发人员对此无能为力。他依然是网站服务器人员的工作范畴。如果，你对此有兴趣，可以咨询贵公司的网站服务器管理员。解决办法是 .htaccess里加入FileETag None之。

Make AJAX cacheable    设置AJAX的缓存

AJAX的信息读取是异步的，这也表示用户不一定会等待这异步的响应，为避免重复的AJAX请求，设置缓存是优化性能的一个好方法。

Use GET for AJX requests

AJAX用Get不要用Post，这个AJAX书里面都会介绍的。

Reduce the number of DOM elements    减少DOM元素数量

这个需要xhtml有个好的构架。

Avoid HTTP 404 (Not Found) error    避免出现404错误页面。

404对服务器还是用户都不好。

Reduce cookie size    减少cookie的大小

cookie控制在4K以内。

Use cookie-free domains    使用域名无关性的Cookie

这里是有关静态服务器的问题，主要是指一些静态文件比如说图片、CSS等等，比如说YAHOO，他的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

Avoid AlphaImageLoader filter

避免AlphaImageLoader滤镜的使用。 如果为了实现IE6的PNG透明，忍吧。

Do not scale images in HTML    不要对图片进行缩放

W3C一直不提倡图片缩放，一方面是对服务器资源的浪费，另一方面也是对性能的浪费。

Make favicon small and cacheable    使图标尽可能小，并使用缓存

这里指的是favicon.ico了，前面已经设置过了favicon.ico缓存。