本文通过使用Chrome Devtool的Lighthouse工具，针对一个在线聊天的Vue+Koa项目进行了性能和SEO优化。优化措施包括：预渲染SPA页面以减少首屏加载时间，压缩背景图片减小资源大小，开启nginx的gzip压缩，以及切换到HTTP2协议。此外，还增加了meta description以提升SEO。经过优化，网站性能显著提升。
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)，测量视口内可见的最大图像或文本块的
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
