Lighthouse与首屏优化

之前提到首屏优化，想到的就是Vue项目首页打开很慢需要优化。一般都是肉眼看看，对当前的加载速度并没有一个准确的衡量标准，也没有很清晰的解决思路。

前两天我想给自己的网站申请谷歌广告，听说审核对网站的性能要求很高。于是网上搜索后发现了一个网站优化利器--Lighthouse

可以先看下我优化后的效果：CodingLife

一：Lighthouse是什么？

Lighthouse 是一个由 Google 开发的开源自动化工具，用于改进网页质量。它提供全面的网页性能、可访问性、最佳实践和 SEO 分析，帮助开发者构建更好的网站体验。

Lighthouse这个工具前端开发者又熟悉又陌生，说她熟悉因为她就在Chrome的F12面板中，跟Network在一块。说她陌生是因为，可能大多程序员没注意到她，也不知道她是干什么用的。

Lighthouse使用起来很简单，F12里找到她，输入需要检测的网站即可。我第一次使用时的得分如下

二：Lighthouse的相关指标

1、主要指标

如上截图中主要4个指标，相关概念如下

性能 (Performance)	页面加载速度和用户体验	包含FCP, LCP, TTI, TBT, CLS
可访问性 (Accessibility)	残障用户友好度	屏幕阅读器支持，色彩对比度，ARIA 属性
最佳实践 (Best Practices)	现代Web开发标准	HTTPS, 安全的API使用，图片优化
SEO (Search Engine Optimization)	搜索引擎优化	元标签，结构化数据，移动友好性

2、性能(Performance)下的指标

• FCP (First Contentful Paint)  首个内容绘制时间

 测量页面首个元素呈现的时间，让用户知道网站开始载入了。

• LCP (Largest Contentful Paint) 最大内容绘制时间

 测量页面主要内容加载完成的时间，让用户知道网站载入完毕，可以