19种优化css和加快网站速度的方法

01. 使用简写

比如     p { margin: 1px 2px 3px 4px; }

02. 查找并删除未使用的 CSS

删除不必要的部分 CSS，j显然会加快网页的加载速度。谷歌的Chrome浏览器有这种开箱即用的功能。只需转到查看>开发人员>开发人员工具，并在最近的版本中打开Sources选项卡，然后打开命令菜单。然后，选择Show Coverage，在Coverage analysis窗口中高亮显示当前页面上未使用的代码，让您大开眼界。

打开谷歌浏览器开发都工具，在 Conlse 旁边更多选择 Coverage，就可以看到未使用的 CSS, 点击对应的项，高亮显示当前页面上未使用的代码，让你大开眼界：

03. 以更便捷的方式做到这一点

在逐行分析中导航并不一定便捷，使用谷歌浏览器的 Audits 就可以快速帮我们分析，使用方式，打开开发者工具，点击 Audits 栏位，点击 Run audits 后就开始分析结果。

04. 注意这些问题

用压缩后的 CSS 文件替换 未压缩CSS文件之后，对整个网站进行彻底的测试——没有人知道优化器会导致什么错误。

05.内联关键 CSS

加载外部样式表需要花费时间，这是由于延迟造成的——因此，可以把最关键的代码位放在 head 中。但是，请确保不要做得过火，记住，执行维护任务的人员也必须读取代码

06.允许反并行解析

@import 将 CSS 样式方便添加代码中。遗憾的是，这些好处并不是没有代价的:由于 @import 可以嵌套，因此无法并行解析它们。更并行的方法是使用一系列 标记，浏览器可以立即获取这些标记。

07. 用 CSS 替换图片

CSS过 滤器提供了一种节省资源的替代方法。例如，以下这个代码片段可以确保所讨论的图片显示为其自身的灰度版本。

08.使用颜色快捷方式

速记描述或颜色名称可以更短

09. 删除不必要的零和单位

CSS 支持多种单位和数字格式。零始终是零，添加维度不会为包含的信息附带价值。

10. 消除过多分号

这种优化需要谨慎，因为它会影响代码的更改。CSS的规范允许省略属性组中的最后一个分号。

11.使用纹理图集

由于协议开销的原因，加载多个小图片的效率很低。CSS 精灵将一系列小图片组合成一个大的PNG 文件，然后通过 CSS 规则将其分解。

12. 省略 px

提高性能的一个简单方法是使用CSS标准的一个特性。为 0 的数值默认单位是 px—— 删除 px 可以为每个数字节省两个字节。

13. 避免需要性能要求的属性

14. 删除空格

空格——考虑制表符、回车符和空格——使代码更容易阅读，但从解析器的角度看，它没有什么用处。在发布前删除它们，更好的方法是将此任务委托给 shell 脚本或类似的工具。

15. 删除注释

注释对编译器也没有任何作用。创建一个自定义解析器，以便在发布之前删除它们。这不仅节省了带宽，而且还确保攻击者和克隆者更难理解手头代码背后的思想。

16. 使用自动压缩

17. 在 NPM 运行它

18. 保持 Sass 的检查

19. 设置缓存