提升网页加载速度的实用技巧

网页加载慢的罪魁祸首往往不是HTML文件体积大，而是资源加载时机与语义的错配：同步脚本阻塞解析、@import串行加载拖垮CSSOM、懒加载滥用导致布局偏移、preload误用抢占关键资源带宽……这些细节在Chrome Network面板的waterfall图中一目了然——真正提升首屏速度的关键，在于精准识别并打破渲染阻塞链，而非盲目压缩或删减代码。

HTML 页面加载慢，八成不是 HTML 文件本身大，而是它触发的阻塞、错误路径、冗余内联或缺失压缩让浏览器反复卡住。直接开 Network 面板看 transfer size 和 waterfall 时间线，比猜快得多。

怎么让 会立刻暂停 HTML 解析，等 JS 下载并执行完才继续——这是首屏白屏最常见原因。

• 同步脚本（无 async 或 defer）必须移出 ，放到 前是最兜底做法
• 第三方统计、广告类脚本用 async：下载不阻塞，但执行时机不可控，适合无依赖逻辑
• 业务主逻辑 JS 优先用 defer：下载不阻塞，执行在 DOM 解析完成后、DOMContentLoaded 前，且按书写顺序执行
• 绝对禁用 document.write()：现代浏览器已废弃，执行即清空文档流，本地环境尤其敏感

为什么 @import 会让首屏变慢

CSS 是渲染阻塞资源，而 @import 在 CSS 文件中是串行加载机制，浏览器必须先下载并解析完被 import 的文件，才能继续处理后续样式表。

• @import "reset.css"; 比 多一次网络往返和解析依赖，实测拖慢 FCP 300ms+
• @import 无法被预加载识别，也不能参与并行下载
• 构建工具（如 PostCSS）虽可内联展开，但 source map 易断
• 若需条件加载（如暗色主题），优先用 ，而非 @import

loading="lazy" 的生效边界与坑点

原生懒加载只对 和