Fork me on GitHub

博客性能优化笔记 | 99分

闲着没事,拿 lighthouse 测了一下博客网站的性能评测,发现诊断出的问题还挺多,就顺手优化了一下。

这篇文章将记录这个优化的过程。

优化前后对比

lighthouse 检测结果

优化前 优化后

性能面板检测结果

FCP DOMContentLoaded LCP
优化前 764ms 1798ms 1864ms
优化后 496ms 507ms 496ms
  • FCP(First Contentful Paint)
  • LCP(Largest Contentful Paint)

检测工具

使用 Chrome 自带的 lighthouse 和 性能面板进行测试。

性能面板 lighthouse

发现问题

性能面板 | Performance

通过截图可以观察到每个时间的页面变化

发现的问题:

  1. 文章列表渲染后,文章封面图加载缓慢
  2. 图片完成加载时间过长(封面,头像图片)
  3. 布局渲染期间发生明显变化
  • 友链列表加载完成后
  • 左上头像加载完成

lighthouse

测试后会给到优化建议。

这里挑一些后面用到的

  1. 使用新的图片格式(WebP and AVIF)
  2. 减少没用到的CSS文件大小
  3. img 没有明确的宽高属性
  4. 资源传输压缩(gzip, brotli 等)
  5. 加载适当大小的图片(避免超过要展示的大小)
  6. 避免超大的资源加载阻塞网络(主要是一些超大的图片和js)

优化过程

图片优化

解决:1,2,4,8,9

① 裁剪为渲染的大小

② 格式调整为WebP格式

我的图片都是放在图床上的(七牛云又拍云缤纷云)。

这一步我直接使用 OSS(对象存储) 提供的图片加载裁剪功能即可。

配置目标:宽高裁剪为 120px * 80px,格式调整为 WebP 格式。

配置处理样式示例

七牛云 又拍云 缤纷云

使用:在原有的资源上添加对应的后置即可

  • 七牛云:url~cover.webp
  • 又拍云:url-cover
  • 缤纷云:url!style:cover

代码中的体现↓

封面 友链头像 头像

oml2d模型资源优化

博客左下角的看板娘加载优化。

解决:9

① 资源全部放在自己的 OSS 通过CDN加载(有gzip压缩,更快的访问速度)

② 将模型用到的PNG图片压缩

使用之前做的图片在线压缩工具

压缩后减少了 88% 的体积,视觉上看不出变化。

网络优化

解决:7,9

① 第三方资源使用 OSS存储 + CDN加载

② 访问使用 HTTP3/HTTP2

新的协议加载资源,用上多路复用的特性。

启用前提资源支持 HTTPS 访问(配置SSL证书),才能启用 HTTP2/3。

配置 HTTPS 时使用最新的 TLS1.3 版本,更快的加解密速度。

下面是在各平台开启相关配置示意。

七牛云 又拍云 缤纷云

优化前后对比

优化前 优化后

布局优化

解决:3,6

目标:减少触发 “页面回流重绘” 的范围和次数。

① 针对图片,限定具体渲染的宽高,避免图片加载后布局发生变化

② 针对后渲染区域,限定其容器的宽度,避免渲染后影响布局

减少无用代码

解决:5

① 移除无用的 js 脚本或者 CSS 资源

大概看了一下,项目里额外依赖的 element-plus 样式文件占大头。

将全量引入,手动调整为按需引入。

最终效果

性能面板 lighthouse

优化后的性能指标

  • FCP(First Contentful Paint):496ms
  • DOMContentLoaded:507ms
  • LCP(Largest Contentful Paint):496ms

访问 https://sugarat.top 可以看到效果还是很明显的。

总结

  1. 图片:压缩,加载合适尺寸,优先使用 WebP 格式
  2. 网络:HTTPS + HTTP2/3,OSS + CDN
  3. 布局:减少回流重绘范围与次数
  4. 资源:移除无用代码,无用的第三方资源加载
posted @ 2024-05-04 14:37  粥里有勺糖  阅读(550)  评论(0编辑  收藏  举报