关键CSS必须内联至<head>且≤14KB，提取首屏必需样式（如header、hero banner），禁用@import；非关键CSS用preload+onload异步加载。
关键CSS内联但别超14KB
首屏渲染卡顿，八成是因为外部 main.css 阻塞了整个 HTML 解析。浏览器必须等它下载、解析完 CSSOM 才能画第一帧——哪怕你只用了一行按钮样式。
正确做法是把首屏必需的样式（header、.hero、@font-face、按钮基础样式）提取出来，直接写进 <style></style> 标签里。但要注意：
- 原始体积控制在 ≈14KB 以内（gzip 后建议 4–8KB），否则可能跨 TCP 包影响 TTFB
- 绝对不用
@import—— 它会触发额外请求并阻塞解析 - 所有外部
<link rel="stylesheet">必须放在这个内联<style>之后，否则仍会被拖慢
defer 和 async 别混用，位置决定行为
没加属性的 <script src="app.js"></script> 一遇到就停解析，白屏几秒很常见。但 defer 和 async 的行为差异极大，不能凭感觉选。
实操判断依据很简单：
立即学习“前端免费学习笔记（深入）”；
- 脚本依赖 DOM（比如初始化轮播图、绑定事件）→ 用
defer，放<head>或<body>开头都行，它会并行下载、DOM 构建完再按顺序执行 - 脚本完全独立（如统计埋点、广告 SDK）→ 用
async，执行时机不可控，不保证顺序，适合丢到<head>里提前拉取 - 同步逻辑极小（如注入 CSP nonce）→ 只能内联，且严格控制在 1KB 以内；超过就外链 +
defer
loading="lazy" 加错图片反而伤性能
原生懒加载不是“所有 <img> 都加”，加错会导致布局偏移（CLS）、重复请求甚至首屏图片不显示。
真正安全的用法只有三条：
- 非首屏图片才加
loading="lazy"；首屏图必须去掉该属性，确保立即加载 - 每个加了
loading="lazy"的<img>必须显式设width和height，否则滚动时会重排布局 - 别同时写
src和loading="lazy"再自己用 JS 监听 —— 浏览器可能先加载src，造成重复请求
<link rel="preload"> 不是万能加速开关
preload 是高优先级提示，不是“提前加载所有东西”的捷径。滥用反而抢占带宽、挤占首屏资源。
只对当前页立刻要用的资源生效，典型场景有：
- 关键字体：必须配
as="font"和crossorigin，否则无效 - 首屏背景图或 hero 图：用
as="image"，且确保该图确实出现在首屏 - 关键 JS（如核心框架入口）：仅限极少数情况，且要确认它不会被
defer更优地覆盖
容易被忽略的是：preload 的资源必须在当前导航中真实使用，否则浏览器会警告 “preload request was not used”。
