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

news/2024/5/20 13:54:36/文章来源:https://blog.csdn.net/zuggs_/article/details/80742270

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


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

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

你第一次打开Yslow时,以下图像作为Firebug的一部分被显示在的浏览器窗口。Yslow界面点击 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 级为最高。 下面是一个等级的例子:Yslow等级视图如果页面与某一个规则无关,则显示 N/A ,表示不适用。点击每一规则,都给出了改进建议。

二、组件视图

Yslow组件视图

分组显示页面组件,表格列出组件的信息,点击 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:额外的性能分析

三、统计信息视图

Yslow统计信息视图

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

YSlow菜单栏
一、规则集

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

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

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

Yslow规则集

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

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

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

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

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

YSlow工具

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缓存。


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

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

相关文章

如何利用全站加速,提升网站加速性能和用户体验?

随着网络技术的发展&#xff0c;越来越多的应用基于互联网发布&#xff0c;再好的应用&#xff0c;如果打开速度慢&#xff0c;10个用户会有9个用户选择离开&#xff0c;相关统计数据显示&#xff0c;每增加0.1秒的加载延迟&#xff0c;将会导致客户活跃度下降1%。在目前获客成…

中国游戏视频门户网站GTV 遭遇挂马袭击

【赛迪网-IT技术报道】2009年1月6日&#xff0c;网友glacier_lk举报中国游戏视频门户网站GTV.com.cn被***挂马。经过实验室反病毒工程师分析&#xff0c;确认了该网站确实包含恶意代码&#xff0c;浏览的用户可能会中毒。 当网友点击挂马网址hxxp://www.gtv.com.cn(出于安全考虑…

Step by Step WebMatrix网站开发之一:Webmatrix安装

WebMatrix是微软提供的一个完全免费的Web开发工具&#xff0c;工具内已集成web服务器、数据库和程序架构。笔者最感兴趣的是新的Razor&#xff0c;一个ASP.NET新的视图引擎。该引擎很好的将服务器代码和HTML代码融合在一起&#xff0c;使代码非常容易阅读和理解&#xff0c;而且…

Linux环境下网站平台的搭建 MySQL+apache+PHP

Linux环境下网站平台的搭建 MySQLapachePHP搭建条件&#xff1a;必须有apache、php、MySQL的联合支持。 静态安装&#xff1a;顺序&#xff1a; ①首先安装MySQL ②其次安装PHP ③最后安装apache 动态安装&#xff1a;顺序&#xff1a; ①首先安装MySQL ②其次安装ap…

iis6下配置支持.net4.0发布网站

iis6配置支持.net4.0 今天在win2003操作系统上发布两个网站,首先配置iis&#xff1a; 1.下载 .net framework 4.0 差不多48MB 2.安装 3.打开iis&#xff1a; 开始>管理工具>Internet 信息服务(IIS)管理器 4.点击管理器中的“web服务扩展”,刚刚安装的.net framework 4.…

获取网站缩略图代码

先看界面效果图&#xff1a; 最终运行得出的图如下&#xff1a; 页面代码&#xff1a; Form1.cs /** 作者&#xff1a;HJL * Blog:Http://www.cnblogs.com/xt_hjl * 获取网站缩略图程序 * 2010年8月最后一天 * 欢迎修改和传播 * 最好能保留该信息^_^ * 也欢迎大家访问我的博客 …

25个优秀的设计机构网站设计案例

今天&#xff0c;我们一起来欣赏网站设计工作室自己的网站。设计公司的网站除了要能够吸引客户以外&#xff0c;还要通过他们自己的网站向客户展示他们的设计理念和风格。这里收集的25个优秀的设计机构网站既有清爽简洁风格的&#xff0c;也有色彩丰富&#xff0c;图文并茂的&a…

网站安装打包 新建网站[四][创建网站] 中

在IIS6.0的帮助文档中&#xff0c;对于创建IIS&#xff0c;提供了三种程序管理方法&#xff0c;一种是WMI&#xff0c;另一种是ADSI,还有一种是命令行方法。 这里&#xff0c;采用网上代码比较多的ADSI编程方式进行。 用C#进行ADSI编程&#xff0c;需要引用添加名称空间&#x…

IIS 301永久重定向,提升网站SEO

