网站内容优化

发表于 分类于 阅读次数： 本文字数： 341 阅读时长 ≈ 1 分钟

今天用 lighthouse 分析博客的性能，发现几个之前不了解的问题，记录一下。

#避免在主线程跑复杂 JS

live2d.js 很耗时

#内嵌关键 JS/CSS，延迟非关键 JS/CSS

#使用 WebP 格式的图片

1
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

50表示质量，0是最差，100是最佳。

兼容方案：向新版浏览器提供 WebP 内容，同时保留对旧版浏览器的支持。

1
2
3
4
5
<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>

#字体设置

有些浏览器在字体文件加载完成之前会隐藏文本。

字体css的font-display属性设置此行为：

  • auto: 字体显示策略由用户代理定义。
  • block: 为字体提供一个短暂的阻塞周期和无限的交换周期。
  • swap: 为字体提供一个非常小的阻塞周期和无限的交换周期。
  • fallback: 为字体提供一个非常小的阻塞周期和短暂的交换周期。
  • optional: 为字体提供一个非常小的阻塞周期，并且没有交换周期。

讲人话就是，后三个选项明确指示浏览器使用fallback字体。

1
2
3
4
5
6
7
8
9
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}