一、前言

Lighthouse是Google开发的一款工具，用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。chrome浏览器打开控制台选择该项即可使用，在此我们勾选上Performance和seo，分析网页加载情况

二、分析结果

评分分为三个档次，分别用红黄绿来表示，如果都是绿色，代表该网站在各方面都满足最佳实践

0-49（红） 慢

50-89（黄） 平均值

90-100（绿） 快

Performance常用指标

指标	快（绿）	中（黄）	慢（红）
首次内容绘制 FCP（First Contentful Paint）	0–1.8（s）	1.8–3	> 3
最大的内容绘制 LCP（Largest Contentful Paint）	0–2.5（s）	2.5-4	> 4
总阻塞时间 TBT（Total Blocking Time）	0–200（ms）	200-600	> 600
累积布局偏移 CLS（Cumulative Layout Shift）	0–0.1(比例)	0.1-0.2 5	> 0.25
速度指标 SI（Speed Index）	0-3.4（s）	3.4-5.8	> 5.8

二、Performance优化

Performance结果分析

1、Properly size images（合适的图片大小）：会对相应图片给出合适体积大小的建议，针对性的去处理

2、 Minimize main-thread work（最小化主线程工作）：主线程负责处理大量关键任务，如用户交互、DOM操作、样式计算和js的执行。此项可以去优化js的体积，避免长任务，优化css的计算，延迟非关键任务

3、Reduce unused JavaScript（减少未使用的js）：删除无用的三方包，按需导入

4、Reduce unused CSS（减少未使用的css）

5、 Use HTTP/2（使用http2）：http2可以多路服用，减少了对链接数量的需求，从而减少了TCP链接建立和断开的开销，这不仅提高了性能，还减少了对服务器和网络的压力。这个看公司和团队的需求，使用http2需要基础设施支持，且会带来更高实现和维护成本

6、 Page prevented back/forward cache restoration : 这个错误通常出现在使用基于Chromium的浏览器（如Chrome或Edge）时。它意味着当用户通过浏览器的前进或后退按钮在页面之间导航时，页面尝试从缓存中恢复，但失败了。这通常是因为页面在被添加到缓存中时，有一些特定的条件或限制导致无法恢复。

7、Image elements do not have explicit width and height（图片未设置宽高）：浏览器在获取图片前可预留空间，可以减少重绘重排

8、Serve images in next-gen formats（使用下一代的图片格式）：如webp和avif，通常比png和jpg的图片格式体积更小、下载更快。但注意，这种图片格式可能不会兼容低版本的浏览器，看需要去优化，是否需要做图片的兼容性处理

性能优化的一些方法

1、代码构建优化：以webpack为例，减少打包体积，提升构建速度

（1）UglifyJS代码的压缩和混淆

（2）happyPack多线程打包

（3）parallelUglifyPlugin多进程压缩JS

（4）babel-loader缓存优化

（5） IgnorePlugin 忽略某些包，避免引入无用模块，或在代码中按需引入

2、减少http的请求：一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程，减少http请求从而减少用户的等待时间

（1）使用精灵图、较小图片使用svg、打包时合并较小图片

（2）合并较小的css和js文件

（3）对于一些不在初始页面加载时需要的资源可以使用懒加载

3、缓存策略：

（1）CDN缓存：使用内容分发网络来缓存一些静态资源

（2）浏览器缓存：配置HTTP头部

字段	作用
Cache-Control	定义缓存策略
max-age	资源在缓存中保存的最长时间，以秒为单位
no-cache	强制每次请求都要验证耿资源的有效性
no-store	禁止缓存资源，每次请求都要重新获取
public	资源可被任何缓存（客户端、CDN等）缓存
private	资源可只能被浏览器缓存
ETag	资源的唯一标识符，当资源改变时，ETag也会改变
Last-Modified	资源的最后修改时间，服务器可以通过这个和ETag来验证

（3）服务器缓存：CDN缓存、使用Nginx反向代理缓存、Redis应用层缓存

4、预加载：Link标签加preload属性，比如LCP的元素可以预加载优先其他资源先加载，但也要注意，有可能会影响其他资源，导致FCP的指标变高，合理的去使用

5、服务端渲染SSR和静态站点的生成SSG

三、Seo优化

seo结果分析

Image elements do not have [alt] attributes（图片缺少alt属性）：点开找到对应的图片，回到项目中加上简短的alt描述，且需注意避免在不同的图片使用重复或无意义的alt

seo优化的方法

除此之外，我们在平时的开发中seo方面还可以做这些处理

1、框架选型，使用服务端渲染

2、设置语义化的html标签

3、设置60个字符以内的title，因为超过这个长度的title会被搜索引擎截断，确保能准确体现网站的主题

4、设置description，同样遵循简短的描述，尽量控制在100字之内

5、除首页外尽量将keyword控制在5-10个词之内，title、description、keyword的权重逐渐减少

6、引入a标签和title

7、通过内容营销、社交媒体、合作伙伴等方式获取高质量反向链接