骨架屏（Skeleton Screen）是指在初始加载阶段就显示页面的主要框架，而不是空白页面。是通过其他元素（大多为灰色块状元素）替代占位图像、视频和动画的内容来创建的页面大致轮廓，让用户产生一种已经有内容返回了的感觉，减少用户等待焦虑。
通常在小程序启动过程中，开发者也会在主要内容渲染完成前展示 loading 图标，当然也有更好的处理方式，采用骨架屏。但自研骨架屏依赖小程序生命周期，展示时机较晚，体验不佳。
好消息来了！抖音小程序框架也提供了自动生成骨架屏能力，一键生成、高效迭代，出现时机更早（小程序启动立即出现）！
以懂车帝小程序为例，使用框架骨架屏后与自研骨架屏对比 LCP 到达率显著提升，Android 提升率达 6.79%，尤其对于页面加载复杂，LCP 到达率较低的页面，效果显著。
根据官方实验数据，骨架屏能够有效提升LCP到达率，也表示有更多用户愿意等待到渲染完成。
一览「骨」芳容
小程序默认加载状态
框架生成的骨架屏
更快的骨架屏
「技术面对面」：框架提供的骨架屏有什么特色，相对自研的优势在哪里？
1.展示快
自研骨架屏受限于小程序生命周期，展示时机同页面渲染时机。而框架的骨架屏机制借助客户端能力，能够在小程序启动时立即展示骨架屏，使用这一机制，可以减少用户的白屏等待时长，给用户带来更好的用户体验。
2.生成快
以下简单几步就可以生成骨架屏，默认骨架屏样式已经能满足大部分需求，小程序迭代只需要重新一键生成，再也不用担心需求变更手动修改骨架屏。
美学X体验 纵享丝滑感
除了追求「快」，在产品美学和用户体验方面，合理的选择和细致的设计，使得骨架屏也具备产品特色，转场更丝滑～
「技术面对面」：哪些场景需要使用骨架屏呢？
以下场景中使用骨架屏能显著提升用户体验
- 列表、卡片、图文等结构页面，对于动画/原生/复杂组件较多的页面展示效果不佳；
- 首屏内容或渲染较慢的页面，减少等待焦虑
- 局部加载缓慢场景
「技术面对面」：默认骨架屏样式与产品本身不融合怎么办？
生成骨架屏后也可以手动修改 *.sk 文件，根据自身需要灵活选择。以下细节的把控也可以提升骨架屏的适配性
- 合理控制移除时机。自行移除骨架屏能够更精准的掌握用户等待时长，建议在主要内容渲染渲染后主动移除。移除时机过早起不到过渡效果，过晚用户可能会误认为内容获取失败
- 自行适配自定义导航栏，默认生成骨架屏不包含导航栏样式，需要自行适配，方式见开发文档
- 自行适配固定背景。默认生成的骨架屏为白色背景，如有固定背景，自行调整背景样式启动更丝滑。
为留住用户，骨架屏不失为一把利器，能够有效缓解用户等待焦虑，但也不是绝对的神药，结合其他优化手段减少启动耗时才可能「一触即达」。
👉 优化手段直通车：小程序启动性能优化、小程序运行时性能优化
👉 小程序问题扫描仪：体验评分工具