Ecx-project进行的过程中

发现了一个问题

就是我加了nerdfont，仿宋等等多个字体

使用的css引入

再加上我没有cdn，用的也是github，加载非常慢

字体要十几秒。

:::success
这就有了今天的优化方案
:::

:::tips
思路：
首先我想到的方式有：

  1. 预加载
  • 原理：提早浏览器对资源的加载时机，和页面本身的解析流程更加同时，加速页面整体的渲染流程
  • 它慢，让它先加载
  • 方法：预加载css和ttf
  1. cdn
  • 没钱买
    :::

今天来预加载

  • 首先声明：教程适用于butterfly主题

在主题配置中找到inject字段

1
2
3
4
5
6
7
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" type="text/css" href="/css/自定义css的名称.css">
  bottom:

可以看到你引用的css

然后添加预加载

1
2
3
4
5
6
7
8
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" type="text/css" href="/css/自定义css的名称.css">
    - <link rel="preload" as="style" type="text/css" href="/css/自定义css的名称.css">
  bottom:

注意这里两处自定义css的名称必须相同，这样他们才会指向同一个css

如果要预加载字体，先确保字体已经正常显示
然后

1
2
3
4
5
6
7
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="preload" as="font" type="font/ttf" href="字体路径" crossorigin="anonymous">
  bottom:

特别鸣谢：