网站优化之——优化CSS

原创文章，转载请声明。

由于DIV+CSS结构使网页打开速度更快，如今，大多数网站都采用这种方式编写html。但与此同时，很少人注意到css文件的大小，以及其效率。很多页面引用了多个css文件，并且css代码冗余严重。这无疑会造成页面加载速度缓慢。

现在，我就教大家如何优化CSS，压缩CSS的大小，使网页加载速度更快。

首先第一步就是要将你的多个CSS文件合并。CSS文件越少越好，最好只有1个。这样少一个CSS，就直接减少一个http请求。

合并css的方法有很多，最简单的就是手动将css粘贴到一个文件。如果Css文件繁多而紊乱，可以用Minify进行优化。如果你使用wordpress程序可以使用WP Minify插件，这个就是源自Minify的。此插件可以合并压缩css及js文件。当然也有很多其他插件可以实现其功能。

 

其次，就是要优化CSS代码。原则是最大效用的使用CSS选择器，充分利用可继承属性，尽量简短。

例如：

1.尽量用16位颜色代码表示颜色，如果能用三位颜色代码，尽量使用。比如#000 代替#000000。有时候，用颜色名称会比颜色代码还要简短，也可使用。如grey ,red等。

2.合并所有重复定义属性，a{property:x;property:y;} 合并为a{property:y;} 。

3.Margin，Padding等属性的参数尽量简写。margin:1px 1px 1px 1px; 写为 margin:1px; 或a{margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px;} 改为 a{margin:10px;}

4.0PX改为0。

5.尽量去掉空行。

6.合并背景属性参数。

7.如果可以，去除注释。

8.每一个}前的分号可以去掉。

 

如果嫌以上工作量比较大，可以用这个网站或者这个程序对你的css文件进行优化。

只需要将你的CSS代码或者CSS文件的URL路径放在输入框中，然后选择你的压缩级别，最后点击“Procsss CSS”。你就可以看到，CSS代码现在简洁多了，注释语句没有了，还有一些代码也合并了，颜色代码简写了。前后比较一下你的CSS文件，你就会发现，文件变小了很多。

 

另外，如果你还是不满意的你CSS文件大小的话，我们还可以进一步压缩，但是这样以来就会影响到以后的阅读了。可以用Online YUI Compressor。不但可以压缩CSS，还可以压缩JS，压缩后的文件都会变成一行，它把所有换行的空白都去掉了，这样文件更加小了。如果你以后不再修改CSS了，那么可以使用一下。

 

最后，如果能开启服务器端的压缩功能，一定要开启，如zlib或gzip。

 

如此可将页面加载速度提高数倍。