WordPress 前端 CSS 文件合并主要通过优化插件或代码钩子实现，适用于 HTTP/1.1 环境或需要减少渲染阻塞的场景。在 HTTP/2 环境下合并收益降低，且错误合并可能导致样式错乱或缓存失效，操作前需备份站点。
先说结论：合并 CSS 能减少 HTTP 请求数，但需权衡 HTTP/2 特性与样式依赖顺序，优先使用成熟插件而非手动代码。
- 先定位：使用浏览器开发者工具 Network 面板确认当前 CSS 请求数量及加载顺序。
- 先做：安装自动优化插件开启 CSS 聚合功能，并设置排除关键样式文件。
- 再验证：检查前台页面布局是否错乱，确认缓存更新机制是否生效。
快速处理思路
WordPress 环境不建议通过命令行合并 CSS，优先通过插件配置界面操作。安装 Autoptimize 或 WP Rocket 等缓存优化插件，在设置中找到“优化 CSS 代码”或“合并 CSS 文件”选项并启用。若需手动处理，可在主题 functions.php 中使用 wp_enqueue_style 设置依赖关系，但维护成本较高。操作前务必完整备份数据库和文件，防止样式丢失导致前台不可用。
为什么会这样
合并 CSS 的核心目的是减少浏览器建立连接的开销，但在 HTTP/2 协议下该收益显著下降。早期 HTTP/1.1 协议存在队头阻塞限制，多个 CSS 文件会导致多次握手延迟，合并文件能缩短关键渲染路径。现代服务器多支持 HTTP/2 多路复用，多个小文件可并行传输，强行合并反而可能因缓存失效导致整体加载变慢。此外，WordPress 插件生态复杂，不同插件加载的 CSS 存在依赖顺序，错误合并会破坏层叠规则导致布局崩坏。
分步处理
第一步备份站点数据，使用托管商快照或插件导出数据库与 wp-content 目录。第二步安装优化插件，推荐 Autoptimize 或 W3 Total Cache，进入设置页面找到 CSS 选项卡。第三步启用聚合功能，勾选“聚合 CSS 文件”或“Combine CSS”，同时勾选“内联关键 CSS”以减少渲染阻塞。第四步设置排除规则，将 admin-bar.css 或需要独立加载的样式表填入排除列表，防止后台样式影响前台。第五步清除所有缓存，包括插件缓存、服务器缓存及 CDN 缓存，确保新配置生效。
怎么验证是否生效
打开浏览器开发者工具 Network 面板，刷新页面并筛选 CSS 资源，观察请求数量是否减少且出现合并后的新文件名。检查页面视觉效果，确认导航栏、按钮、表单等核心元素无错位或样式丢失。使用 PageSpeed Insights 或 GTmetrix 测试，查看“减少 CSS 请求”项评分变化，公开资料中没有看到可靠的量化数据证明具体提速百分比，以实际感知为准。检查缓存头信息，确认合并后的 CSS 文件带有版本参数或 hash 值，确保更新后可强制刷新。
常见坑
合并 CSS 可能导致后台管理栏样式丢失，因为 admin-bar.css 被错误聚合到前台文件中。部分滑块或弹窗插件依赖特定 CSS 加载顺序，合并后可能引发 JavaScript 错误。HTTP/2 环境下过度合并可能降低缓存命中率，用户修改一处样式需重新下载整个合并文件。多语言站点需注意 RTL 样式表是否被正确区分，避免左右布局混淆。
常见问题
合并 CSS 文件一定会提升网站速度吗
不一定，HTTP/2 环境下收益有限，甚至可能因缓存失效变慢。
合并后页面样式错乱怎么恢复
立即禁用插件的 CSS 合并选项，清除缓存并还原备份文件。
需要手动修改 functions.php 来合并吗
不需要，除非有特殊依赖需求，否则插件方案更安全易维护。