关键css必须内联且紧贴后、前，体积≤14kb（gzip前），禁用@import；首屏图片须显式设loading="eager"；preload需正确配置as值并置于样式表前；脚本一律加defer。
关键CSS必须内联且位置紧贴之后
首屏样式不内联，浏览器就得等CSSOM构建完成才敢渲染——哪怕只慢200ms，用户就感知为“卡”。<style></style>块必须放在<meta charset="utf-8">之后、<title></title>之前，且不能含@import（它会触发串行请求，白费内联）。体积控制在14KB以内（gzip前），超限反而拖慢FCP。
- 用
critical或critters提取真实首屏CSS，别靠肉眼猜 - 内联后务必删掉对应外链
<link rel="stylesheet">，否则样式可能被覆盖或重复下载 - 若主题色动态生成，需服务端渲染时注入，不能靠JS后置补
preload必须写对as值且紧跟charset声明
<link rel="preload">不是加了就快，错位或错配as会导致静默失效：字体不加载、图片重复请求、Priority显示Low。它必须出现在中<meta charset>和<title></title>之后、任何<link rel="stylesheet">之前。
- 字体：必须
as="font"+crossorigin（哪怕同源），否则Failed to decode downloaded font - CSS文件：用
as="style"+onload="this.onload=null;this.rel='stylesheet'"，否则只下载不生效 - 首屏图片：优先用
fetchpriority="high"而非preload；若非要preload，则as="image"，且href必须与<img src>完全一致（含查询参数）
首屏图片必须显式设loading="eager"
现代浏览器默认loading="lazy"，但首屏图若没显式声明loading="eager"，可能被启发式策略误判，导致视觉空白或重复加载（一次lazy触发，一次fallback补发）。该属性只对<img>和<iframe></iframe>生效，且必须写在HTML源码里，JS动态加无效。
- 所有明确在初始视口内的
<img>都加loading="eager" -
<picture></picture>只需在最外层<img>上设，<source></source>不用单独加 - 避免混用：
loading="eager"的图应比loading="lazy"的图在HTML中位置更靠前，否则调度可能错乱
脚本必须加defer且禁用head中同步执行
没加defer或async的<script src></script>会阻塞HTML解析，哪怕放在前——弱网下用户看到的是白屏，不是内容闪一下再消失。内联脚本<script>...</script>同样阻塞，除非加defer。
- 业务逻辑脚本统一用
defer：<script src="app.js" defer></script> - 统计/广告类脚本可用
async，但别依赖DOM，document.getElementById可能报null - 绝对禁用
document.write()，现代浏览器执行即清空整个文档流 -
里不要放未加defer的外部脚本，尤其别塞在<link rel="stylesheet">前
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
