perf: 大幅優化網站效能

字體優化：
- 減少字體權重 (5→2: 400, 700)
- 移除 Inter 字體，使用系統字體替代
- 非阻塞異步載入字體

JavaScript 優化：
- 添加 defer 屬性延遲載入 app.js
- 關閉 Matrix rain 和 Scanlines 動畫效果

圖片優化：
- 添加 loading="lazy" 懶載入
- 優化 post-card 和 product-card 圖片

CSS 優化：
- 添加 preload 預載入關鍵 CSS
- 更新字體堆疊使用系統字體作為備選

Author: Dr. Awesome Doge

_config.yml

@@ -77,8 +77,8 @@ google_analytics: G-ENDDT5D0CR
 # Theme Settings
 theme_settings:
   default_theme: dark  # dark | light | auto
-  enable_matrix: true
-  enable_scanlines: true
+  enable_matrix: false      # 關閉以提升效能
+  enable_scanlines: false   # 關閉以提升效能
   enable_typewriter: true
 
 # SEO

_includes/head.html

@@ -9,12 +9,14 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
-  <!-- Fonts -->
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap" rel="stylesheet">
-
-  <!-- Main CSS -->
+  <!-- Critical CSS - Preload -->
+  <link rel="preload" href="{{ '/assets/css/app.css' | relative_url }}" as="style">
   <link rel="stylesheet" href="{{ '/assets/css/app.css' | relative_url }}">
 
+  <!-- Fonts - Optimized (reduced weights, async loading) -->
+  <link rel="preload" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap"></noscript>
+
   <!-- Favicon -->
   <link rel="shortcut icon" type="image/png" href="{{ '/favicon.png' | relative_url }}">
   <link rel="apple-touch-icon" href="{{ '/favicon.png' | relative_url }}">

_includes/post-card.html

@@ -1,7 +1,7 @@
 <div class="card">
     {% if post.image %}
     <div class="card-image">
-        <img src="{{ post.image }}" alt="{{ post.title }}">
+        <img src="{{ post.image }}" alt="{{ post.title }}" loading="lazy">
     </div>
     {% else %}
     <header class="card-header">

_includes/product-card.html

@@ -8,7 +8,7 @@
   <!-- Image -->
   <div class="relative aspect-[4/3] bg-cp-dark-200 overflow-hidden">
     {% if include.product.image %}
-    <img src="{{ include.product.image }}" alt="{{ include.product.title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
+    <img src="{{ include.product.image }}" alt="{{ include.product.title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
     {% else %}
     <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-cp-dark-200 to-cp-dark-300">
       <span class="text-4xl text-cp-dark-400">📖</span>

_layouts/default.html

@@ -66,8 +66,8 @@
   <!-- Search Modal -->
   {% include search-modal.html %}
 
-  <!-- Scripts -->
-  <script src="{{ '/assets/js/app.js' | relative_url }}"></script>
+  <!-- Scripts - Deferred for Performance -->
+  <script src="{{ '/assets/js/app.js' | relative_url }}" defer></script>
   {% include footer-scripts.html %}
 </body>
 </html>

assets/css/app.css

@@ -50,10 +50,10 @@ module.exports = {
           purple: '#bf00ff',
         },
       },
-      // 字體
+      // 字體 - 優化：使用系統字體作為備選
       fontFamily: {
-        'mono': ['JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', 'monospace'],
-        'sans': ['Inter', 'Noto Sans TC', 'system-ui', 'sans-serif'],
+        'mono': ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'Monaco', 'Consolas', 'monospace'],
+        'sans': ['Noto Sans TC', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
       },
       // 動畫
       animation: {