关键CSS必须内联且体积≤10KB，否则HTML解析或渲染可能被阻塞；需用critical等工具按真实移动端视口提取首屏必需样式，禁用@import和media属性，移除对应外链link，并配合preload+onload异步加载非关键CSS。
关键CSS必须内联，且体积别超10KB
首屏样式不内联，浏览器就得等CSSOM建完才敢画第一帧——哪怕只慢200ms，用户也觉得“卡”。critical工具能提取首屏用到的CSS，但别无脑全塞进去。
- 用Chrome DevTools的
Coverage面板看真实使用率，红色部分就是可删的 -
<style>里禁用@import，它会触发新请求，等于白内联 - 内联后记得删掉对应外链
<link rel="stylesheet">，否则样式重复可能覆盖错 - 体积超过10KB时，HTML本身传输变慢，得权衡：宁可拆出最紧要的按钮/标题样式，其余走异步加载
非关键CSS必须异步加载，避免FOUC和样式抖动
内联critical CSS只是前半步。如果剩下的CSS还用<link rel="stylesheet">放在<head>里，照样阻塞；如果直接用loadCSS()插入，又容易闪白。
- 标准做法是：用
loadCSS()插入非关键CSS，并配合onloadCSS()回调移除一个占位<link media="only x"> -
<style>块必须放在<head>末尾、紧挨着非关键<link>之前——顺序错会导致样式覆盖异常 - 别在
<style>里写@import或滥用!important，它们会触发额外解析阻塞
preload不能瞎配对，as属性写错等于没写
<link rel="preload">不是“优先下载所有”，它是高优先级指令，写错反而抢带宽、挤掉HTML本身。
- 首屏
<img>显式设loading="eager"，非首屏才loading="lazy" - 别
preload图片：浏览器不会按需解码，内存白占，还可能拖慢关键CSS下载 - 只对当前导航「马上就要用」的资源
preload，比如首屏字体：<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>，漏crossorigin字体直接失效 -
as属性必须准确：as="style"才能复用预加载的CSS；写成as="fetch"，优先级降为low，等于没写
弱网下首屏文本必须写死在HTML开头
JS没跑完就空白？不是JS慢，是HTML根本没写对。弱网（比如2G）下，连JS文件都可能超时，首屏文案必须靠HTML原生渲染。
立即学习“前端免费学习笔记（深入）”；
-
<h1>、<p>类核心文案直接写在<main>起始处，别套<div class="loading">或条件渲染容器 - 禁用
<template>、<slot>、v-if控制首屏显示，这些全依赖JS运行 - CMS导出时优先用“静态片段”，而非JSON占位符；
<noscript>只是fallback，不能替代内联文本 - 首屏DOM层级控制在3层以内，嵌套过深+外链CSS未加载=有DOM无内容
