使用lazyload懒加载

lazyload(懒加载)是一个对提升性能非常有效的功能，它会优先加载处于屏幕显示区域内的资源，而不是等待一整个页面的资源加载完毕。这让许多资源可以在用户边浏览的时候边加载，节省时间。
因前两个月懒加载服务太卡了我就没开，现在恢复正常了我又打开了
我给我的评论模块开启了lazyload，因为很多时候评论模块加载都会慢，导致用户要在加载页面等待。

  • 修改**config.butterfly.yml**
    评论懒加载：
    1
    2
    3
    4
    5
    6
    comments:
      use: Twikoo
      text: true
      lazyload: true #原为false
      count: false
      card_post_count: false
    网站图片懒加载：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Lazyload
    # https://github.com/verlok/vanilla-lazyload
    lazyload:
      enable: true  #原为空
      # Use browser's native lazyload instead of vanilla-lazyload
      native: false
      # Specify the field to use lazyload (site or post)
      field: site
      placeholder:
      blur: false

压缩图片大小

作为静态博客占用最大的部分，图片文件的大小关乎了网站加载速度。
一张图片若有10m，那前端用户也会实打实加载10m，如果网络质量好倒是无所谓，但是对带宽低的和网络不好的人来说加载速度就是地狱
我用的是Squoosh压缩图片，这个工具可以自选压缩率，而且压缩后图片效果很好

  • 预览：

1

1

可见效果还是非常不错的，从原先1.25mb➡️115kb，质的转变，图片质量也不会变太多

  • 操作：
    打开Squoosh，上传图片，操作右下角的Quality可以自己操控压缩率，中间大图左侧为原图，右侧为压缩效果，可以自行左右滑动1

压缩css，js

如图所示，自己css样式不再更新之后可以进行压缩来少量增加网站性能，js同理。但是css压缩基本不会出现样式错乱问题，js压缩经常会导致js代码失效，只能先排查失效部分，然后单独创建新文件引入1
我所使用的工具：（建议给css和js做个副本，或者创建.min文件）

  • css压缩,打开后上传css文件进行压缩，点击左上角的复制代码，替换原先的css
  • js压缩和css同理

使用hexo-html-minifier插件

hexo-all-minifier 插件可以一站式解决压缩问题，它集成了以下子插件，可以压缩HTML,JS,CSS, 本地Image。

  • 压缩效果肯定没有对文件本身动手效果好，但是至少有用
  1. 在控制台输入：
    1
    npm install hexo-all-minifier --save
  2. 在_config.yml文件中添加一行
    1
    all_minifier: true

CDN存储

图片不仅需要量小，还得选择好的图床，大多数人使用的都是vercel或者Cloudflare的自带cdn，他们服务器都在国外，导致国内加载还是稍微慢的。国内有少量”免费“额度的CDN，以下流量按月算

名称网址免费存储免费流量
七牛云链接10g10g
又拍云链接10g15g

如果有新发现的以后再加，使用cdn注意别被盗刷