Web 性能优化三：页面首屏加载优化全流程：从服务器到骨架屏

用户点开你的网站，看到的第一件事是什么？

不是你的组件，也不是你的设计，而是——

页面是否在“白”着。

哪怕加载时间只慢了一秒，在用户眼中，你就输了。

本篇文章我们将完整拆解首屏加载性能优化的五个阶段，帮助你系统性提升页面打开体验。

一、什么是“首屏加载”？

首屏加载：用户打开页面后看到首屏核心内容所用的时间。

它不仅仅是“页面加载完”，而是用户开始看到有用内容的那一刻。

常见相关指标：

指标	含义
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？

总结

首屏优化，是前端与后端、网络与渲染、真实速度与感知速度的协同战。

真正的首屏优化不只是“压缩资源”，而是：

• 提前传送

• 重点先来

• 非关键延后

• 动效友好

• 数据分层加载

做到这些，用户甚至感觉不出“加载”这回事，体验自然就顺了。