做为有着13年网站建设经验的我们，一直以来都会被客户要求优化CSS以加快页面加载速度，我们也在不断努力缩短网站的加载时间。它已经非常快地加载了，但是我知道仍有改进的空间，其中之一就是CSS加载。我们今天来分享一下这整个过程。

如果要缩短加载时间，则减小CSS文件的大小是个好主意。如今，使用一些工具在构建时修改CSS（后处理程序或PostCSS）以为较旧的浏览器或其他一些增强功能提供后备功能已经很普遍了。就我我们而言，CSS具有为CSS变量生成的后备版本和具有旧版flexbox语法的前缀。这似乎是一个琐碎的问题，影响很小，但是对于像这样的小型样式表，结果节省了大约3 kB。这对于很少的工作来说是一个很大的进步。对于大型CSS，它有可能产生更大的影响。

我们压缩了CSS文件，但仍然需要下载它。我们可以通过减少网络请求来加快网页加载时间。最好的网络请求根本就不是请求。我们可以将样式直接内联到HTML中，从而无需下载任何外部样式表，从而节省了时间。当然，在每个页面上都包含一个完整的9kb样式表（对于较大的项目而言较大），并不是十分有效。因此，我们将仅包含必要的样式，以将页面设计的一部分呈现在折叠上方，并延迟加载其余样式。这样，我们仍然可以利用浏览器缓存其他页面，并使我们的网页加载速度更快。由于我们包含了对页面渲染至关重要的样式，因此该技术称为Critical CSS。