基于lighthouse对网站进行性能优化

---

theme: channing-cyan

前言

是这样的，我写了一个在线聊天的demo，前端vue后端koa。访问链接在此

作为一个爱折腾的年轻人，我总想让访问我网站的朋友们访问时十分顺畅、心情舒适、宾至如归，所以使用chrome devtool中自带的lighthouse工具对网站进行了方方面面(性能、可访问性、SEO等等)的分析，顺带做了一波性能优化。

优化前

我们可以看到performance居然连60分及格线都没达到，惨不忍睹。

来看看指标(metrics)数据： - 首次内容渲染(first contentful paint, FCP)，测量从页面开始加载到页面内容的任何部分在屏幕上呈现的时间(包括background images)，4.3s - 速度指数(speed index，SI)，测量网页内容的可见填充速度，5.6s - 最大内容渲染(largest contentful paint，LCP)，测量视口内可见的最大图像或文本块的