层叠样式表(CSS)对网站的风格设计至关重要，但大的CSS文件会减慢或阻碍页面的渲染。 CSS小型化使CSS文件更小。
阅读本文后，您将能够：
相关内容
订阅 TheNET，这是 Cloudflare 每月对互联网上最流行见解的总结！
复制文章链接
CSS小型化减少了层叠样式表（CSS）文件的大小，从而使其加载速度更快。 CSS最小化的作用是消除CSS标记中所有不必要的字符和空格，而不影响浏览器对其的解释。
CSS文件包含对HTML元素进行格式化的指令。 当它们加载得更快时，网页的整体加载速度就会更快，就像穿上轻便的衣服有助于慢跑者跑得更快。 快速加载提高了用户体验和 SEO 页面的价值， 页面速度的提高甚至可以帮助提高转换率。
作为一个例子，这个简单的样式表有几行代码，同时还有供开发人员阅读的注释：
/* paragraph styling here */
p {
font-family: arial;
color: green;
background-color: white;
}
/* links */
a:link {
color: blue;
}
a:visited {
color: white;
}
在对CSS进行最小化处理后，它只是一个被压缩的行，并且注释被删除：
p{font-family:arial;color:green;background-color:white;}a:link{color:blue;}a:visited{color:white;}。
虽然这个文本对人类来说可读性较差，但浏览器阅读和解释第二个版本的方式与第一个版本完全相同。 最小化版本的优势是加载速度更快，因为它占用的空间更少。
在浏览器显示一个网页之前，它必须知道网页上有哪些元素（如文本、图像和其他多媒体），以及所有东西在网页上的位置。 就像承包商在开始施工前需要一个建筑物的蓝图一样，浏览器在开始渲染页面前需要一个网页的"蓝图" 。
在收到一个网页的HTML文件后，浏览器开始构建一个叫做 Document Object Model (DOM) 树的东西；这就像是页面上所有元素的一个粗略的轮廓或草图。 浏览器还解析所有 <style> 标签和链接的CSS文件，以建立一个CSSOM树，它映射出所有这些页面元素将如何被样式化。
最后，浏览器将DOM和CSSOM结合起来，创建一个"渲染树。" 一旦渲染树创建完毕，浏览器就开始绘制页面。 在这种情况发生之前，用户看到的是一个空白的屏幕。
结果是：在浏览器完成下载和读取CSS之前，页面无法出现。
在网络开发中，任何必须在页面显示给终端用户之前加载的元素或功能都被称为"渲染阻断资源。" CSS就是这样一种资源。 必须尽可能地优化阻挡渲染的资源，以便快速加载。
大型阻断资源需要更长的时间来下载，导致浏览器等待--实际上是阻断了页面--所以在用户看来，好像什么也没有发生。 像这样的延迟往往导致用户离开页面（"bounce" ）。
它们还影响到 Core Web Vitals，谷歌用来衡量页面性能的指标--特别是Largest Contentful Paint（LCP），它衡量页面中最大的元素需要多长时间加载。 Core Web Vitals得分较低会导致谷歌在搜索结果中的排名降低，因此该页面总体上可能获得较少的流量。
幸运的是，有许多简化工具可用于CSS。 也许最方便的方法是使用与网站的 内容交付网络（CDN）集成的最小化工具，这种服务 缓存 并交付内容。 CDN应该能够提供简化服务以进一步提高性能。
Cloudflare Auto Minify 包括在Cloudflare CDN中。 网站所有者可以从他们的Cloudflare仪表板上选择CSS文件（以及JavaScript和HTML文件）来进行最小化。
从技术上讲，CSS最小化与CSS压缩是不同的，尽管两者的目标是一样的：减少文件的大小。 最小化通过删除注释和字符改变了代码。 压缩通过使用压缩算法（如gzip）使文件变小，实际上并不改变文件的内容。
由于减化后的CSS通常不容易阅读，减化会使开发者更难手动识别和修复CSS标记中的错误。
另外，仅靠最小化CSS还不足以提高网站的 ，。 它可能会为网站争取到几毫秒的时间，但网站运营者必须采取额外的行动，才能看到明显的 性能改进 - 包括 图像优化，浏览器HTTP缓存，以及更多。
JavaScript最小化 是一个类似的概念，但是针对可执行的JavaScript代码。 注释、空格和其他额外的字符都被删除，因此，.js 文件可以更快地加载和执行。 JavaScript和CSS小型化都有助于提高网站的加载速度，并能带来更好的用户参与度和更多的有机流量。
网站运营商可以使用Cloudflare CDN对CSS和JavaScript进行最小化处理 - 在此了解可用的Cloudflare计划。