(本文更新,对应 WP Minify 1.1.8,建议更新到最新版本,后台设置更清晰。)

1.1.8 已经修正该错误,建议更新。(2011-09-20)
1.1.7 可能会在 error_log 中产生巨量错误提示,但不影响正常使用,不建议更新。(2011-09-04)

WP Minify 是 WordPress 中相当实用的一个插件,实质上将 minify 引擎变为了一个使用更为简便和自动化的插件,其基本原理就是通过压缩 JavaScript,CSS,HTML 中多余的空行和空格等无用代码以减少文件传输的占用空间,更重要的是它能将多个在页面中引用的 JS,CSS 文件等合并为单一的 JS 与 CSS 文件,从而大量减少了 HTTP 请求,极大地加速了页面载入的速度。

我使用 WP Minify 也有几个月的时间了,但是纠结于使用 HTML 压缩后 Meta 信息消失的问题,在 Google 和 baidu 上搜索均无功而返,最近终于将其解决,于是大概写了一下 WP Minify 的使用方法,并加上了自己的一点心得。水平有限,文章中有错误的地方,请不吝指教。

WP Minify 的最新版本为 1.1.8,可以在http://wordpress.org/extend/plugins/wp-minify/下载到最新的版本,也可以直接在 WordPress 的后台中直接搜索并安装 WP Minify。

安装过程

  1. 把 WP Minify 上传到 "wp-content/plugins/"文件夹内,如果在后台中安装则可跳过此步。
  2. 确保"wp-content/plugins/wp-minify/cache"是可写的。 如果插件使用失败,尝试把"wp-content/plugins/wp-minify/cache"的权限改为777。
  3. 在后台中激活 WP Minify 插件。

说明:

  • WP Minify 压缩的 JS 和 CSS 一般来自于 header.php 中的调用,只有在 header.php 中正确引用的 CSS 和 JS 文件才能被 WP Minify 正确识别处理,比如
    //CSS 文件的调用
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
     //JS 文件的调用(注意必须写 type="text/javascript")
    <script type="text/javascript" src="http://xia.im/wp-content/plugins/nextgen-gallery/js/ngg.js"></script>
    //WP 头部,一般某些插件的 CSS 和 JS 通过这个函数来调用
    <?php wp_head(); ?>

Support this plugin! 支持插件作者

  • Support this plugin
    这里建议选择"Do not display "Page optimized by WP Minify" link.",这样博客底部就不会出现使用 WP Minify 的信息,当然如果有余力可以为作者捐赠。

General Configuration 基本设置

  • Enable JavaScript Minification,Enable CSS Minification,Enable HTML Minification
    这里就是 WP Minify 中最重要的设置了:决定是否压缩合并 JS,CSS,HTML,建议打开 JS 和 CSS 的压缩,HTML 压缩除非配合缓存类插件,否则个人不推荐打开,如果遇到了开启 HTML Minification 致使 Meta 信息丢失的问题,请参考最下面的一些补充。另外,打开 HTML 压缩后,页面生成时间在我的博客首页上约慢了 0.03s ~ 0.08s,在页面生成时间和传输大小上的取舍,就是仁者见仁,智者见智了。简单的测试对比可以参考下面的补充。

Debugging 除错设置

  1. Combine files but do not minify,Show minify errors through FirePHP
    这两个选项主要用于 JS 代码的调试,由于 JS 代码经常用换行来作为一行代码的结束标记,但是JS在压缩后会去除多余的换行,导致 JS 不能识别结束标记而出错(养成良好的使用";"作为代码的结束标记的习惯很重要啊),第一个选项可以使 JS 仅合并而不被压缩,第二个选项可以在 FirePHP 中显示压缩合并过程中的错误。

