月度归档:2011年05月

Yslow网站分析工具详解

YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。我搜索一下”Yslow使用说明“,发现都是旧版本Yslow的使用介绍。于是翻译了一下yahoo官方关于新版Yslow的的使用帮助,希望给初次使用Yslow的朋友一些帮助。

注:有不对的地方,大家指正。

安装 YSlow

先安装 Firebug  https://addons.mozilla.org/en-US/firefox/addon/1843

Firebug 帮助文档 http://www.getfirebug.com/docs.html.

再下载安装  http://developer.yahoo.com/yslow

使用Yslow

Yslow是运行在Firebug窗口下,所有要运行Yslow,必须安装Firebug。

有两种方法启动Yslow

       1、打开Firebug窗口,选择Yslow选项。

       2、直接点击浏览器右下角的Yslow启动按钮。

你第一次打开Yslow时,以下图像作为Firebug的一部分被显示在的浏览器窗口。

点击 Run Test 运行Yslow,也可以点击 Grade, Components, 或Statistics选项开始对页面的分析。

你可以选择 Autorun YSlow each time a web page is loaded 它将自动对以后打开页面进行分析,

您也可以右击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的使用指南,结束。

更多相关文章:

Yslow各项属性详解
YSlow工具相关的使用说明

wordpress提速方法及插件详解

性能是一个网站成功的非常关键因素,任何人都不喜欢访问速度超慢的网站。WordPress 的开放性造就 WordPress 有着成千上万的插件,使得 WordPress 比以其他 CMS 程序更受欢迎,但是开放也在一定程度上使得 WordPress 的性能不是很好,所以当你发现你的 WordPress 站点性能很差,你应该尝试通过下面的方式去优化它:

一些最基本,简单的提速方法

1. 更新 WordPress 到最新的发行版本

WordPress 每次版本的升级都有对性能的改进,所以升级到 WordPress 最新的发行版本是改进性能的第一步。

2. 删除没用的插件和更新正在使用的插件

删除任何你不再使用的插件,并从服务器上删除它们,这样会明显加速 WordPress 速度,因为 WordPress 运行的时候会检查每个插件是否被启用,并且导入激活的插件。

另外最好把现在使用的插件更新到最新版本,因为插件的开发者发布新版本一般来说他们应该是在某种程度上优化了插件工作效率。

3. 最小化 PHP 和数据库查询

如果每次导入你服务器上的一个页面,服务器都要执行 PHP 语句和数据库查询,这样速度是不会快的,如果你把一些 PHP 语句直接改成静态的 HTML 代码,这样每次导入页面,浏览器只要读取 HTML 就好了。

4. 使用 PHPmyAdmin 优化和修复数据库

我们至少应该每个星期登陆 PHPMyAdmin 去优化下数据库,选择 WordPress 数据库,选择所有的表,选择优化数据表和修复,你会惊奇的发现这个技巧的效果非常好,它节省了数据库的 10% 的空间,并且效率也提高了。


使用 PHPmyAdmin 优化和修复数据库

优化图片和其他静态文件

5. 使用可靠的图片存储服务

可以尝试把一些常用的网页图片,CSS,JavaScript 和其他一些静态文件存到 Amazon S3 这样的存储服务中,你会发现服务器的 CPU 时间和内存使用会下降很多,这里有一个 Amazon S3 的向导


使用 Amazon S3 存储图片

不过 Amazon 的 S3 存储服务收费的,价格虽然比较低的,但是个人感觉还是不特别适合国内的 blogger。

6. 通过 Shrink O’Matic 这个工具来优化图片

Shrink O’Matic 是一个 AIR 程序,它能非常容易批量修改图片,并且支持 JPG, GIF 和 PNG 格式。只要简单的拖拉图片,它就能帮你修改图片的大小,另外它还有一些选项,让你能够选择输出大小,名字和格式。

Shrink O’Matic

全面提高性能

7. 安装 WP Super Cache 插件

关于 WP Super Cache 这个插件,我已经有详细的介绍。这里简单说,就是它能够产生静态的 HTML 文件,这些 HTML 文件产生之后,你的服务器就不用再去运行 PHP 脚本和数据库查询,所以它能够明显的加快你的博客速度。

8. PHP Speedy WP

PHP Speedy WP 能够会自动把所有的 JS 和 CSS 文件组合成两个文件,这样就非常简单的加速 WordPress 站点和提高你的博客的响应时间。并且 CSS 的背景图片被转换成 data URIs,就大大降低了 HTTP 请求,并且重要的是,它和 IE 兼容,尽管 IE 不支持 data URIs。但是不幸的是,PHP speedy 还有一些缺陷,组装之后的 JavaScript 文件是放在页面顶部而不是底部,所以这个会在 WP Super Cache 开启的时候不工作,当然了已经有人提供了解决方案


PHP Speedy WP

9. WP CSS

这个插件会 GZIP 压缩和删除 CSS 文件中的空白,并且会把 style.css 文件中的 @import 直接放入,这个插件还可以设置 CSS 文件的缓存过期时间。

10. DB Cache

