Files
blog-nextjs/components/layout-shell.tsx
gbanyan 2402c94760 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>
2026-02-13 16:18:51 +08:00

22 lines
619 B
TypeScript

import { SiteHeader } from './site-header';
import { SiteFooter } from './site-footer';
import dynamic from 'next/dynamic';
// Lazy load BackToTop since it's not critical for initial render
const BackToTop = dynamic(() => import('./back-to-top').then(mod => ({ default: mod.BackToTop })), {
ssr: false,
});
export function LayoutShell({ children }: { children: React.ReactNode }) {
return (
<div className="flex min-h-screen flex-col">
<SiteHeader />
<main className="flex-1 container mx-auto px-4 py-6">
{children}
</main>
<SiteFooter />
<BackToTop />
</div>
);
}