Local Files Minification 本地文件压缩

  1. JavaScript / CSS files to exclude from minify (line delimited)
    如果不想压缩合并特定的文件,可以在这里填入相关文件的名称,以回车为隔断。
  2. URIs on which WP-Minify parsing will be disabled (line delimited)
    可以对特定的路径和文件禁止 WP Minify,以回车为隔断。

Non-Local Files Minification 非本地文件压缩

  1. Enable Minification on External Files
    允许压缩外部文件,除非需要排除大批量的 JS 或者 CSS 文件,作者推荐不打开。
  2. JavaScript / CSS files to include into minify (line delimited)
    只在 Enable Minification on External Files 关闭的情况下有效,如果 WP Minify 没有侦测到想要压缩合并的文件,可以在这里填入相关文件的路径,这个功能可以压缩合并站外的 JS 文件到你的服务器。以回车为隔断。(不能强制将当前页面未被调用的 JS 合并到当前页面调用的 JS 中)

Caching 缓存设置

  1. Cache expires
    设定压缩合并后的文件的过期时间,可以调成较长的一段时间。如果对任何 JS,CSS 文件进行了改动,一般情况下 WP Minify 都会根据文件的修改时间自动更新压缩合并文件,并更改请求参数中的m值,不必担心用户客户端的缓存问题。
  2. Manually clear cache
    手动清空缓存,如果 WP Minify 不能自动更新,比如用较旧的文件替换了较新的文件,那么手动清除一下缓存即可。

Tweaking/Tuning 细节调整

  1. Use "pretty" URL
    使用短网址,其实很简单,升级到 WP Minify 最新版本之后,压缩合并后的文件地址可以从 http://yoururl.com/wp-minify/min?f=1.js,2.js,3.js 变为 http://yoururl.com/wp-minify/cache/12345.js。选中这个选项可以使用新式 URL,更加美观。
  2. Place Minified JavaScript in footer
    是否将压缩合并后的 JS 移动到博客底部,一般情况下,博客加载的 JS 最好都不要放在博客底部,这样会影响 JS 的调用,导致页面的一些效果不能实现或者出现冲突。但是像 Google 分析或者 CNZZ、51la 的统计代码等,最好添加到footer.php中的最后位置,以提高页面的加载速度。
  3. Force all JavaScript/CSS calls to be HTTPS on HTTPS pages
    强制通过 HTTPS 协议传输 JS/CSS ,这个选项对于一般的博客并没有多大用处,如果博客支持 HTTPS 传输,可以打开,以确保传输过程中的安全性。
  4. Extra arguments to pass to minify engine
    为 minify 引擎加入额外的参数,具体参数可以参考 minify 引擎的文档。
  5. Automatically set your Minify base per siteurl setting
    一般情况下选中即可。

