CSS文件瘦身(2)—压缩CSS文件

在【CSS文件瘦身(1)—精通CSS缩写规则】一文中提到:

CSS样式如果经过缩写,会变得很苗条,大大减小CSS文件体积,从而达到优化网站速度的目的。

然而缩写比较麻烦,很费时间。有没有方便快捷的减小CSS文件体积的办法呢?有,这就是 压缩CSS(Compress/Minify CSS)

压缩CSS的具体做法是通过工具去除空行、空格,极大地减小CSS文件体积;此外,优秀的压缩工具还可以“压缩”(简写)font-weight和color,实现了 CSS缩写的部分内容。

常见的CSS Minify/Compress工具:

一.线上压缩工具,如:CSS Compressor

CSS Compressor是一个强大的线上CSS压缩工具,支持各种参数设定,还可以指定压缩程度。可读性越小,压缩程度越高,一般使用“高(适度的可读性,档案小)”即可。

CSS Compressor支持各种压缩参数设定,压缩程度可自定义

CSS Compressor支持各种压缩参数设定,压缩程度可自定义

 

选择压缩程度“高”后点击“执行”,即可进行压缩。可以看到,压缩比例22.2%,体积大大减小了。如果选择压缩程度“最高”的话,体积会更小。

CSS Compressor的压缩程度很大

CSS Compressor的压缩程度很大

 

二.Firefox扩展-Yslow

Yslow和Pagespeed扩展类似,是根据Yahoo的标准来测试网页性能的。除了对当前网页进行分析评分外,Yslow还集成了Yahoo的一些网页开发、优化工具,如能够压缩图片的Smush.it和能够压缩CSS的YUI CSS Compressor

Firefox扩展-Yslow集成了Yahoo的一些网页优化开发工具

Firefox扩展-Yslow集成了Yahoo的一些网页优化开发工具

 

三.本地软件,如:File Blender

File Blender 是一个多功能的工具软件,视频、音频格式转换、图片格式转换、PDF合并分割,甚至集成了YUI CSS Compressor。将要压缩的CSS文件拖动到File Blender的主窗口,在弹出的选项里选择Minify即可。

File Blender集成了YUI CSS Compressor

File Blender集成了YUI CSS Compressor

 

四.WordPress插件,如:WP Minify

如果你实用的网站程序是WordPress的话,大可不必使用上面这些压缩工具,WP Minify这类插件也提供了CSS 压缩(并且合并)功能,而且使用插件的好处在于对CSS文件的压缩处理(以及合并处理)是“虚拟”的,只是使得Wordpress不再输出原来的CSS文件,而是使用压缩(以及合并)过的CSS缓存(cache)。除了CSS之外,WP Minify还可以压缩(以及合并)js。

除了CSS之外,WP Minify还可以压缩(以及合并)js

除了CSS之外,WP Minify还可以压缩(以及合并)js

 

  3Comments

  1. 7northfish2   •  

    这个评论插件挺不错的

  2. Terry Chen   •  

    哇,这个非常好,学习了!

Leave a Reply

Your email address will not be published. Required fields are marked *