CSS 压缩器 — 免费的浏览器端 CSS 压缩工具

国内前端团队将 CSS 压缩视为必要的生产步骤，因为 Google Lighthouse 性能审计会对未压缩的样式表标记警告。手工编写的 Next.js 或 Remix 营销站去除注释、缩进和冗长十六进制形式后，通常能节省 20 至 40%，足以将最大内容绘制（LCP）从黄色推入绿色区间。阿里云 CDN 和腾讯云 COS 按传输字节计费，每月数百万页面浏览量的累计节省相当可观。在浏览器标签页中运行此步骤后再提交，无需安装 PostCSS 插件，即可获得相同的字节数。

CSS 压缩是如何工作的

压缩器用一个感知状态的词法分析器遍历您的样式表，区分受保护区域（字符串字面量和 url() 值）与可安全折叠和去除的可编辑空白。

保护字符串和 URL. 在进行任何其他转换之前，词法分析器识别所有带引号的字符串（"…" 或 '…'）和所有 url(…) 参数，并原样存储。后续处理不会触碰这些字节，因此包含空格的 background-image URL 或包含标点的 content 属性会被完整保留。
删除注释. 开启开关时，/* … */ 块会被移除。如果同时开启许可证注释开关，/*! … */ 块会保留，以确保 MIT、Apache 和 BSD 许可证头按要求出现在输出中。
折叠空白. 所有连续的空格、制表符和换行折叠为单个空格，然后 CSS 结构字符 {、}、;、: 和 , 周围的空白被完全去除。选择器和值列表以与浏览器解析器读取相同的方式重排。
优化值. 可选处理包括：十六进制颜色代码小写化、将成对的 6 位十六进制通道折叠为 3 位简写（#aabbcc → #abc），以及去除零值的尺寸单位（0px → 0）。去除零单位的处理会跳过 transform() 调用内部的值，因为那里的单位有实际意义。
报告字节节省. 原始文本和压缩文本均通过 new TextEncoder().encode(…).byteLength 计量，这与 CDN 或 HTTP 服务器在网络上看到的 UTF-8 字节数相同。指标条显示原始大小、压缩后大小、节省字节数和节省百分比。

为什么要压缩 CSS

减少渲染阻塞加载时间. 浏览器在解析完 CSS 之前不会渲染任何像素。样式表减少 30% 可缩短阻塞时间，提升首次内容绘制（FCP），并直接体现在 Lighthouse 性能评分中。
降低 CDN 出流量费用. CloudFront、Cloudflare 和 Fastly 均按 GB 出流量计费。每次页面访问都会传输的样式表减少 20%，一旦月流量突破数百万次，便会成为账单上真实可见的节省。
更小的嵌入式和邮件 CSS. 事务邮件模板将 CSS 内联以兼容 Outlook 和 Gmail 的渲染特性，每个多余字节都会让您更接近 Gmail 的 102 KB 裁剪阈值。内联前先压缩，可使邮件保持在限制以内。
无需构建工具依赖. 一次性临时任务、没有构建流程的老旧仓库，以及隔离环境并不总是有条件安装 Node 工具链。您可以在这里直接运行，无需安装 PostCSS、cssnano 或任何其他工具。

常见应用场景

CSS 压缩几乎出现在所有前端构建流程的末尾，以及几个字节数量非常关键的运行时场景中。

生产构建流程：Webpack、Vite、Rollup 和 Parcel 在生产模式默认配置中均包含 CSS 压缩步骤。在提交前在此运行，可在不触发完整构建的情况下验证输出。
在 <style> 标签中嵌入 CSS：将关键 CSS 内联到 HTML 文档的服务端渲染框架，与独立样式表一样受益于字节节省，且更小的内联 CSS 能缩短首字节时间（TTFB）。
事务和营销邮件：邮件 HTML 内联所有 CSS，因此样式表每增加一 KB 都会增加邮件总大小。内联前先压缩，可使邮件远低于 ESP 大小上限。

一个实际示例

粘贴一个带两空格缩进、选择器之间有空行、顶部有许可证注释块，以及 #FFFFFF、margin: 0px 等冗长形式的 1 KB 规则集。开启所有选项后，输出折叠到约 600 字节——节省约 40%——而渲染后的页面与源代码字节等价。

压缩会改变我的 CSS 行为吗？

使用默认开关时不会。压缩器只去除 CSS 解析器本已丢弃的字节——空白、注释、可选的末尾分号——并跳过 transform() 内部单位有意义的部分。所有选择器、属性和值均会保留。

支持 SCSS 或 LESS 吗？

只有编译为纯 CSS 后才支持。SCSS 和 LESS 语法（变量、嵌套、混合、& 父选择器）不是合法的 CSS，压缩器会损坏它们。请先编译您的预处理器源文件，再将编译输出粘贴到这里。

为什么我的许可证注释被删除了？

能节省多少？

手工编写的 CSS 通常可节省 15 至 35%。包含大量注释、深度缩进或大量颜色字面量的文件可达 40%。来自 Sass 或 CSS-in-JS 的编译输出通常已部分压缩，节省较少——一般为 5 至 15%。

在浏览器标签页中运行 CSS 压缩，完全跳过 Node 工具链。在上方粘贴样式表，调整选项以控制处理力度，然后复制输出或以 .min.css 格式下载。无需上传、无需账户、无需第三方库。

压缩 CSS _

// 相关工具