hexo-next 網頁載入效能優化

發表於 分類於

本篇主要是解決Hexo-Next主題載入速度優化。

使用環境

NexT 8.15.1

有的時候會一直覺得自己的網站載入速度太慢，但由於安裝了hexo-optimize的第三方套件會導致跑版。後來找到用prefetch和網頁壓縮的方式進行優化。

使用Quicklink進行優化(prefetch)

  1. 透過npm安裝Quicklink
    npm install quicklink
  2. 修改_config.yml或_config.next.yml檔案的內容，能在該檔案裡面找到下列參數

請記得是修改而不是自己新增，如果找不到代表此方法不完全適用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Quicklink Support
# For more information: https://getquick.link
# Front-matter variable (nonsupport home archive).
quicklink:
  enable: false

  # Home page and archive page can be controlled through home and archive options below.
  # This configuration item is independent of `enable`.
  home: false
  archive: false

  # Default (true) will initialize quicklink after the load event fires.
  delay: false
  # Custom a time in milliseconds by which the browser must execute prefetching.
  timeout: 3000
  # Default (true) will attempt to use the fetch() API if supported (rather than link[rel=prefetch]).
  priority: false

並將他們以上false的部分改成true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Quicklink Support
# For more information: https://getquick.link
# Front-matter variable (nonsupport home archive).
quicklink:
  enable: true

  # Home page and archive page can be controlled through home and archive options below.
  # This configuration item is independent of `enable`.
  home: true
  archive: true

  # Default (true) will initialize quicklink after the load event fires.
  delay: true
  # Custom a time in milliseconds by which the browser must execute prefetching.
  timeout: 3000
  # Default (true) will attempt to use the fetch() API if supported (rather than link[rel=prefetch]).
  priority: true
  1. 啟用CDN(這裡一樣是修改_config.yml或_config.next.yml)

請記得是修改而不是自己新增，如果找不到代表此方法不完全適用

找到以下敘述並修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
vendors:
  # The CDN provider of NexT internal scripts.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Warning: If you are using the latest master branch of NexT, please set `internal: local`
  internal: local
  # The default CDN provider of third-party plugins.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Dependencies for `plugins: local`: https://github.com/next-theme/plugins
  plugins: internal
  # Custom CDN URL
  # For example:
  # custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}
  # custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
  custom_cdn_url:

方法一：cloudflare為例

1
2
3
4
5
6
7
8
9
10
11
12
13
# The CDN provider of NexT internal scripts.
# Available values: local | jsdelivr | unpkg | cdnjs | custom
# Warning: If you are using the latest master branch of NexT, please set `internal: local`
internal: local
# The default CDN provider of third-party plugins.
# Available values: local | jsdelivr | unpkg | cdnjs | custom
# Dependencies for `plugins: local`: https://github.com/next-theme/plugins
plugins: cdnjs
# Custom CDN URL
# For example:
# custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}
# custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/hexo-theme-next/8.15.1/third-party/quicklink.min.js

方法二：jsdelivr為例(網路上使用的人較多)

1
2
3
4
5
6
7
8
9
10
11
12
13
# The CDN provider of NexT internal scripts.
# Available values: local | jsdelivr | unpkg | cdnjs | custom
# Warning: If you are using the latest master branch of NexT, please set `internal: local`
internal: local
# The default CDN provider of third-party plugins.
# Available values: local | jsdelivr | unpkg | cdnjs | custom
# Dependencies for `plugins: local`: https://github.com/next-theme/plugins
plugins: jsdelivr
# Custom CDN URL
# For example:
# custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}
# custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
custom_cdn_url: https://cdn.jsdelivr.net/npm/quicklink@2.3.0/dist/quicklink.min.js

CDN列表url查詢

  1. cloudflare https://cdnjs.com/libraries/hexo-theme-next/8.15.1
  2. jsdelivr https://www.jsdelivr.com/package/npm/quicklink/

頁面壓縮

  1. 透過npm安裝Hexo-neat
    npm install hexo-neat --save

  2. 修改跟目錄底下的_config.yml檔案，並添加以下參數

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
neat_enable: true

neat_html:
  enable: true
  exclude:

neat_css:
  enable: true
  exclude:
    - '*.min.css'

neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

圖片晚載入

適合用於網頁圖片較多的人。
1. 安裝npm install hexo-lazyload-image --save
2. 修改配置_config.yml(如果有用NexT主題的請修改NexT主題的_config.yml，而不是跟目錄的_config.yml)

1
2
3
4
5
6
lazyload:
  enable: true
  onlypost: false # optional
  loadingImg: # optional eg ./images/loading.gif
  isSPA: false # optional
  preloadRatio: 3 # optional, default is 1

測試頁面

想測試優化的結果可以用以下網頁做測試。
Google PageSpeed Insights https://pagespeed.web.dev/

參考資料

  1. Hexo-NexT 加载性能优化
  2. GoogleChromeLabs/quicklink
  3. quicklink
  4. Hexo-neat
  5. Hexo 壓縮相關檔案
  6. hexo-lazyload-image
  7. hexo-lazyload-image
  8. https://theme-next.js.org/docs/advanced-settings/vendors