0412.2013

254

CSS 和 JS 合并压缩工具 Minify 及其 WordPress 插件

网站性能优化是站长必备要做的,下面讲解下 Web 前端的性能优化,其中最重要是减少 HTTP 请求和压缩文件的大小,今天来介绍下使用 Minify 来合并和压缩 CSS 和 JavaScript 文件,

Minify 介绍

Minify 是一个使用 PHP5 开发的应用,可以帮你合并以及压缩 CSS 和 JS 文件, 通过遵循一些 YSlow 的优化规则来提高网站的性能。它会合并多个CSS 或者 JavaScript 文件,移除一些不必要的空格和注释,进行 gzip 压缩,并且会设置浏览器的缓存头。

我们知道大多数浏览器都有单个域名并发请求数限制,所以如果一个页面中存在很多的资源,比如 CSS 和 JavaScript 文件,那么明显会降低网站的加载速度,比较好处理方式就是把多个文件通过一个请求来访问,这样既不会影响之前的文件维护,又会减少资源的清楚数量,Minify 就是为之而生。

下面两幅图分别是启用 Minify 之前和启用 Minify 之后网站请求时间的一个对比,可以看出启用 Minify 之后,资源的数量从7个变成了2个,加载的数据也从98K下降到29K。

使用 Minify

下载最新的 Minify,然后解压文件到“min”文件夹,并上传到网站的根目录下。

假设网站域名是 http://example.com,那么访问 http://example.com/min/,我们会看到一个“Minify URI Builder”,我们可以输入需要进行合并的文件URI

点击 Update 之后,系统会自动生成一个合并后的 URI:http://example.com/min/?b=js&f=jquery-a.js,jquery-b.js,jquery-c.js。

Minify 在资源首次被请求的时候,会对多个文件进行合并,gzip,去除空格,注释等处理,然后会把处理的结果进行缓存,默认情况下是进行文件缓存,当然也支持 Memcached 缓存。

WP Minify

对于 WordPress 博客来说,就不需要上面这些复杂的步骤了,我们直接下载一个 WP Minify 的插件即可,这个插件会自动获取页面中所有 JavaScript 和 CSS 文件,然后自动合并成两个文件(JS 和 CSS 分别一个),并且自定 Gzip 压缩。

下载:WP Minify