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

前言

是这样的，我写了一个在线聊天的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），测量视口内可见的最大图像或文本块的渲染时间，高达13.4s
• 可交互时间（time to interactive，TTI），该指标衡量从页面开始加载到其主要子资源加载的时间，并且能够可靠地快速响应用户输入所用的时间。
• 总阻塞时间（total blocking time，TBT），衡量了第一次内容绘制 (FCP)和可交互时间 (TTI)之间的总时间，TTI可能会被主线程阻塞以至于无法及时响应用户
• 累积布局偏移（cumulative layout shift，CLS），CLS 是衡量页面整个生命周期内发生的每个意外布局偏移的最大布局偏移分数的度量。这个值越小越好。

优化中

performance优化

1. 优化首屏加载时间，spa的缺点无非就是首屏慢和SEO，通常解决办法有改为服务端渲染ssr，但是实在有点麻烦。

它很明显可以解决首屏白屏或者SEO等问题。但是它也引入很多问题，其一，对工程师要求较高，需要同时掌握的前后端知识。其二，要考虑在服务端 Node.js 环境中的内存泄露、运行速度、并发压力等问题。 Node 层的服务可以用“脆弱”两个字来形容。其三，开发成本增加，研发周期变长等。一般来说，是需要一个强大且稳定的基础架构来支撑服务端的压力。

一般小型项目优化优化几个常用的页面就已经很满足了，咱们使用prerender-spa-plugin插件(webpack插件)，这个插件会预先渲染好我们指定的路由的页面，大致原理是模拟网站运行，启动puppeteer（google官方的headless无头浏览器）访问指定的页面路由得到对应的html，用户访问这些页面的时候直接响应上述html。

// vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
...
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: [ '/login' ], // 本项目只渲染了login页面
        renderer: new Renderer({
          inject: {},
          renderAfterDocumentEvent: 'render-event',
          args: ['--no-sandbox', '--disable-setuid-sandbox'] // 在没有沙箱的情况下运行。为了更安全可以考虑改为配置沙箱。// https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md
        })
      })
    ]
  }
 ...
 }
复制代码

build之后我们会发现dist文件夹内有个login/index.html，就是预渲染出来的页面。

我的项目目前是需要登录的，所以只有登录页预渲染有意义，故我只预渲染了login页面，后面我会把我的网站重构，不用登录也能访问，这次使用prerender-spa-plugin只是为以后积累经验。大家可以根据自己的需求渲染静态页面。

2. 优化最大内容渲染时间，登录页背景图片居然有1.56mb，这张图是我的网上找到，直接用的网上的图片url，先把它下载下来，从1.56mb压缩至195.44 KB，存至服务器。

3. nginx开启gzip压缩，把压缩进行到底，html/js/css等等资源通通压缩下。

// nginx.conf
#gzip开启
gzip on;
gzip_buffers 4 16k;
gzip_comp_level 3;
gzip_vary on;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss application/javascript;
复制代码

4. 使用http2，http2的优点不必多说，多路复用、头部压缩、二进制分帧等，速度相比http1.1提升很多。http2需要在https下使用，巧了，我已经升级为https了，只需修改nginx一行配置即可。

// nginx.conf
listen 443 ssl http2 default_server;
复制代码

SEO优化

1. lighthouse提示Document does not have a meta description

The element provides a summary of a page’s content that search engines include in search results. A high-quality, unique meta description makes your page appear more relevant and can increase your search traffic.

说白了就是用一个meta增加网站描述信息可以让页面更好被搜索到，加吧咱。我这随便写了点儿。

<meta name="description" content="作者:astar;vue,koa,socket.io实现聊天室功能">
复制代码

优化后

我很满意了。

总结

前端性能优化我们在很多面试题中都有看过，但纸上得来终觉浅，实践出真理，感谢google chrome为我们开发者提供了性能评估利器lighthouse，让我们可以针对性地做优化，不过也只是个指标，还有很多细节的优化需要我们开发者不断去尝试，去发掘。

最后

跪求一波stars，谢谢观众大佬们，祝大家身体健康，吃嘛嘛香~

vue-chat

koa-chat

【参考】

利用prerender-spa-plugin提升单页面应用的体验

Nginx开启Gzip压缩

解决Linux安装或执行命令遇到无法加载lib错误