feat: add lazy CSS loading option for performance optimization

_config.yml

@@ -347,6 +347,12 @@ calendar:
 # For more information: https://www.w3.org/TR/resource-hints/#preconnect
 preconnect: false
 
+# Performance optimization
+performance:
+  # Lazy-load non-critical CSS (FontAwesome, Fancybox, KaTeX)
+  # This improves Lighthouse scores by making these CSS files non-render-blocking
+  lazy_css: false
+
 # Set the text alignment in posts / pages.
 text_align:
   # Available values: start | end | left | right | center | justify | justify-all | match-parent

layout/_partials/head/head.njk

@@ -48,14 +48,14 @@
 
 {{ next_font() }}
 
-{{ next_vendors('fontawesome') }}
+{{ next_vendors('fontawesome', { lazy: true }) }}
 
 {%- if theme.motion.enable %}
   {{ next_vendors('animate_css') }}
 {%- endif %}
 
 {%- if theme.fancybox %}
-  {{ next_vendors('fancybox_css') }}
+  {{ next_vendors('fancybox_css', { lazy: true }) }}
 {%- endif %}
 
 {%- if theme.pace.enable %}

layout/_third-party/math/katex.njk

@@ -1,4 +1,4 @@
-{{ next_vendors('katex') }}
+{{ next_vendors('katex', { lazy: true }) }}
 {%- if theme.math.katex.copy_tex %}
   {{ next_data('katex', {
     copy_tex_js: theme.vendors.copy_tex_js

scripts/helpers/engine.js

@@ -35,13 +35,26 @@ hexo.extend.helper.register('next_js', function(file, {
   return `<script ${pjax ? 'data-pjax ' : ''}${module ? 'type="module" ' : ''}src="${src}" defer></script>`;
 });
 
-hexo.extend.helper.register('next_vendors', function(name) {
+hexo.extend.helper.register('next_vendors', function(name, options = {}) {
   const { url, integrity } = this.theme.vendors[name];
   const type = url.endsWith('css') ? 'css' : 'js';
+  const { lazy = false } = options;
+
   if (type === 'css') {
+    const integrityAttr = integrity ? ` integrity="${integrity}" crossorigin="anonymous"` : '';
+
+    // Lazy-load CSS using preload + onload technique
+    if (lazy && this.theme.performance?.lazy_css) {
+      return `<link rel="preload" href="${url}" as="style" onload="this.onload=null;this.rel='stylesheet'"${integrityAttr}>
+<noscript><link rel="stylesheet" href="${url}"${integrityAttr}></noscript>`;
+    }
+
+    // Default: render-blocking CSS
     if (integrity) return `<link rel="stylesheet" href="${url}" integrity="${integrity}" crossorigin="anonymous">`;
     return `<link rel="stylesheet" href="${url}">`;
   }
+
+  // JS handling unchanged (already uses defer)
   if (integrity) return `<script src="${url}" integrity="${integrity}" crossorigin="anonymous" defer></script>`;
   return `<script src="${url}" defer></script>`;
 });