如何以及为什么应该内联关键 CSS

在互联网早期年代，网站主要是用来显示基于文本的信息。慢慢地，连接速度提升了，客户已经能相当快地下载高分辨率的图像和视频了。现在网站就不仅仅是以文本的形式提供所需信息了。网站正变得越来越复杂，带有 CSS 和 JavaScript 框架，以及大量的插件等等，加载这些东西所需的所有文件要花少量时间。

更快的网站可以带来更佳的客户体验，这在网站成功中可以产生巨大的差异。那么要开始提升性能，开发者能做哪些事情呢？其中之一是将关键 CSS 内联，同时异步加载非关键 CSS。本文将一个一个学习这些知识点，以帮助你提升网站的性能。

什么是关键（Critical） CSS？

项目中的关键 CSS 是用来格式化网站首屏（above-the-fold）内容的 CSS。首屏内容是客户在你的网站上最先看到的内容，可以包括导航栏和其它元素。所以，尽可能快地格式化和渲染网站的这部分是很重要的。

这里我想指出的一件事情是，网站访问者可能使用五花八门的带有不同视口的设施访问你的网站。所以，首屏内容本身是搞不定的。要处理这个问题，你还应该把与基础布局和排版相关的所有 CSS 也看作是关键的。

现代 Web 开发实践通常会推荐你内联关键 CSS。像下面这样，把关键 CSS 放在网页中：

 
 
  (压缩了的关键 CSS 放在这里) 
 
 
 (你的HTML标记)
 
 

为什么内联是必需的？

假如你导航到 Google PageSpeed Insights，分析你的网页之一，你可能会看到警告你要通过内联关键 CSS，并且异步加载阻塞渲染的样式，来优化你交付的 CSS。

浏览器只有在加载完成所有 CSS 文件后，才会渲染网页的首屏内容。假如有很多文件需要加载，这就是个大事。

并非所有客户有快速互联网连接，假如在他们可以看到他们冲着来访问的实际内容之前， 还要等待库、CSS 和 JavaScript 下载，这可能是很令人失望的。即便是有快速连接的客户，在某些情况下，也会丧失连接，比方通过隧道时。此时，假如你的网站有内联的关键 CSS，而且在显示主要内容之前不加载其它文件的话，客户仍然可以访问主要内容。

如下的图像阐述了普通网页和优化了的网页的差别。正如你所见，优化了的版本会让客户早 0.5 秒访问到内容。在有很多额外的库需要加载时，这种提升会更显著。