对于每一个站长而言&#xff0c;SEO都是必修课。301永久重定向是SEO中&#xff0c;最为常见的一个。实现301重定向的方法有多种&#xff0c;需要根据实际的情况来区分。目前的主流WEB服务器&#xff0c;Apache, IIS等都是支持301重定向的。 今天要说的301重定向&#xff0c;是针…

阿里云网站全新启航,重新定义2.0时代的“一站式上云”

在刚刚过去的2020年云栖大会上&#xff0c;阿里云智能总裁张建锋宣布&#xff0c;阿里云正式从“飞天云平台”走向“数字原生操作系统”&#xff0c;进入2.0时代。 关于阿里云2.0&#xff0c;张建锋如此定义&#xff1a;“阿里云2.0&#xff0c;我认为就是云数字原生操作系统的…

50个非常漂亮的作品集网站设计【上篇】

对于设计师和设计机构来说&#xff0c;一个精美的作品集网站是吸引客户的最好方式。如果你正在建设作品集网站或者想重新设计的话可以参考本文收集的这些优秀案例&#xff0c;相信这些精美的网站作品能够带给你灵感&#xff0c;这些网站中汇集的众多优秀设计作品、素材和教程&a…

【渗透测试】网站有cdn怎么办?

文章目录一、简介二、如何检测目标是否使用CDN&#xff1f;1&#xff09;[超级Ping](https://ping.chinaz.com/)2&#xff09;nslookup三、常见CDN绕过获取真实IP方法&#xff1f;1&#xff09;子域名查询2&#xff09;国外地址请求3&#xff09;邮件服务4&#xff09;遗留文件…

分享45个海量免费电子书下载网站

随着网络和信息技术的快速发展&#xff0c;电子书越来越流行。以Amazon Kindle为代表的电子书阅读器的出现改变了人们传统的阅读方式&#xff0c;如同iPod改变人们听音乐一样。如今&#xff0c;很多网上书店也推出了电子书商品&#xff0c;相比传统的纸质书&#xff0c;电子书便…

30个漂亮的单页作品集网站设计案例欣赏

单页网站是指只有一个页面的网站&#xff0c;这类网站一般通过锚点实现平滑的导航。很多设计师的作品集网站也使用了单页类型&#xff0c;设计得非常好。今天这篇文章向大家分享30个漂亮单页作品集网站设计案例&#xff0c;相信这些例子能带给你设计灵感。 Eduardo de La Rocqu…

安装VS2010后,网站不能使用.net 4.0

在IIS7中部署了MVC2.0的程序&#xff0c;打开浏览器输入地址&#xff08;绑定的端口是87&#xff0c;87端口在chrome有个问题&#xff0c;等下再说&#xff09;&#xff1a;http://localhost:87&#xff0c;但是访问失败&#xff0c; 以为.NET4.0虽然安装了&#xff0c;但还未在…

SharePoint 搜索爬网第三方网站配置

介绍&#xff1a;SharePoint的搜索着实强大&#xff0c;而且最近用到SharePoint搜索第三方爬网&#xff0c;感觉收获挺大&#xff0c;而且网上资料没找到太多类似的&#xff0c;就小记录一下&#xff0c;分享给大家。 首先&#xff0c;我自己写了一个net页面&#xff0c;里面读…

其他 之网站分享插件

<!doctype html> <html> <head> <meta charset"utf-8"> <meta content"widthdevice-width,user-scalableno" name"viewport"> <title>微信&#xff0c;QQ分享插件</title> <link href"css/st…

java捕获一个网站页面的全部图片

直接上代码&#xff1a; package com.jeecg.util;import java.io.BufferedReader; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.InputStream; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java…

VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程(转)

本文转自&#xff1a;http://www.cnblogs.com/gengaixue/archive/2010/08/13/1799112.html 开篇语&#xff1a;最近在弄ocx控件发布到asp.net网站上使用&#xff0c;就是用户在使用过程中&#xff0c;自动下载安装ocx控件。&#xff08;此文章也是总结了网上好多人写的文章&…

Asp.NET MVC 拍卖网站,拆解【2】 Asp.NET MVC章回,第(1)节

时间和篇幅所限&#xff0c;MVC不会介绍基本的建站过程&#xff0c;请参照博客园技术专题文章 传送门 英语足够好的请直接去微asp.net 官网 传送门 (强烈推荐&#xff0c;尤其是想使用最新技术的时候更应该直接去官网)&#xff0c;本文主要介绍什么呢&#xff1f;就像高中的时…