什么是 CSS？
层叠样式表或 CSS 是一种用于根据标记语言文档中提供的内容定义网站的视觉表示的语言，它被认为是 Web 和 HTML 和 JavaScript 的“基石技术”之一。 CSS 通常存储在外部样式表中，或者 .css 文件也可以直接集成到 HTML 文档中。
CSS 允许分离网站的展示和内容，这使得网站更容易被不同的设备访问。 将颜色和字体信息与内容分开还可以降低网站的复杂性，因为多个 HTML 页面可能共享同一个 .css 文件。 但是，如果使用不当，CSS 会严重影响网站的性能。
CSS 性能和网站速度
在评估网站的速度时，需要衡量各种性能指标，但有两个比较突出：
第一个字节的时间
开始渲染的时间
第一个字节的时间是访问者在请求您的 URL 后接收第一个数据字节所用的时间，而开始呈现的时间是用户的浏览器实际开始显示内容的时间点。 前者在很大程度上取决于您的服务器设置，但后者更多地取决于 CSS 结构。
也就是浏览器直到收到数据才开始渲染，所以到第一个字节的慢时间显然缩短了开始渲染的时间。 因此，在优化 CSS 性能之前，您应该优先考虑服务器的任何潜在问题。
CSS 性能如何影响开始渲染的时间？
在浏览器开始布局网页内容之前，它需要 HTML 和 CSS 指令。 因此，在下载并处理完所有外部样式表后，才能开始渲染。 这需要的往返次数越多，等待的游客就越多。
使用外部 CSS 涉及发出一个或多个 HTTP 请求，因此您的目标应该是尽可能减少所需请求的数量。 例如，将插件、横幅和布局链接样式放入单个 .css 文件可以显着加快首次渲染时间。
内联更大的 CSS 资源
如果您尝试内联大型 CSS 文件，您可能会从性能测试工具收到警告，即您的首屏内容太大。 因此，对于较大的 CSS 文件，您应该只内联渲染主要内容所需的 CSS。 然后，您应该异步加载完整的样式表，以便页面可以在解析时继续呈现。
Critical CSS 是一个 GitHub 项目，可帮助您选择哪些 CSS 放在首位，但您还应该手动检查以确保您没有错过关键组件。
在缩小和 Gzip 压缩之后，所有主要样式、脚本、标记的总重量最好小于 14 kb。 由于 14 kb 大致是服务器在第一次往返中可以发送的数据量，因此保持在该阈值以下允许用户在他们收到的第一个数据包中获取所有内容。
通过异步加载和缓存提高 CSS 性能
上述技巧为用户的浏览器节省了到服务器的往返行程，因此他们在第一次访问时可以更快地看到内容。 不幸的是，用户的浏览器没有缓存 CSS，所以每次访问都必须从头开始加载所有内容。 如果你有相当简单的 CSS，这不是问题。 但是，在大多数情况下，您仍然希望用户的浏览器缓存大部分 CSS，这就是为什么许多 Web 开发人员只是在他们的主页或登录页面上内联 CSS，而在他们网站的其余部分使用外部 CSS。
解决此问题的一种方法是异步加载它，不幸的是，无法本地异步加载 CSS 文件，但您可以使用像 loadCSS.js 这样的脚本来完成这项工作。
提高 CSS 性能的 7 个技巧
1.使用preload/HTTP/2推送
预加载资源提示告诉浏览器提前获取资源。 为了让 CSS 领先一步，请将其设置为 HTML 文档中的链接标签，如下所示：
<link rel=”preload” href=”/css/styles.css” as=”style”>
或者，您可以在服务器配置中包含 preload 作为 HTTP 标头：
链接：</css/styles.css>; 相对=预载； as=风格
如果您的服务器配置为使用 HTTP/2，则预加载将被解释为服务器推送。 一些 CDN 还支持服务器推送，这将有助于进一步加快高优先级 CSS 文件的交付。
2. 不要内联所有内容
不要内联 HTML 文件中的所有内容，因为这会导致初始 HTML 文档的大小增加，因此 TTFB 会花费更长的时间。
3. 连接和缩小 CSS
将样式表连接到一个文件中并发送缩小版本可以大大减少 CSS 的大小。
4.减小样式表的大小
样式表越小，它们包含的选择器就越少，浏览器在渲染页面时要做的工作就越少。 因此，您应该尽最大努力删除不需要的选择器，利用实用程序类并避免重复的 CSS 代码，您可以使用诸如 uncss 之类的工具来确保您的样式表仅包含必要的 CSS 代码。
5. 选择您的选择器
说到选择器，使用后代选择器会强制浏览器检查所有后代元素是否匹配，因此它们会产生比旋转更多的问题。 通用选择器也可能非常昂贵，因此也要避免使用它们。 尽可能使用浅选择器。
6.避免一些属性
一些 CSS 属性比其他属性更臃肿，因此应谨慎使用，以下是一些需要注意的属性：
边界半径
盒子阴影
筛选
地点：固定
改变
如果它们每页出现数百次，则整体 CSS 性能可能会受到影响。
7.避免@import
不要使用 @import 指令来包含外部样式表，因为它会阻止并行下载，这是一种古老的做法。 相反，请始终使用链接标签
