应删减冗余div嵌套、启用img/iframe的loading="lazy"、内联关键CSS并预加载非关键CSS、压缩HTML及开启Gzip/Brotli。

删掉那些没用的 <div> 嵌套

浏览器解析 DOM 是从上到下逐层构建的，每多一层 <div> 就多一次节点创建和样式计算。实际项目里常见这种写法：

<div class="wrapper">
  <div class="container">
    <div class="content">
      <p>正文</p>
    </div>
  </div>
</div>

它既没语义，又拖慢解析。换成语义化标签后，DOM 更扁平，CSS 选择器也更轻量：

<main>
  <p>正文</p>
</main>

• 优先用 <header>、<nav>、<main>、<section>、<aside> 替代纯 <div>
• 避免“div 套 div 套 div”——超过 3 层嵌套就要警惕
• 开发时保留结构注释没问题，但上线前必须删掉所有 <!-- ... -->

图片不加 loading="lazy" 就是默认全量加载

未设置 loading 属性的 <img> 标签，浏览器会一上来就发起全部请求，哪怕图片在屏幕外几屏远。这直接拖慢首屏时间，还浪费用户流量。

只需加一个属性就能解决：

立即学习“前端免费学习笔记（深入）”；

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<img src="hero.jpg" alt="封面图" loading="lazy">

• loading="lazy" 是原生支持，Chrome 76+、Firefox 75+、Safari 15.4+ 都可用，不用额外 JS 库
• 首屏关键图（比如 banner、logo）要显式设 loading="eager" 或干脆不设，确保立即加载
• 对 <iframe> 同样适用：<iframe src="..." loading="lazy">
• 注意：如果页面高度靠 JS 动态撑开（比如 Vue/React 懒加载内容），loading="lazy" 可能失效，得配合 IntersectionObserver

关键 CSS 内联，其余用 rel="preload" 提前取

浏览器渲染页面前必须拿到首屏所需的 CSS，如果这个 CSS 在外部文件里，就得再发一次 HTTP 请求——哪怕只有几十 KB，也会造成几百毫秒白屏。

把首屏用到的 CSS 提取出来，直接塞进 <head> 里：

<head>
  <style>
    .hero { margin: 0; font-size: 2rem; }
    .btn { display: inline-block; padding: 8px 16px; }
  </style>
</head>

• 内联 CSS 总大小建议控制在 14KB 以内（gzip 后），否则反而阻塞渲染
• 非关键 CSS 改用 <link rel="preload" as="style" href="non-critical.css">，让浏览器提前 fetch，但不立即执行
• 别用 @import 引入 CSS——它会串行加载，比 <link> 多一轮 RTT
• 如果用了构建工具（如 Vite/Webpack），可用插件自动提取 critical CSS，不用手抠

HTML 文件本身不压缩，相当于裸奔上传

开发时写的 HTML 充满缩进、空行、注释，看着舒服，但上线后这些字符全是带宽和解析负担。一个 20KB 的 HTML 文件，去掉空白后可能只剩 12KB —— 节省 40% 传输量。

• 用 html-minifier（CLI 或 Webpack 插件）做构建时压缩，不是手动删空格
• 服务端必须开 Gzip 或 Brotli 压缩：Nginx 配 gzip on;，Apache 开 mod_deflate
• 检查响应头是否有 Content-Encoding: gzip，没有就是没生效
• 别依赖 CDN 自动压缩——有些 CDN 对 HTML 默认不压缩，得手动开启

真正卡顿的网页，问题往往不在 JS 多复杂，而在 HTML 结构松散、资源加载无序、文件体积放任自流。精简不是为了“代码好看”，而是让浏览器少走一步、少等一次、少算一遍。