bootstrap.min.css会阻塞首屏渲染，因其作为外部样式表触发浏览器暂停DOM构建与渲染，直至200KB+全量CSS下载、解析并构建CSSOM；即使仅用.btn和.row，冗余组件样式仍拖慢FCP达300–800ms。

为什么 bootstrap.min.css 会阻塞首屏渲染 浏览器解析 HTML 到 <link rel="stylesheet" href="bootstrap.min.css"> 时，会暂停 DOM 构建和渲染，直到该 CSS 下载、解析完成并构建出 CSSOM。而完整版 bootstrap.min.css 压缩后仍超 200KB，含 tooltip、carousel、offcanvas 等你根本没用的组件样式。哪怕只用了 .btn 和 .row，浏览器也得处理全部规则——这直接拖慢 FCP（首次内容绘制），首屏白屏时间可能多出 300–800ms。

按需编译 Sass 是最彻底的裁剪方式 Bootstrap 官方提供 Sass 源码，允许你只导入实际需要的部分。关键点在于顺序和取舍：

• 必须前置导入三件套：@import "bootstrap/scss/functions";、@import "bootstrap/scss/variables";、@import "bootstrap/scss/mixins";，否则后续模块报错如 SassError: Undefined variable "$grid-columns"
• 只显式引入用到的组件，例如：

  @import "bootstrap/scss/grid";
  @import "bootstrap/scss/utilities";
  @import "bootstrap/scss/buttons";
  @import "bootstrap/scss/forms";

• 绝对不要写 @import "bootstrap/scss/bootstrap"; —— 这等于又加载了全量
• 如果用 Vite/Webpack，确保 JS 里也没 import 'bootstrap/scss/bootstrap';，否则构建时 CSS 会被打包进 vendor chunk，失去控制权

内联关键 CSS + 异步加载剩余样式 即使按需编译后 CSS 缩到 40KB，仍建议进一步拆分：

• 提取首屏可见区域（header、hero、cta button）用到的规则，内联进 HTML 的 <style> 标签中，体积控制在 ≤14KB
• 工具推荐 critical（CLI）或 critters（Webpack 插件），手动提取极易遗漏或引入 @import/@font-face 导致额外请求
• 剩余非关键 CSS（如 modal、dropdown、accordion 样式）用 rel="preload" + onload 注入：

  <link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="non-critical.css"></noscript>

• 避免用 media="print" 做异步 hack：若表达式匹配当前环境（比如误写成 media="all"），照样阻塞渲染

CDN 引入时容易忽略的三个硬伤 很多人换 CDN 就以为优化完了，结果反而更慢：

• 缺少 integrity 属性：不加 SRI（Subresource Integrity）会导致跨站缓存无法复用，且存在中间人篡改风险；正确写法：<link rel="stylesheet" href="<a href="https://www.php.cn/link/963637be23e343ea96024053fdecd723">https://www.php.cn/link/963637be23e343ea96024053fdecd723</a>" integrity="sha384-...">
• 用未压缩版本或带 source map 的文件：CDN 上必须选 .min.css 和 .min.js，末尾带精确版本号（如 @5.3.3），避免自动升级破坏样式
• 同时引入 CDN + 本地打包副本：HTML 里既有 CDN 链接，又通过构建工具打了本地 bootstrap.css，浏览器会多发一次请求，毫无意义

真正卡首屏的从来不是 Bootstrap 本身，而是你让它干了太多它不该干的事。删掉不用的组件比调任何构建参数都管用，而内联关键 CSS 是唯一能绕过网络延迟影响渲染的确定性手段。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载