FCP和LCP指标的重要性
- 提高用户体验、页面加载的速度
- 提高SEO搜索引擎，提高爬虫抓取效率
LCP优化问题
- DevTools lighthouse 或 PageSpeed Insights 里确认 LCP 元素。
- 注意LCP最大内容绘制，获取的是 当前视口内最大的内容元素，LCP 只会取一个元素
- 如果首屏上有大图和小图，那么LCP只会取大图作为LCP最大内容元素
FCP和LCP优化
- 首屏图片使用：
- fetchpriority=high，提高首屏图片优先级加载
- 前几项 eager，其他lazy （eager立即加载，lazy懒加载）
- 字体文件大小
- 使用woff2格式
- WOFF2：WOFF 的升级版，压缩率更高，文件更小，加载更快
- 字体压缩
- 将字体文件不使用的字体，可以删除
- 国际化多语言字体文件
- 针对不同语言，按需加载不同字体文件
- 避免所有语言放在同一个字体文件中
- 字体文件预加载
- 首屏图片请求资源之后，进行预加载
preload 会让浏览器提前发起该图片请求（在解析到真正的 <img> 之前）- 等到DOM 渲染到
<img src="同一个URL"> 时，浏览器会利用已下载的资源
- 针对关键资源预加载，如字体文件、首屏图片
- 第三方脚本异步加载、按需加载
- 如facebook、google的登录sdk脚本、gtag脚本 （google统计脚本）
- 非关键模块延迟挂载
- 拆分 chunk 包，降低首屏 JS 体积
- 针对大的包，进行拆分
- 按 vendor 做手动分包
- 避免重大的几个包放在同一个chunk中
- 服务端渲染，减少首屏水合（hydrate）的压力
- 图标尺寸优化，如CDN图片