blog-nextjs

gbanyan/blog-nextjs

Fork 0

Commit Graph

Author	SHA1	Message	Date
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
gbanyan	d7dc279d32	Add dynamic OG image generation for social media sharing ## Features - Create /api/og route for dynamic Open Graph image generation - Beautiful gradient design with site branding - Display post title, description, and tags - Support for both light and dark themes - Proper sizing for social media (1200x630) ## Implementation - Use @vercel/og package for image generation - Add OpenGraph and Twitter Card metadata to blog posts - Fallback to localhost for development - Uses NEXT_PUBLIC_SITE_URL environment variable for production ## Social Media Support - OpenGraph (Facebook, LinkedIn, etc.) - Twitter Cards with large image preview - Article metadata including publish time and tags Example usage: /api/og?title=Post+Title&description=Post+Desc&tags=tag1,tag2,tag3 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-20 14:55:36 +08:00

Author

SHA1

Message

Date

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

gbanyan

d7dc279d32

Add dynamic OG image generation for social media sharing

## Features
- Create /api/og route for dynamic Open Graph image generation
- Beautiful gradient design with site branding
- Display post title, description, and tags
- Support for both light and dark themes
- Proper sizing for social media (1200x630)

## Implementation
- Use @vercel/og package for image generation
- Add OpenGraph and Twitter Card metadata to blog posts
- Fallback to localhost for development
- Uses NEXT_PUBLIC_SITE_URL environment variable for production

## Social Media Support
- OpenGraph (Facebook, LinkedIn, etc.)
- Twitter Cards with large image preview
- Article metadata including publish time and tags

Example usage:
/api/og?title=Post+Title&description=Post+Desc&tags=tag1,tag2,tag3

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-20 14:55:36 +08:00

2 Commits