一些补充:

  1. 开启 HTML Minification 后 Meta 丢失的问题。经过对开启 HTML Minification 后网页源代码的研究,可以发现
    <meta name="Author" content="小虾, neverweep" />

    都被替换成了

    <meta
    name="Author" content="小虾, neverweep" />

    经过研究 WP Minify 的源代码,发现问题出在了 HTML Minify 的过程中。打开wp-content/plugins/wp-minify/min/lib/Minify/HTML.php有一段注释为"use newlines before 1st attribute in open tags (to limit line lengths)",大意就是在开放标签的头部之后换行,以限制每行的长度。可以将源代码中的

    $this->_html = preg_replace('/(<[a-z\\-]+)\\s+([^>]+>)/i', "$1\n$2", $this->_html);

    删除,这样就可以解决 Meta 信息丢失的问题,不过这样会导致 HTML 源代码的可读性下降,这个倒是并不很重要。
    如果想要良好的可读性,可以试试将
    "$1\n$2"
    改为
    "$1 $2\n" 或者 "\n$1 $2"
    不过这样在我的博客中会导致 W3C HTML 验证出错,提示某些标签没有正确闭合,但是实际上并没有什么问题。

  2. 使用 WP Minify 之后,一定要用各种工具查看一下博客内各个页面加载的 JS 与 CSS 文件。比如我的博客首页并没有留言板,不会加载 comment.js,所以插件只合并压缩 A.js, B.js, C.js 为 1.js。但是进入到有留言板的页面中,插件合并压缩 A.js, B.js, C.js, comment.js 为 2.js。这样就导致不同的页面加载了两个很大的 JS,浪费了时间和流量。所以要将 comment.js 排除在压缩的列表外,或者在 header.php 中插入这个 JS 的调用,强制 WP Minify 在所有页面都将其压缩合并。
  3. 使用 WP Minify 提供的 HTML 标签。
    <!-- WP-Minify CSS -->
    <!-- WP-Minify JS -->

    这两个 HTML 标签可以定义 WP Minify 插入合并后的 JS 与 CSS 的位置。尤其适用于引用了 Google CDN 中的 jQuery 库的博客,因为 WP Minify 默认的插入位置非常靠前,如果 jQuery 库的引用在其之后的话就会造成 JS 的错误,所以利用这个标签,可以将博客内部的压缩合并的 JS 文件放在外部引用 jQuery 库之后。

  4. 性能比较

    • http://xia.im/2011/04/z-turn-with-wordpress/这篇文章为例,其 HTML 原始数据大小为 98.4KB,Gzip 传输大小为 18.1KB;开启 HTML Minification 后数据反而变为 100.4KB,Gzip 传输大小为 18.5KB。页面生成时间大约增加了 0.08s 左右。
    • http://xia.im/2011/03/patriotism-and-nationalism/这篇文章为例,其 HTML 原始数据大小为 27.6KB,Gzip 传输大小为 10.7KB;其开启 HTML Minification 后数据变为 26KB,Gzip 传输大小为 10.3KB。页面生成时间大约增加了 0.02s 左右。

    这样来看,如果博客结构比较简单,没有太多的层结构,没有复杂的 HTML 代码,纯文字文章,这样 HTML Minification 打开效果更好一些。如果博客结构非常非常非常复杂,那么 HTML Minification不开更好一些。不过这些只是一个建议,具体还是要根据实际情况作出调整。

  5. HTTP 400 错误
    在搜索的过程中,发现有人说使用过程中会提示 HTTP 400 错误,不过插件作者说这个问题已经被修复了。如果出现 HTTP 400 错误,可以尝试将插件中 JS 的地址全部替换为绝对路径。Google 有很多相关的条目。
  6. WP Minify AJAX comments 400 冲突
    今天尝试把 willin 大师的 AJAX 评论应用到博客中,但是从出现了一个问题,就是在提交评论时会出现 HTTP 400 错误,用 Firebug 查看错误,发现是 WP Minify 造成的,它将 comments-ajax.php 误认为 CSS 文件而将其尝试合并了,自然就产生了错误。尝试将 PHP 文件在选项中各种排除均无解。后来开始研究 AJAX 评论的代码,这个代码是通过 JS 来调用 PHP,最新版本中 AJAX 评论尝试通过获取comments-ajax.js 自身所在路径,然后将完整路径中的 style.css 替换为 comments-ajax.php 来调用,然后尝试将这种获取路径的方式更改为手写绝对路径,问题解决。在较旧版本的 AJAX 评论中,获取路径的方式为判断博客主题 style.css 所在路径,解决方法是一样的:

    ajax_php_url = js_url.replace('-ajax.js','-ajax.php'),
    wp_url = js_url.substr(0, js_url.indexOf('wp-content')),
    //改为
    ajax_php_url = 'http://yoururl.com/wp-content/themes/123/comments-ajax.php',
    wp_url = 'http://yoururl.com',

    使用新版的 WP Minify 之后,使用老版的 URL 处理方式,会导致400错误,无法获取 JS 文件.新版会导致 AJAX 评论出问题,在我这里只要将 comment-ajax.js 中的这段代码删除即可。

    var i = 0, got = -1, len = document.getElementsByTagName('script').length;
    while ( i <= len && got == -1){
    	var js_url = document.getElementsByTagName('script')[i].src,
    			got = js_url.indexOf('comments-ajax.js'); i++ ;
    }
  7. CSS Hack 错误。原来我的主题作者是用 jQuery 作 CSS Hack,今天尝试将 JS 的 CSS Hack 改为用纯 CSS 实现
    /*以此代码为例,最后的 margin-top 加上\ 是对 IE8 及以下浏览器的 CSS Hack*/
    #searchform #searchsubmit{background-position:-4px -213px;left:2px;margin-top:3px;margin-top:4px\;}

    然后上传至服务器后经过 WP Minify 处理之后,整个页面完全错乱,查看 CSS 文件发现其中居然掺杂了 PHP 语句,很多与正则表达式有关。我认为可能是因为\为 PHP 和正则表达式的转义符,所以可能是在这个环节出现了问题,改为margin-top:4px\\; 问题解决,而且 CSS Hack 有效。

