关键CSS必须内联且不超过14KB，以避免阻塞渲染；需提取首屏必需样式、禁用@import、配合CSP nonce，并通过preload+onload异步加载非关键CSS。
关键CSS必须内联，且不能超14KB
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 就会暂停 DOM 构建和渲染，直到该 CSS 下载并解析完成——哪怕它只用在页脚。实测一个 200KB 的 main.css 在弱网下耗时 800ms，期间页面完全白屏。
解决办法是提取首屏必需样式（如 header、.hero-banner、按钮基础样式、@font-face），直接写进 的 <style></style> 标签里。不是整站 CSS，通常只占原始体积的 10%–30%。
- 必须放在所有
<link rel="stylesheet">之前，否则仍可能被后续资源拖慢 - 禁用
@import：它会触发额外 HTTP 请求并阻塞解析，哪怕只写在内联<style></style>里也不行 - 若启用 CSP，需加
nonce（如<style nonce="abc123"></style>），并在响应头中同步配置Content-Security-Policy - 内联内容建议控制在 ~14KB（gzip 后约 4–8KB），避免跨 TCP 包影响 TTFB
非关键CSS要用 preload + onload 异步加载
@import 是串行阻塞式加载，比 <link> 多一次网络往返和解析依赖，极易成为首屏瓶颈。常见错误是在 style.css 里写 @import "reset.css"，导致 FCP 延迟 300ms+。
正确做法是用原生方案延迟加载折叠区域、模态框、图表库等非首屏样式：
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet" media="print" onload="this.media='all'">：媒体不匹配时异步加载，匹配后立即生效；IE 不支持onload，需降级 fallback - 拆分文件 + 条件
media：比如dark-theme.css设为media="(prefers-color-scheme: dark)"，desktop.css设为media="(min-width: 1024px)" -
<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">：必须三要素齐全——rel="preload"+as="style"+onload切换rel；漏掉as="style"就等于没写 - 配
<noscript><link rel="stylesheet" href="critical.css"></noscript>给禁用 JS 的用户兜底
HTML结构臃肿直接影响解析速度
DOM 树越深、节点越多，浏览器构建和遍历成本越高。很多“慢”其实是结构冗余导致的，不是代码逻辑问题。
- 删除无意义嵌套，比如连续多个
<div><div><div>，改用语义化标签（<code><header></header>、<section></section>、<article></article>） - 移除注释、空格、换行符——生产环境必须压缩 HTML，但别在开发期靠删空格“优化”
-
<link rel="preload" as="font">必须加as="font"属性，否则无效；字体没加该属性，font-display: swap也救不回来 - 第三方脚本优先沙箱化：
<iframe sandbox="allow-scripts" src="..."></iframe>或动态插入 +onload控制节奏 - 所有非首屏
<img alt="页面渲染优化实战：HTML与CSS协作提升加载速度" >必须加loading="lazy"；首屏图片则去掉该属性，确保立即加载 - 响应式图片用
srcset+sizes，例如：<img src="a.jpg" srcset="a-400.jpg 400w, a-800.jpg 800w" sizes="(max-width: 600px) 400px, 800px" alt="页面渲染优化实战：HTML与CSS协作提升加载速度" > - 图标类小图（≤1KB）可直接 Base64 内联到 CSS 背景里，省一次请求
- 字体子集化 +
font-display: swap是标配，但前提是<link rel="preload" as="font">已正确定义
图片和字体加载时机比格式更重要
WebP/AVIF 再小，如果首屏图片没设 loading="eager"（或干脆不设），浏览器仍可能懒加载；而一张 200KB 的 JPG，只要加了 loading="lazy" 且不在首屏，就不会拖慢 FCP。
关键点常被忽略：内联 CSS 的大小阈值不是硬性限制，而是受 TCP 初始拥塞窗口影响——超 14KB 容易分包，首包无法携带全部关键样式，TTFB 和 FCP 都会跳变。这不是理论，是真实弱网下的 packet capture 结果。
