「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。
1. 分析
- Web增量加载的特点决定了首屏性能不会完美
- 过长的白屏时间影响用户啊体验和留存
- 首屏（obove the fold）==> 初次印象
2. 2-5-8 原则
- 当用户能够在 2 秒以内得到响应时，会感觉系统的响应很快；
- 当用户在 2-5 秒之间得到响应时，会感觉系统的响应速度还可以；
- 当用户在 5-8 秒以内得到响应时，会感觉系统的响应速度很慢，但是还可以接受；
- 而当用户在超过 8 秒后仍然无法得到响应时，会感觉系统糟透了，或者认为系统已经失去响应，而选择离开这个 Web 站点，或者发起第二次请求。
3. 首屏 -- 用户加在体验的3个关键时刻
用户在浏览骑输入链接访问，白屏
- 网站发生了什么
- 等内容什么时候可以出来
- 网站有没有用
- 可以看到有意义的内容
- 网站有没有用
4. 首屏 -- 关键指标
4.1 测量指标--First Contentful Paint (FCP）
FCP 首屏（first contentful paint ） ：从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。 （关注的焦点是内容，这个度量可以知道用户什么时候收到有用的信息（文本，图像等））
4.2 测量指标--Largest Contentful Paint (LCP)
LCP（Largest Contentful Paint ） ：LCP 指标代表的是视窗最大可见图片或者文本块的渲染时间。 （可以帮助我们捕获更多的首次渲染之后的加载性能，但这项指标过于复杂，而且很难解释，也经常出错，没办法确定主要内容什么时候加载完。）
4.3 测量指标--Time to Interactive(TTI)
什么时候用户可以进行交互 TTI （Time To Internative） ：从页面开始到它的主要子资源加载到能够快速地响应用户输入的时间。（没有耗时长任务）
资源体积太大?
- 资源压缩
- 传输压缩
- 代码拆分
- Tree shaking
- HTTP/2
- 缓存
首页内容太多?
- 路由/组件/内容lazy-loading
- 预渲染/SSR
- Inline CSS
加载顺序不合适?
- prefetch
- preload
