大流量大促页面html需兼顾并发承载、首屏秒出、seo可抓取与后续可维护四重目标；关键css内联须≤14kb，禁用@import，script必须defer且不放head，首屏img禁用loading="lazy"并显式声明宽高，html须启用gzip/brotli压缩且体积≤120kb。
大流量大促页面的 HTML 代码质量，不能靠“压缩完事”或“全内联图快”来糊弄——它必须同时扛住瞬时并发、首屏秒出、SEO 可抓取、后续可维护这四重压力。单纯追求加载快而牺牲结构，上线后改一个按钮样式都要全局 grep；只讲语义和规范却无视加载路径，大促当天 CDN 缓存未命中，首屏白屏超 3 秒，技术复盘就是背锅现场。
关键 CSS 内联必须控制在 14KB 以内
首屏渲染依赖的样式（如 header、商品卡片骨架、按钮基础态）确实该内联进 ，但实测发现：超过 14KB 的内联 CSS 会显著拖慢 HTML 解析时间，尤其在低端安卓设备上，V8 解析器可能卡顿 200ms+。这不是理论值，是某电商大促页压测时的真实 waterfall 断点。
- 用
critical工具提取首屏 CSS，别手动 copy-paste —— 它会漏掉伪类、媒体查询嵌套、CSS 变量 fallback - 内联后检查最终 HTML 文件体积：
curl -s http://your-page.com | wc -c，确保总大小 ≤ 150KB（含 HTML + 内联 CSS + 小图标 Base64） - 禁用
@import：哪怕只在内联 CSS 里写了一行@import "reset.css"，浏览器也会发起额外请求并阻塞渲染，FCP 直接退化为外部 CSS 加载模型
script 标签必须带 defer，且禁止放在 里
大促页常嵌第三方监控、AB 实验 SDK、埋点脚本，这些如果没约束，极易变成首屏杀手。Chrome DevTools 的 Coverage 面板显示，某活动页 68% 的 JS 代码根本没执行，却全程阻塞了 DOM 构建。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<script src="analytics.js" defer></script>是底线——下载不阻塞，执行在 DOMContentLoaded 前，且顺序可控 - 绝对不用
async加业务逻辑脚本：它执行时机不可控，可能在 DOM 还没 ready 时就调document.querySelector，报错且无法重试 - 所有第三方脚本必须包裹在
if ('loading' in HTMLImageElement.prototype)这类特性检测里，防止旧版 WebView 报ReferenceError
loading="lazy" 只对非首屏 img/iframe 生效，且必须配宽高
大促页瀑布流商品图一加 loading="lazy" 就翻车：首屏三张图全被懒加载延迟，用户划动前看到空白卡片，CLS（累计布局偏移）飙升至 0.35+，直接触发 Lighthouse 警告。
- 首屏可视区（viewport 内）所有
<img>必须删掉loading="lazy"，包括轮播图第一帧、主 Banner、立即抢购按钮图标 - 每个
<img>必须显式声明width和height属性（不是 CSS），否则浏览器无法预留空间，图片加载完成瞬间引发重排 - 旧版安卓 WebView（Android 9 及以下）完全忽略
loading="lazy"，需用data-src+IntersectionObserver降级，但注意：Observer 实例必须在 DOMContentLoaded 后初始化，否则监听不到首屏元素
HTML 文件本身必须启用 Gzip/Brotli，且禁用 file:// 协议调试
本地双击打开 HTML 测试，file:// 协议下所有 link、script、img 请求都走不了 HTTP 头，Gzip 失效、缓存失效、CORS 失效——你看到的“加载快”，只是文件系统读取假象，上线后立刻崩。
- Nginx 配置必须包含：
gzip on; gzip_types text/html application/javascript text/css;，Brotli 更优但需确认 CDN 支持（Cloudflare 默认开，阿里云 CDN 需单独开通） - 构建产物中 HTML 文件不能残留
<!-- dev-only comment -->或未关闭的<div>，这些在压缩后可能破坏 DOM 结构，导致 Safari 渲染异常<li>上线前用 <code>curl -I https://your-domain.com/page.html检查响应头：必须有Content-Encoding: gzip或br，且Content-Length显示体积 ≤ 120KB
真正难的不是知道该做什么，而是当 PM 喊“今晚十点上线新 banner”，你得在 20 分钟内判断：这张图要不要转 WebP、内联 CSS 有没有超限、第三方 SDK 版本是否兼容 iOS 15.2——这些细节不会写在 PRD 里，但决定大促那一刻，千万用户刷到的是「已开抢」还是「正在加载…」。
