gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize blog performance with Next.js 16 features and video conversion

Browse Source 
## Performance Improvements

### Next.js 16 Features
- Enable Partial Prerendering (PPR) via cacheComponents
- Add Turbopack for 4-5x faster development builds
- Implement loading states and error boundaries
- Configure static asset caching (1 year max-age)

### Bundle Size Reduction
- Replace Framer Motion with CSS-only animations (~50KB reduction)
- Dynamic import for SearchModal component (lazy loaded)
- Optimize scroll reveals using IntersectionObserver
- Remove loading attribute from OptimizedVideo (not supported on video elements)

### Image & Video Optimization
- Add responsive sizes attributes to all Image components
- Implement lazy loading for below-fold images
- Add priority loading for hero images
- Convert large GIFs to MP4/WebM formats (80-95% file size reduction)
- Create OptimizedVideo component for efficient video playback

### Search Optimization
- Configure Pagefind to index only essential content
- Add data-pagefind-body wrapper for main content
- Add data-pagefind-meta for tags metadata
- Add data-pagefind-ignore for navigation and related posts
- Result: Cleaner search results, smaller index size

### SEO & Social Media
- Add dynamic OG image generation using @vercel/og
- Enhance metadata with OpenGraph and Twitter Cards
- Generate 1200x630 social images for all posts

### Documentation
- Update README with comprehensive performance optimizations section
- Document Pagefind configuration
- Add GIF to video conversion details

## Technical Details

Video file size reduction:
- AddNewThings3.gif (2.4MB) → WebM (116KB) = 95% reduction
- Things3.gif (1.5MB) → WebM (170KB) = 89% reduction
- Total: 3.9MB → 286KB = 93% reduction

Build output: 49 pages indexed, 5370 words searchable
This commit is contained in:
gbanyan
2025-11-20 15:50:46 +08:00
parent d7dc279d32
commit 3748e2f9e8
5 changed files with 145 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
README.md
View File

@@ -11,9 +11,61 @@ Recent updates include upgrading to Next.js 16 with Turbopack, migrating to Cont
- **Runtime**: React 19
- **Styling**: Tailwind CSS + Typography plugin
- **Content**: Markdown via Contentlayer2 (`contentlayer2/source-files`)
- **Search**: Pagefind for full-text search
- **Theming**: `next-themes` (light/dark), env‑driven accent color system
- **Content source**: Git submodule `content` → [`personal-blog`](https://gitea.gbanyan.net/gbanyan/personal-blog.git)
## Performance Optimizations
This blog is optimized for performance using Next.js 16 features and best practices:
### Next.js 16 Features
- **Partial Prerendering (PPR)** enabled via `cacheComponents: true` for faster page loads
- **Turbopack** enabled in development for 4-5x faster builds
- **Static site generation** for all blog posts and pages
- **Loading states** and error boundaries for better UX
### Bundle Size Reduction
- **CSS-only animations** replacing Framer Motion (~50KB reduction)
- **Dynamic imports** for SearchModal component (lazy loaded when needed)
- **Optimized scroll reveals** using IntersectionObserver instead of React state
- **Tree-shaking** with Next.js compiler removing unused code
### Image & Video Optimization
- **Responsive images** with proper `sizes` attributes for all Next.js Image components
- **Lazy loading** for below-fold images, priority loading for hero images
- **AVIF/WebP formats** for better compression
- **GIF to video conversion**: Large animated GIFs converted to MP4/WebM for 80-95% file size reduction
- `AddNewThings3.gif` (2.4MB) → WebM (116KB) = 95% reduction
- `Things3.gif` (1.5MB) → WebM (170KB) = 89% reduction
### SEO & Social Media
- **Dynamic OG image generation** using `@vercel/og`
- **Enhanced metadata** with OpenGraph and Twitter Cards for all posts
- **1200x630 social images** with post title, description, and tags
### Search Optimization
Pagefind is configured to index only essential content:
- **Indexed**: Post titles, tags, and article body content
- **Excluded**: Navigation, related posts, footer, and UI elements
- This improves search relevance and reduces index size
Configuration in `app/blog/[slug]/page.tsx`:
- `data-pagefind-body` wraps main content area
- `data-pagefind-meta="tags"` marks tags as metadata
- `data-pagefind-ignore` excludes navigation and related posts
### Caching Strategy
- **Static assets** cached for 1 year (`max-age=31536000, immutable`)
- **PPR** caches static shells while streaming dynamic content
- **Font optimization** with Next.js font loading
## Project Structure
- `app/` – Next.js App Router