内联关键css需覆盖所有目标设备断点，工具生成时应指定多宽度并检查响应式规则、字体及动态类；非关键css须用media属性link并行加载；图片响应式需srcset、sizes与loading="lazy"协同。
内联首屏关键 CSS，但必须覆盖所有目标设备断点
只把移动端样式内联，结果平板用户打开页面时导航栏错位——这是常见翻车点。关键 CSS 不是“最小可用样式”，而是「首屏在所有目标设备上正确渲染所需的全部规则」。比如一个折叠菜单，在 @media (min-width: 768px) 下会展开为横向导航，那这条规则也得进内联块。
实操建议：
- 用工具（如 critical CLI 或 Webpack 插件）生成 critical CSS 时，明确指定多个 viewport 宽度： --width 375 --width 768 --width 1200
- 手动检查生成结果是否包含所有首屏断点下的布局、字体、颜色、交互状态（如 .nav-open .menu）
- 避免把 @font-face 或图标字体声明漏掉——它们不占体积，但缺失会导致 FOIT/FOUT
用 link[media] 按条件加载非关键 CSS，别信 @import
在 CSS 文件里写 @import url("desktop.css") screen and (min-width: 1200px);，等于主动给浏览器下指令：“请串行加载，别急着画页面”。它会阻塞整个 CSSOM 构建，哪怕用户用的是手机。
正确做法是把条件判断提到 HTML 层：
- <link rel="stylesheet" href="base.css">（含所有移动优先基础样式）
- <link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px)">
- <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1200px)">
浏览器会并行下载全部 link，但只对匹配 media 的解析和应用——不匹配的连 CSSOM 都不进
注意：media 值必须合法。写成 media="(min-width: 768px)"（缺 screen and）在部分浏览器中会被忽略；写成 media="not all" 则永远不生效
压缩与删除未用 CSS 时，警惕 JS 动态类被误删
用 PurgeCSS 扫描 HTML 后删掉没出现在静态 DOM 中的类，很高效。但如果你的弹窗靠 JS 添加 .modal--open、暗色模式靠 JS 切换 .theme-dark，这些类大概率被当成“死代码”干掉。
解决方案：
- 关闭 purgecss 的 defaultExtractor 或设 rejected: false（保留所有类）
- 或显式保留动态类：在 CSS 里加注释块 /* purgecss start ignore */ .modal--open, .theme-dark { } /* purgecss end ignore */
- 更稳妥的做法：构建时传入 JS 入口文件路径，让 PurgeCSS 能扫描到 classList.add() 调用（需配置 content 选项支持 JS）
图片响应式不能只靠 loading="lazy"
loading="lazy" 只控制加载时机，不解决“该加载哪张图”的问题。如果 <img src="large.jpg"> 还挂着 loading="lazy"，移动端仍会先触发懒加载，再从 srcset 里选图——而若 sizes 写得不准，它可能真就选了 large.jpg。
必须三者齐备：
- srcset 提供多尺寸源：srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
- sizes 准确描述视口中的显示宽度：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
- loading="lazy" 控制加载节奏
否则，懒加载只是个安慰剂
真正难的不是知道该做什么，而是每次改完 CSS 或 JS 后，重新验证 critical CSS 覆盖范围、media 匹配逻辑、以及 PurgeCSS 是否误删了刚加的动态类——这些环节一漏，性能优化就变成负优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
