用户点开你的网站，看到的第一件事是什么？
不是你的组件，也不是你的设计，而是——
页面是否在“白”着。
哪怕加载时间只慢了一秒，在用户眼中，你就输了。
本篇文章我们将完整拆解首屏加载性能优化的五个阶段，帮助你系统性提升页面打开体验。
一、什么是“首屏加载”？
首屏加载：用户打开页面后看到首屏核心内容所用的时间。
它不仅仅是“页面加载完”，而是用户开始看到有用内容的那一刻。
常见相关指标：
指标 |
含义 |
|---|---|
TTFB |
首字节返回时间（服务器响应速度） |
FCP |
首次内容绘制（页面开始渲染） |
LCP |
最大内容绘制（主要元素渲染完成） |
CLS |
页面是否跳动（布局稳定性） |
二、首屏加载优化的 5 个阶段
阶段一：服务端传输优化
· 开启 HTTP 压缩
使用 Gzip 或 Brotli，后者压缩率更高
· 配置 CDN
静态资源走 CDN，靠近用户节点，减少 RTT
· 降低 TTFB
采用 SSR / SSG / 边缘函数预渲染
后端查询缓存化，接口响应不阻塞首屏
阶段二：资源体积控制
· 拆包（Code Splitting）
按路由拆分 JS 资源，避免首页加载全站
· 样式优化
内联关键 CSS
使用 tailwind / 原子化样式避免无用 CSS
· 图片格式与体积优化
使用 WebP / AVIF
加载主图使用 preload 提升优先级
阶段三：加载顺序调整
· 资源优先级策略
类型 |
优先级 |
建议方式 |
|---|---|---|
样式 |
高 |
<link rel="preload"> |
字体 |
中 |
子集化 + font-display: swap |
JS 脚本 |
中/低 |
defer、async、分模块加载 |
图片 |
高（首图） |
<link rel="preload">、<img decoding="async"> |
阶段四：用户感知优化
· 使用骨架屏（Skeleton）
显示页面大致结构，减少白屏焦虑
· 动效节奏优化
使用渐显动画代替闪现跳变
避免 “点击无响应” 的静默状态
· 提前渲染（GPR）
页面框架先出，内容逐步填充
阶段五：数据获取策略调整
· 接口按优先级拆分
主内容接口必须同步等待
非核心数据延后异步加载
· 预取接口数据
配合 service worker、SWR、React Query 实现客户端数据预热
· SSR + 缓存策略
SSR 页面配合 CDN 回源缓存，首次打开更快
三、常见“白屏/卡顿”元凶排查清单
JS 包太大？Tree shaking 是否失效？
首屏图片是否懒加载错位？
是否同步加载了无关模块（如埋点、聊天 SDK）？
有无首屏执行耗时较长的 JS？
总结
首屏优化，是前端与后端、网络与渲染、真实速度与感知速度的协同战。
真正的首屏优化不只是“压缩资源”，而是：
提前传送
重点先来
非关键延后
动效友好
数据分层加载
做到这些，用户甚至感觉不出“加载”这回事，体验自然就顺了。