页面加载慢，先从哪里减？

先缩短关键路径：更小的 HTML、不挡解析的脚本、更少且更小的首屏资源，再加上能长期缓存的文件名。用瀑布图确认时间花在哪一段，再改那一段。

原理

关键渲染路径是浏览器为了第一次画出内容必须完成的工作：HTML、阻塞的 CSS、同步脚本。CSS 放在头部；脚本用 defer，避免挡住解析。见渲染流程。

包体积：

路由和重组件用动态 import()，让首屏只下载当前页。
生产构建开压缩（gzip 或 Brotli）和 tree shaking。见 Tree Shaking。
依赖用打包器预构建一次，不要把整个工具库都打进首屏。先看包分析，再决定换实现。

资源提示：

preconnect：提前完成 DNS 和连接，用于确定会用到的第三方源。
preload：当前页马上要的关键资源。
prefetch：下一页可能用到的资源，优先级低。

图片往往是最大的字节。给出宽高或比例避免布局跳动，用合适的尺寸和现代格式，首屏以下的图用 loading="lazy"。带内容哈希的静态资源用长缓存，HTML 入口保持可更新。见 HTTP 缓存。

追问

懒加载会不会让后面的页面更慢？

第一次进入那条路由要多一次请求。对首屏没用到的页面，这是把成本挪到后面。可以在空闲时 prefetch 高概率的下一页。

怎么判断是包大还是服务器慢？

看瀑布图。等待服务器响应（TTFB）长，查接口和网络。下载条很长，查体积、压缩和缓存。下载不长但主线程一直在执行，查脚本和渲染，那是下一题。

易错点

所有路由都懒加载，但首屏路由的依赖仍然打在入口里，首屏不会变小。
preload 过多会和真正的关键资源抢带宽。
图片懒加载不要用在首屏最大的那张图上，那会推迟 LCP。

相关