优化HTML性能的关键在于控制加载链和解析行为：内联CSS≤10KB、禁用base64和@import、非首屏资源异步加载、script defer需放head或body开头、lazy图片须设宽高且避开首屏、preload需带as/crossorigin，且所有优化前提为TTFB≤200ms。
静态HTML标签本身不慢，真正拖垮性能的是它触发的加载链和解析行为——优化重点不在“写什么”，而在“怎么写、写在哪、写多大”。
内联关键CSS必须控制在10KB以内
把首屏必需的样式（比如 .hero、.nav、body 字体/颜色）直接塞进 ，但别贪多。超过10KB，HTML文件体积膨胀，TTFB和首字节时间反而上升。
- 用 Chrome DevTools → Coverage 面板扫一遍 CSS，删掉未用规则比压缩更有效
- 绝对不要在
里塞 base64 编码的字体或图片——它们直接把 HTML 拉到几百KB - 避免
@import：它强制串行加载，实测让 FCP 延迟超 300ms - 非首屏样式（弹窗、分页、暗色主题）改用
script 标签加 defer ≠ 不卡顿
defer 只保证脚本不阻塞 HTML 解析，但执行仍抢占主线程。轮播图、评分组件这类静态 JS，放错位置照样白屏。
-
<script src="carousel.js" defer></script>必须放在或开头，别塞在前——会失去并行下载优势 - 禁用内联
<script>initCarousel()</script>，除非是极小的 CSP nonce 初始化逻辑 - 第三方脚本（如统计、客服）优先用
async，硬编码在 HTML 里就等于主动引入失败风险 - 非首屏 JS 建议延迟到
requestIdleCallback(() => { /* load */ })或至少DOMContentLoaded后再初始化
图片 loading="lazy" 的三个硬性条件
加了 loading="lazy" 却没效果？大概率是漏了其中一项。
- 首屏图片（Hero 图、Logo、主商品图）必须去掉
loading="lazy"，否则 LCP 直接崩盘 - 所有加 lazy 的
width和height属性，否则 CLS（布局偏移）超标 - Safari 15.4 之前不支持
loading="lazy"对的支持，旧环境得回退到data-src+IntersectionObserver
preload 关键资源要带 as 和 crossorigin
不是写上就生效。浏览器需要明确知道“这是什么”以及“怎么取”，否则当普通请求处理。
- 字体预加载必须带
as="font"和crossorigin，否则会被忽略或报 CORS 错误 - 首屏 JS 或 CSS 若走 CDN，
crossorigin缺一不可；本地资源可省略 - 别对同一张图同时写
src和preload——浏览器可能双倍请求 - 只预载真正高优先级资源（如 Hero 图、关键字体、首屏 JS），乱用会挤占带宽
最容易被忽略的点：所有这些优化都建立在 TTFB ≤ 200ms 的前提下。如果 curl -o /dev/null -s -w 'TTFB: %{time_starttransfer}\n' https://yoursite.com/index.html 返回值持续 >300ms，前端标签再怎么调也没用——瓶颈在服务端。先查服务器响应，再动 HTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
