一起CSS

当前位置:一起CSS > 可用性/可访问性 > 文章正文

用Minify加快你的网站速度

Web 性能越来越被重视,其中很重要的一条是减少 HTTP 请求,减少 HTTP 请求包括很多方面,今天来介绍一下用 Minify 减少网站的 HTTP 请求。

Minify 是 PHP5 应用程序,它能合并、压缩 jscss 文件,并且能通过 HTTP gzip/deflate 及一些相关头,优化客户端缓存。

那么以本博客为例来看看 Minify 的效果如何。本博客 js 文件有 5 个,css 文件 1 个。下图是没有使用 Minify 的截图:

下面这一张是使用了 Minify 后的截图:

从两张图片中的数据对比可以看出,css 文件 和 js 文件都有大幅度的压缩,5 个 js 文件也合并成了 1 个(最后一个是 google analytics 生成的),所以加载速度也提高了许多。

Minify 的使用简单,首先到 Google Code http://code.google.com/p/minify/ 下载该应用,解压后把 min 目录上传到网站根目录下,然后把 jscss 文件的路径按 Minify 的方式写,就完成了。那应该怎么写呢?

css 文件按照下面的方式写:

<link media="screen" type="text/css" href="/min/f=style.css" rel="stylesheet" />

如果有多个文件,则用逗号分开,如:

<link media="screen" type="text/css" href="/min/f=style1.css,style2.css" rel="stylesheet" />

js 文件也是一样的:

<script type="text/javascript" src="/min/f=script.js"></script>

你也可以在你的域名后加上 min/ 访问 Minify URI Builder,在这个页面中,你可以输入你需要合并压缩的 jscss 路径,按 Update 按钮后,它会给你生成一个完成的代码,你只需要将代码粘帖到文件中即可。

本博客用了 Minify 后,YSlowMonster 的评分都比较高,感觉很不错。

Minify 在 Google Code 上的地址是:http://code.google.com/p/minify/,你可以前往下载最新版本和了解更多信息。

查看:7,240 评论:11

随机日志

已经有 11 条群众意见

  1. 小骆驼商队

    Drupal自带合并CSS、JS的功能
    如果WordPress也能自带,或者出官方插件,就好了 对话

    #1
  2. 青色小骆驼商队

    有 WordPress 插件版本,你可以前往下载。 对话

    #2
  3. keelii

    不错,说到底应该还是gzip的功劳哈。 对话

    #3
  4. 学夫子

    现在加速的办法很多啊!比如说用gzip 对话

    #4
  5. 书香阁

    新朋友来访 对话

    #5
  6. reizhi青色

    刚找到了这个插件,用了下还不错 对话

    #6
  7. rootdns

    请问上面那个测试软件叫什么来的? 对话

    #7
  8. 育大哥

    太感谢你啦,我都找了好久了。。。 太感动了。 对话

    #8
  9. 育大哥

    有 WordPress 插件版本, 这软件怎么样啊 对话

    #9
  10. 九金头

    WordPress 插件版本 叫什么名字啊?请问。谢谢,希望指教。 对话

    #10
  11. 青色九金头

    你好,WordPress 插件名字是 WP Minify,你可以到 http://wordpress.org/extend/plugins/wp-minify/ 下载。 对话

    #11

我要发表意见