前端页面优化指北

为什么要做页面优化

主要有三好：

1. 用户好。页面优化的好，用户体验好，对我们的产品满意。
2. 程序员好。体现了自己的专业性和价值，有利于提高程序员在公司的形象和话语权。
3. 公司好。根据数据显示，页面载入越快，越有利于营收的转化。

例如 Vodafone (意大利公司) 在LCP 分数上提高了31%，销售额增加了8%。

衡量标准

前端这边衡量一个页面的指标有很多，比如DOMContentLoaded,load，首屏，FCP，FMP，LCP等等。

那么在这么多的指标里面，我们选取哪些来衡量我们的页面性能呢。指标应该符合的标准是客观、容易度量、能够直观的反映用户浏览页面时候的感受。

经过判断，我们可以用Core Web Vitals来作为标准，它包括了LCP,FID,CLS(后续文章详解)。

1. 权威性。这是有google发布，并且集成在chrome浏览器里面。
2. 及时性。这个标准是2020年，非常新。
3. 全面性。包含了资源的载入、用户交互性、页面稳定。

DOMContentLoaded和load只能说明资源的载入速度。

首屏由于手机屏幕尺寸的多样性，难以衡量.

FMP(First Meaningful Paint)首次有意义绘制，这个标准太模糊，已经废弃。

FCP(First Contentful Paint)首次内容绘制，有意义，体现了页面载入速度，但是如果有骨架屏的话，意义不大。

衡量手段。

1. chrome浏览器自带的lighthouse
2. web-vitals npm包，用js的方式测试。
3. google在线地址