博客载入优化

依旧前言

可以看到 我的网站使用了一个随机图片API 故在载入时加载要为每个文章调用API 所以加载很慢 上次用Clouldflare的检测检测了一下 载入花了整整8秒!

image.png

这不管一下是不行了…….

懒加载

我相信在你们的主题配置文件中应该可以找到类似以下代码

1
2
3
4
5
6
7
8
9
10
11
12
# 懒加载
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: true
  # 使用浏览器原生懒加载替代 vanilla-lazyload
  native: false
  # 指定懒加载的范围: site（全站）/ post（文章）
  field: site
  # 占位图
  placeholder: https://djkl.qzz.io/file/1771226762706_yileina.png
  # 模糊效果
  blur: true

en 这个就是我们优化的主要方式了 将lazyload开启后 用户端就会只加载可视的内容 以此减少加载量

效果实例图

image (1).png

可以看到 LCP 从 8.3 秒降到 1.7 秒，说明之前拖慢加载的图片或资源已被成功延迟加载，首屏加载速度大幅提升。整体体验已进入绿色良好区间（100-90）！

至此 没了