FCP(First Contentful Paint) 首次内容绘制
一个衡量网页性能的重要指标：代表浏览器首次渲染出内容的时间数据
获取方式：
- web vitals 库： 通过wv.getFCP()
- 打开浏览器的性能分析进行录制分析：其中有FCP的具体数据
- 在线的分析网站
优化手段：
代码层面的优化：
1. 精简HTML结构:
在线压缩；构建工具压缩
- 去除冗余代码：不必要的注释，空格，减少HTML文件大小，加快浏览器的解析速度
2. 优化css
使用在线压缩工具：
css Compressor; css minifier； 使用构建工具webpack 打包过程中压缩
- 内联关键css： 可以将首屏渲染必须得css样式直接写在HTML头部的style标签内，避免额外的网络请求等待等；确保样式能及时应用
- 对css压缩: 去掉空格，注释等多余内容；较小体积
3. 优化JS：
使用在线压缩工具：
uglify; terser； 使用构建工具webpack 打包过程中压缩
-
推迟非关键js的加载，避免首屏内容的渲染；通过async 或者defer属性来控制加载顺序
-
对js代码进行压缩：去掉未使用的变量，函数等，减小代码体积
优化资源加载：
- 图片
- 采用合适的图片格式，简单的可以用svg矢量图
- 避免大图片的加载，可以压缩调整图片的大小
- 图片懒加载：首屏之外的延迟加载
- 字体
- 使用阿里的iconfont：节省资源，文件相对小巧，节省了存储空间
- 字体预加载
<link rel ='preload'> - 选择常用的，加载速度快的字体
服务器端优化
-
启动CDN ：将静态资源分发到离用户更近的节点上
-
优化服务端响应时间 ：服务端要有足够的带宽，足够的响应能力，减少对资源请求的处理和传输时间：如合理分配服务器资源、优化数据库查询等，保障页面能快速发送给浏览器进行渲染
缓存策略运用
- 设置合理的浏览器缓存
- 利用service workers实现离线缓存：支持在浏览器中，通过service workers可以拦截和缓存资源请求，即使用户处于离线状态或者网络不佳时，也能快速展示首屏已缓存的关键内容
css加载怎么影响到了FCP
因为浏览器要先解析css，
- 所以如果css文件过大或者过慢，会延迟浏览器渲染页面内容的进程。
- 如果关键的css样式没有加载完，或者没有解析完， 会导致页面无法正常展示首屏内容；进而导致FCP时间会过
- css加载顺序不合理，比如关键css没有被浏览器尽早的获取到，也会拖慢首屏内容呈现的节奏；也应影响FCP这个性能指标；
总结 ：
总之优化FCP主要从以下几个方面：
- 拆分，只渲染首屏需要的代码，减少文件体积，按需加载，避免一次性加载过多
- 非首屏的内容 懒加载 路由懒加载， 图片懒加载
- 资源上渲染体积更小的更快的字体，或者图片使用svg等，压缩图片等方法
- 服务端：优化服务端的响应速度
- 可以适当设置一些缓存策略：浏览器缓存或者service workders实现离线缓存
