首页 > 服务器 > 服务器环境 > 使用Minify压缩js和css优化网站速度
2015
03-10

使用Minify压缩js和css优化网站速度

Minify介绍

Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像,不过Minify可以合并任何你想要合并的JavaScript和CSS文件。

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

下面两幅图分别是启用Minify之前和启用Minify之后网站请求时间的一个对比,可以看出启用Minify之后,资源的加载时间从250ms减少到了125ms,总共节省了50%的时间。

使用Minify压缩js和css优化网站速度 - 第1张  | 扩软博客
使用Minify压缩js和css优化网站速度 - 第2张  | 扩软博客

安装使用

1.Minify下载地址

Github    GoogleCode

2.Minify安装方法

下载后解压,直接上传 min 文件夹到网站的根目录。如:blog.kuoruan.com/min。

3.Minify使用方法

首先修改 min 目录下的 config.php 文件,修改内容如下:

然后访问blog.kuoruan.com/min,会自动跳转到blog.kuoruan.com/min/builder/,在这里输入刚刚设置的账号密码进入。

注意,首次使用时我遇到了一个问题。

Uh Oh. Minify was unable to serve Javascript for this app. To troubleshoot this, enable FirePHP debugging and request the Minify URL directly. Hopefully the FirePHP console will report the cause of the error.

使用Minify压缩js和css优化网站速度 - 第3张  | 扩软博客

各种百度谷歌啊,最后发现解决方法非常简单(点击查看),只需要把网站默认主页设置中的 index.php 提到首位就行了。

使用Minify压缩js和css优化网站速度 - 第4张  | 扩软博客

 

现在来到了这个界面,在这里写入需要合并加载的js或者css文件,点击“update”,就会生成一个新的链接,在网页中添加这个新链接就行了。

使用Minify压缩js和css优化网站速度 - 第5张  | 扩软博客

 

Minify生成的链接是带“?”的动态链接,当然你也可以使用伪静态功能来去掉链接里的问号。

Minify的Wordpress插件

由于我是用的Wordpress,当然有更简便的方法来使用Minify。

推荐两个Wordpress插件: BWP-Minify (解决Better WordPress Minify(BWP Minify)无法合并压缩JS和CSS文件)  W3 Total Cache

最后编辑:
作者:

百度ID:“度娘程序员”,博主。

捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

使用Minify压缩js和css优化网站速度》有 3 条评论

  1. Google Chrome 51.0.2704.63Google Chrome 51.0.2704.63Windows 10 x64Windows 10 x64

    我也在使用这个,效果不错,它可以通过设置配置文件可以把一组文件打包,通过一个短地址引用,不需要具体文件名。

  2. Pingback 引用通告: Better WordPress Minify | 511遇见

  3. Google Chrome 37.0.2062.124Google Chrome 37.0.2062.124Windows 7Windows 7

    小叶紫檀具有不可思议的神奇力量。

发表回复

你的邮箱地址不会被公开,垃圾评论将被删除。

有人回复时邮件通知我