必须将HTML压至12KB以内，核心是禁用base64图片、用html-minifier-terser自动化精简、仅保留必要meta标签、扁平化DOM结构、精准内联首屏CSS（≤12KB）、配置Nginx gzip/Brotli及preconnect，并避免document.write。
大流量广告落地页的 HTML 体积必须压到 12KB 以内，否则首屏解析延迟会直接拉高跳出率——这不是理论值，而是真实 AB 测试中 15KB → 12KB 带来的 8.3% 转化率提升所验证的临界点。
HTML 文件本身怎么压进 12KB？
别信“压缩空格就完事”，真正吃体积的是内联资源、冗余结构和错误协议。核心是砍掉所有非必要字节，且不牺牲可维护性。
- 禁用
data:image/内联图：一张5KBbase64 图片会让 HTML 解析延迟超100ms，直接干掉 - 删光注释、换行、制表符、冗余引号（
class="foo"→class=foo），但别手动删——用html-minifier-terser的--collapse-whitespace --remove-comments --minify-css --minify-js配置跑构建流程 - 移除所有非关键
<meta>：只留<meta charset="utf-8">、<meta name="viewport" content="width=device-width,initial-scale=1.0">和<link rel="canonical" href="..."> - 避免
<div class="wrapper"><div class="container"><div class="inner"> 这类嵌套：每层 <code><div> 至少多出 <code>12~15字节，DOM 节点数降20%就省下1~2KB为什么 async 广告脚本还卡首屏？
因为
async只解决阻塞，不解决带宽争抢。广告 SDK 下载时会抢占 CSS、字体等关键资源的 TCP 连接，尤其在弱网下更明显。-
<script async src="ad.js"></script>必须放在开头、紧贴<header></header>后，不能塞在里——否则它会和 CSS 抢首个 HTTP/2 stream - 必须配
<link rel="preconnect" href="https://securepubads.g.doubleclick.net" crossorigin>，crossorigin缺了预连接就失效，Chrome DevTools Network 里看 “Connection” 时间不是0ms就说明没生效 - 广告容器必须设
width和height：否则 iframe 注入后触发 layout shift，CLS 指标飙升，浏览器会主动提前加载更大图来“补偿感知速度”
关键 CSS 内联后反而更慢？
常见于把整张
main.css（比如80KB）全塞进<style></style>标签——TCP 初始拥塞窗口（IW）通常为14KB，超了就得等第二个 RTT，比外链还慢。
Wechat Article Html下载将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 只内联首屏渲染必需的规则：用
critters或penthouse提取，目标是 ≤12KB（含 HTML 主体） - 删掉所有
@media查询外的非首屏样式，比如.footer、.modal-hidden、#chat-widget - 不用
<style media="(min-width: 768px)"></style>：这种写法会让浏览器异步加载，失去内联意义
服务端配置漏掉这三项，前端再压也没用
本地测试快不代表线上快。file:// 协议下 gzip、HTTP/2、缓存全失效，而真实用户永远走的是线上路径。
- Nginx 必须开
gzip on;+gzip_types text/html;，Brotli 更优但需确认 CDN 支持（Cloudflare 默认开，AWS CloudFront 需手动配） - 启用流式传输：Node.js 用
res.write(<header>)</header>分段吐，PHP 用ob_flush()+flush()，让浏览器边收边解析 - 禁止
document.write()：现代广告平台已弃用，保留会导致整个文档流被清空，尤其在 iOS Safari 上必现白屏
真正卡住转化率的，往往不是某张图太大或某个脚本没异步，而是 HTML 主体里混着未压缩的 base64、没 preconnect 的广告域、以及超过 IW 的内联 CSS——这些细节在流量峰值时会被指数级放大。
-
