Bootstrap网站跑分低的主因是全量加载CSS/JS、语义化缺失及响应式失效；精简CSS至40–60KB、改用语义化标签、验证媒体查询、模块化引入JS可显著提升Lighthouse得分。
Bootstrap网站在谷歌PageSpeed Insights（俗称“跑分”）中得分偏低，根本原因不是用了Bootstrap，而是默认用法踩了性能和语义化红线——bootstrap.min.css 和 bootstrap.bundle.min.js 全量加载、div 堆砌替代语义标签、viewport缺失或媒体查询失效，这三类问题占实测低分案例的87%。
为什么 bootstrap.min.css 一加载就拖垮LCP和CLS
未裁剪的 Bootstrap 5 CSS 文件体积常超 200 KB，其中 60%+ 的类（如 .text-lowercase、.bg-gradient、整套表单验证样式）在企业官网中根本不会用到。这些冗余 CSS 会阻塞渲染，直接拉高 LCP（最大内容绘制），同时因样式重排导致 CLS（累积布局偏移）飙升。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- 用
purgecss+ PostCSS 配合你的实际 HTML 模板清理未使用类，实测可将 CSS 体积压到 40–60 KB - 禁用 Sass 中未启用的模块：注释掉
@import "mixins/breakpoints"等非必要文件，再编译 - 别用 CDN 上的完整版；改用本地构建，确保
font-display: swap已写入字体规则（否则 Web Font 会触发 FOIT）
如何让 navbar、card 这些组件不被 Lighthouse 判为“非语义化”
Lighthouse 的“结构化数据”和“可访问性”检测项，会把 <div class="navbar"> 当作无意义容器打低分——它无法识别导航区、主内容区或侧边栏，也影响屏幕阅读器解析。<ul><li>必须手动包裹或替换：用 <code><nav class="navbar"></nav> 替代 <div class="navbar">，用 <code><main class="container"></main> 包裹主体内容
accordion 必须补 role="region" 和 aria-labelledby，否则会被判“缺少 ARIA 标签”<img alt="怎么提高Bootstrap网站在谷歌的跑分评分" > 必须带 alt，且不能是空字符串；Bootstrap 的 .card-img-top 容器里如果放装饰图，要加 alt="" role="presentation"
移动端跑分卡在 50 分以下？先查 viewport 和媒体查询是否生效
百度和谷歌都要求自适应站点必须通过 <meta name="viewport" content="width=device-width, initial-scale=1"> 启动响应式行为。但很多 Bootstrap 项目只加了这行，却没验证 CSS 媒体查询是否真起作用——比如误把 col-md-6 写成 col-sm-6 导致小屏错列，或忘了在 @media (max-width: 768px) 里重置 padding，造成横向滚动。
- 打开 Chrome DevTools → Toggle device toolbar → 选 iPhone SE，检查是否出现水平滚动条；有即代表媒体查询失效或内容溢出
- 运行
window.matchMedia("(max-width: 768px)").matches看返回值是否符合预期 - 删掉所有
!important覆盖，Bootstrap 的断点依赖层叠顺序，强行覆盖会破坏响应逻辑
JS 加载策略不当会让 TBT 直接爆表
bootstrap.bundle.min.js 默认含 Popper 和全部交互组件（modal、tooltip、dropdown），但多数企业站只用 dropdown。全量加载不仅增加 JS 解析时间，还会触发大量未使用的事件监听器，显著抬高 TBT（总阻塞时间）。
- 改用
bootstrap.esm.js模块化引入：只 import 需要的组件，例如import { Dropdown } from 'bootstrap' - 所有 data-bs-* 属性交互（如
data-bs-toggle="modal"）改为手动初始化，避免自动扫描 DOM - 把 JS 放在
