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>
This commit is contained in:
2026-02-13 16:18:51 +08:00
parent 62090c7742
commit 2402c94760
12 changed files with 162 additions and 13 deletions

View File

@@ -28,6 +28,8 @@ export function PostCard({ post, showTags = true }: PostCardProps) {
height={360}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
loading="lazy"
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
className="mx-auto max-h-60 w-full object-contain transition-transform duration-300 ease-out group-hover:scale-105"
/>
</div>