使用插件后,以我的博客首页为例,JS 的引用由最开始的5个,变为了2个(不计统计代码调用,其中一个是调用外部 Google CDN 的 jQuery 库,一个为博客内的所有 JS 文件压缩合并后的文件);CSS 文件由3个变为1个,大小在 Gzip 的基础上减少了 0.5KB = =。HTML 文件在 Gzip 的基础上减少了 0.8KB。重点是减少了N多次 HTTP 请求,这点要比压缩减少的几 KB 甚至十几 KB 都要有价值的多!用 Firebug 的网络可以清楚的看到前后的明显对比。 :smile:

  1. CSS 合并后问题不大、Js 需要看加载顺序,还是自己手动来比较好 = = 就是图片 png 这些合并起来好像很麻烦 = =... 求方法

  2. 感觉好复杂啊,有傻瓜一点的就好了。

  3. 我启用 WP Minify 之后,为什么网站的 CSS,JS 效果都无法显示了呢?我没有设置压缩,没有开启 HTML,只是对 CSS,JS 合并。
    我在 header.php 使用 WP Minify 提供的 HTML 标签也不管用。
    请问这个问题应该怎么解决呢?

    • @hui5012506
      有可能是内部出错了,你用浏览器的开发工具查看一下资源,看看 HTML 代码中是否存在合并后的 CSS 和 JS 地址。
      如果有,查看一下其内容是否存在和正确。
      如果没有,请在检查一下设置,比如你引用的文件是否为站内的资源。
      另外可以试着调整一下 Use "pretty" URL 设置。

  4. [...]不过问题还完全解决呢。我想测一下网站的加载速度如何,在本地用 YSlow 试了一下,发现很多 CSS 和 JS 文件没有优化。需要说明的是,这里的优化有两方面的含义:1) 合并多个小文件;2)压缩文件体积。网上确实有很多这方面的教程,教你如何手动合并 / 压缩 CSS 和 JS 文件,问题是这样做的话要修改好多处地方,升级 WordPress 的时候就麻烦了。好吧,我只好求助于万能的 WordPress 插件了。Google 了好一会儿,决定选择 WP Minify 这个插件。按照网上一些教程(如《WP Minify 的使用 》)的提示,在这个插件的设置中我并没有启用 html 压缩,以免造成不必要的麻烦(实际上前面我手动开启 Gzip 后,已经对 html 的压缩生效了)。[...]

  5. [...] 使用 WP Minify 合并压缩 JS,CSS,HTML 文件,其具体使用方法参见 http://xia.im/wp-minify/ 。%5B...]

  6. [...]Minify 合并压缩 JS,CSS,HTML 文件,其具体使用方法参见 http://xia.im/wp-minify/%5B...]

  7. [...]Minify 合并压缩 JS,CSS,HTML 文件,其具体使用方法参见 http://xia.im/wp-minify/%5B...]