DB Cache 这个插件在给定的时间内可以缓存数据库的每一次查询,并且速度很快,而且只用到很少的磁盘空间用于缓存。

11. 使用 Google 的 AJAX Libraries API 来提速

AJAX Libraries API 就是 Google 把一些非常流行 Javsacript 框架(jQuery, prototype, script.aculo.us, MooTools, dojo)放到 Google 的服务器上,使得大家可以充分使用 Google 的服务器资源之外,更重要的是能够提高你的速度。另外WordPress 也有 AJAX Libraries 相关的插件

12. 显示页面导入时间和查询次数

这里有段代码能够让你插入到你的模板中让你知道页面导入的时间,和有多少数据库查询,这个技巧能够让你知道你博客优化的程度。

在 <?php timer_stop(1); ?>  秒钟有 <?php echo get_num_queries(); ?> 次查询。

13. Optimize DB

MySQL 是一个非常好的数据库,但是它不能自己整理和清理碎片和垃圾。Optimize DB 这个插件可以运行优化数据库的命令,加速你的 WordPress 数据库的速度,这里有一篇关于 Optimize DB 插件的详细介绍。

关闭WordPress文章修订功能

大家在发表和编辑文章的时候,可能都不喜欢WordPress 自动保存(AutoSave)和文章历史修订版本(Revisions)的功能。一方面网速不好的时候,它会影响编辑和发表文章页面的加载速度;另一方面这些文章的历史修订版本都会写入数据库保存,无形中大大增加了数据库的膨胀速度,冗余数据太多也影响数据库的存取查询效率。wp管理后台并没有提供关闭功能选项。那么如何禁用WordPress自动保存和文章历史修订版本功能呢?这也是WordPress优化数据库第一步要做的内容。方法一:修改wp-config.php 文件

(程序文件的编辑,请使用专业的编辑器如 EmEditor 来编辑,不要使用记事本之类的,容易出现首页版面偏左、WLW打开出错的问题,以及其他隐藏错误,这是我的教训,切记切记)编辑wordpress的安装目录下的 wp-config.php 文件,在下面文字之后(基本上快在最后了):
/** 设置WordPress变量和包含文件。 */ ( 或 /** Sets up WordPress vars and included files. */ )
添加以下代码:
define(‘WP_POST_REVISIONS’,’0′);
上述代码是屏蔽掉“Revision”,有几个参数可选,根据实际需要修改(蓝色部分,本处就是指的0):
true(默认)或者 -1:保存所有修订版本
false 或者 0:不保存任何版本(除了自动保存的版本)
大于 0的整数 n:保存 n 个修订版本(+1 只保存自动保存版本),旧的版本将被删除。
具体说明请查看官方的说明文档“Revision Management”
此方法的不足在于,wordpress主程序升级后,需要重新设置(也许今后会增加这么一个开关按钮,没现在这么麻烦)。

方法二:使用插件法

使用的插件就是: disable-revisions,方法很简单,进入后台激活即可,不需要再设置什么

清除数据库中的修订版
安全起见,操作前请先备份数据!
方法一:使用WP Cleaner插件来完成
1.下载插件 WP Cleaner(点击下载,或访问插件主页)
2.将下载的文件解压后上传到博客 wp-content/plugins/ 目录下
3.在后台的“插件”项中启用
4.点击“设置”即可看到“WP Cleaner”项
5.按提示删除修订版。

方法三:手动清除数据库中的修订版 (此方法高效而且无副作用。)

首先登录你的cPanel——>数据库——>phpMyAdmin——SQL,然后输入以下 SQL 语句点执行即可把所有的Post Revision清除:
DELETE FROM wp_posts WHERE post_type = “revision”;
当然对于不熟悉sql语句的朋友可要谨慎使用了,不小心输错语句那可是相当危险的(注意这里的wp_什么表示数据库前缀,如果你修改了默认的wp前缀,则需要改为你自己的,否则会报告没找到);不过不用怕,这里还有一个简单明了的方法,免去你的担忧。
1.打开你的wordpress数据库,展开表 wp_posts(注意这里的wp_什么表示数据库前缀,如果你修改了默认的wp前缀,则查看你自己的xxx_posts),点击左上角的浏览,这表里包含的数据有page(页面)、post(文章)、revision(修订);
2.点击“post_type”子键进行分类排序,把所有显示“revision”的ID都勾选上(可能有多页,需要不断的重复),看清楚来,是键值为“revision”的才勾哟;
3.然后点删除。大功告成!新的和旧的“revision”都拜拜了。

关闭wordpress的自动保存功能
编辑wordpress的安装目录下的 wp-config.php 文件,在下面文字之后(基本上快在最后了):
/** 设置WordPress变量和包含文件。 */ ( 或 /** Sets up WordPress vars and included files. */ )
添加以下代码:
define(‘AUTOSAVE_INTERVAL’, ‘3600′);
上述代码会将自动保存时间间隔改为3600秒,即60分钟。

更多相关文章:
关闭WordPress文章自动保存以及修订功能(版本控制功能)(附带插件)

如何应用禁用自动保存和关闭文章修订版本的WordPress插件

禁用WordPress文章修订版本和自动保存功能