优化使用 Nuxt3 开发的官网首页，秒开！

唐诗
0 阅读4分钟

一年前接了个官网的开发的活（这个文章其实也写了一年了！），使用 nuxt3 进行开发，使用 SSG 模式即执行 nuxt generate 后将产物进行部署

测试环境： mac m1 16、 谷歌 136

开发部署完成后客户反应说打开速度有点慢，实际测试了下发现确实有点慢，直接看图

image.png

在无痕模式禁用缓存的情况需要近 20 多秒才能加载完成，它不正常！

再来看下优化后的加载情况

image.png

一秒内！几乎是秒开了，那我都干了什么呢？

开启 http 2.0

让 gpt 先做个总结

特性HTTP/1.1HTTP/2.0
协议格式文本格式二进制格式
多路复用不支持，一个连接一次只处理一个请求支持，一个连接可同时处理多个请求
头部压缩无（头部冗余较多）使用 HPACK 进行头部压缩
服务器推送不支持支持，服务器可主动推送资源
连接复用多个请求需多个 TCP 连接或排队所有请求共享一个 TCP 连接
队头阻塞（HOL）存在，阻塞严重解决，通过帧分片并异步处理
加密（TLS）可选可选（多数实现默认启用）

还有一个很重要的点是 同一域名下的并发连接数限制 http 1.1 是最多 6个， http 2.0 则是所有请求复用单一连接，通过多路复用并发处理，效率更高

开启 gzip

nuxt3 貌似并没有提供 gzip 压缩的相关操作，这个项目使用 docker 部署在镜像 nginx 中配置了 gzip 压缩

image.png

调试面板这样显示表示 gzip 配置成功！

使用 NuxtPicture 优化图片加载

<NuxtPicture
  format="avif,webp"
  :src="getImg('/about/banner.png')"
  :alt="$t('about.title')"
  :img-attrs="{ style: 'width: 100%' }"
  width="1920"
  height="578"
  placeholder
  loading="lazy"
/>

loading img 原生属性图片可见时加载

format 响应式图片加载，单从图片压缩后大小来看 avif < webp < jpg < png 这里是如果浏览器支持 avif or webp 就使用 否则使用原始图片也就是 src 设置的图片

响应式图片加载

这里以首页封面图为例

<picture>
  <source type="image/avif" srcset="home/banner.avif">
  <source type="image/webp" srcset="home/banner.webp">
  <img src="home/banner.png" alt="用中文链接世界"class="w-full">
</picture>
  1. <picture> 元素：用于为不同的设备或浏览器条件提供不同的图片资源。
  2. <source> 标签：指定不同格式的图片（如 AVIF、WebP）。
  3. 降级加载（Fallback） ：如果浏览器不支持 AVIF，会加载 WebP；都不支持则加载 PNG。
格式压缩类型浏览器兼容性文件大小（相同质量）加载速度适用场景
AVIF有损/无损较新浏览器支持良好最小（高压缩率）快现代 Web，体积敏感场景
WebP有损/无损主流浏览器广泛支持较小快Web 图片优化
PNG无损全面支持大慢图标、透明图、高质量图像
JPG有损全面支持中快摄影、背景图等色彩丰富图片

通过上边的表格可以看出来同样质量的图片 AVIF、WebP 体积要小于 PNG、JPG 下边来对比一下

AVIF 440KB -> 156KB 减少了 65%

image.png

WebP 440KB -> 156KB 减少了 65%

image.png

看到这里你觉得也许不过如此！但是如果把图片质量下降到 70 AVIF 图片的体积可以减少到 35KB 减少 92% 的体积

image.png

AVIF 与 PNG 加载速度对比

AVIF- 34ms

image.png

PNG 3.36秒

image.png

1. 字体文件放到 cdn 2. 延迟字体加载

另一个拖慢加载的元凶是字体加载

image.png

最初的方式是创建一个 font.scss 文件

@font-face {
  font-family: 'AlibabaPuHuiTi-3-55-Regular';
  src: url('/public/fonts/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

在 index.scss 中引入

@use './font.scss';

然后配置 nuxt.config.ts

css: [
    '~/assets/style/index.scss',
],

这样做会导致字体文件参与打包并和其他js、css 等文件同时加载

image.png

可以这样改把 font.scss 改为 font.css 放到 public/fonts/font.css 中

然后修改 nuxt.config.ts

  app: {
    head: {
      link: [
        {
          rel: 'stylesheet',
          href: '/fonts/font.css',
          media: 'print',
          onload: 'this.media=\'all\'',
        },
      ],
    },
  },

这样 font.css 就会延迟加载从而延迟加载字体文件且字体文件不会参与打包

image.png

合理优化图片可以让官网加载速度提升

首页打开加载完成时间从 26 秒 减少到 2 秒，性能提升了约 92.31% ，即 13 倍。

image.png

image.png

总结

通过使用 http2.0 、gzip、图片懒加载、响应式图片加载、延迟字体加载等操作可以让首页达到秒开的效果

就这么简单的几步就可以让首页加载速度提升一个级别

这还是无痕禁用缓存下的数据，如果不禁用缓存还会更快

图片压缩工具是 squoosh.app

avatar
文章
阅读
粉丝