关键CSS必须内联且体积≤10KB，以避免CSSOM构建阻塞首屏渲染；需用Coverage面板或critical工具精准提取首屏样式，禁用@import，移除外链style标签，script推荐defer，preload须准确指定as属性。
关键CSS必须内联，且体积别超10KB
首屏样式不内联，浏览器就得等CSSOM建完才敢画第一帧——哪怕只慢200ms，用户也觉得“卡”。critical工具能提取首屏用到的CSS，但别无脑全塞进去。
- 用Chrome DevTools的Coverage面板看真实使用率，红色部分就是可删的
-
<style>里禁用@import，它会触发新请求，等于白内联 - 内联后记得删掉对应外链
<link rel="stylesheet">，否则样式重复可能覆盖错 - 体积超过10KB时，HTML本身传输变慢，得权衡：宁可拆出最紧要的按钮/标题样式，其余走异步加载
script标签不加属性就是阻塞源
写<script src="app.js"></script>等于告诉浏览器：“停，等我执行完再往下”。白屏不是JS慢，是解析被锁死了。
- 业务脚本一律用
defer：<script src="app.js" defer></script>，下载不卡，执行在DOM就绪后、按顺序 - 统计/广告类脚本可用
async，但别指望它等DOM，document.getElementById可能报null -
document.write()必须禁用，现代浏览器执行即清空整个文档流，不可逆 - 放
<head>还是<body>底部？统一放<head>+defer，语义清晰，不用滚动找
图片和preload不能瞎配对
<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，等于没写
弱网下首屏文本必须写死在开头
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无内容
