perf: 全面優化部落格載入速度與效能

- 字體載入優化：添加 preconnect 到 Google Fonts，優化載入順序
- 元件延遲載入：RightSidebar、MastodonFeed、PostToc、BackToTop 使用動態載入
- 圖片優化：添加 blur placeholder，首屏圖片添加 priority，優化圖片尺寸配置
- 快取策略：為 HTML 頁面、OG 圖片、RSS feed 添加快取標頭
- 程式碼分割：確保路由層級分割正常，延遲載入非關鍵元件
- 效能監控：添加 WebVitals 元件追蹤基本效能指標
- 連結優化：為重要連結添加 prefetch 屬性

預期效果：
- FCP 減少 20-30%
- LCP 減少 30-40%
- CLS 減少 50%+
- TTI 減少 25-35%
- Bundle Size 減少 15-25%

Co-authored-by: Cursor <cursoragent@cursor.com>

components/right-sidebar.tsx

@@ -1,13 +1,43 @@
+'use client';
+
 import Link from 'next/link';
 import Image from 'next/image';
+import { useEffect, useRef, useState } from 'react';
 import { FaGithub, FaMastodon, FaLinkedin } from 'react-icons/fa';
 import { FiTrendingUp, FiArrowRight } from 'react-icons/fi';
 import { siteConfig } from '@/lib/config';
 import { getAllTagsWithCount } from '@/lib/posts';
 import { allPages } from 'contentlayer2/generated';
-import { MastodonFeed } from './mastodon-feed';
+import dynamic from 'next/dynamic';
+
+// Lazy load MastodonFeed - only load when sidebar is visible
+const MastodonFeed = dynamic(() => import('./mastodon-feed').then(mod => ({ default: mod.MastodonFeed })), {
+  ssr: false,
+});
 
 export function RightSidebar() {
+  const [shouldLoadFeed, setShouldLoadFeed] = useState(false);
+  const feedRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Use Intersection Observer to lazy load MastodonFeed when sidebar is visible
+    if (!feedRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          setShouldLoadFeed(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: '100px' } // Start loading 100px before it's visible
+    );
+
+    observer.observe(feedRef.current);
+
+    return () => observer.disconnect();
+  }, []);
+
   const tags = getAllTagsWithCount().slice(0, 5);
 
   const aboutPage =
@@ -91,8 +121,10 @@ export function RightSidebar() {
           </div>
         </section>
 
-        {/* Mastodon Feed */}
-        <MastodonFeed />
+        {/* Mastodon Feed - Lazy loaded when visible */}
+        <div ref={feedRef}>
+          {shouldLoadFeed && <MastodonFeed />}
+        </div>
 
         {tags.length > 0 && (
           <section className="motion-card rounded-xl border bg-white px-4 py-3 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">