Các công cụ Vibe Code

Performance & UX: Làm Profile Load Nhanh Như Bay

Một profile đẹp nhưng load chậm = thất bại. Bài này cover optimization techniques.

Image Optimization

Prompt Template:

Optimize images cho profile:

Avatar:
- Size: 240x240 (display 120, retina 2x)
- Format: WebP với JPEG fallback
- Lazy: false (above fold)

Portfolio thumbnails:
- Size: 800x450 (16:9)
- Format: WebP
- Lazy: true (below fold)
- Blur placeholder khi loading

Implementation:
- next/image với automatic optimization
- srcset cho responsive sizes
- Priority loading cho hero

Loading Strategy

Progressive loading approach:

1. Critical CSS inline (above-fold styles)
2. Hero content: no lazy, priority
3. Below-fold: lazy load
4. Images: blur-up placeholder

Skeleton loading:
- Show skeleton immediately
- Replace with content khi loaded
- Animate transition (fade, không jump)

Prompt: "Add skeleton loading cho portfolio section"

Bundle Optimization

Reduce JavaScript bundle:

Analysis:
- npm run analyze để xem bundle
- Identify large dependencies
- Lazy load heavy components

Solutions:
- Dynamic imports cho modals
- Code splitting by route
- Tree shake unused code
- Replace moment.js với date-fns

Target: initial load < 100KB JS

Performance Metrics

Core Web Vitals targets:

LCP (Largest Contentful Paint): < 2.5s
- Hero image là LCP element
- Preload hero image
- Optimize server response

FID (First Input Delay): < 100ms
- Minimize JS execution
- Split long tasks
- Defer non-critical scripts

CLS (Cumulative Layout Shift): < 0.1
- Set width/height on images
- Reserve space cho async content
- No inserting content above fold

Caching Strategy

Implement caching:

Static assets:
- Images: Cache-Control max-age=31536000
- CSS/JS: Same với hash in filename

API responses:
- Profile data: stale-while-revalidate
- Portfolio: cache 1 hour
- Reviews: cache 1 day

Service Worker (optional):
- Offline fallback page
- Cache portfolio images

UX Improvements

Micro UX enhancements:

Scroll:
- Smooth scroll cho anchor links
- Scroll progress indicator
- Back to top button

Navigation:
- Sticky nav khi scroll down
- Active section highlighting
- Keyboard shortcuts (G P = go to portfolio)

Feedback:
- Copy email: success toast
- Download CV: progress indicator
- Contact form: inline validation

Error Handling

Graceful error states:

Image fail:
- Fallback avatar (initials)
- Broken image placeholder

API fail:
- Cached data fallback
- Retry button
- Skeleton persistent với message

Network:
- Offline banner
- Queue actions for later

Analytics Integration

Track user behavior:

Events to track:
- Section scroll depth
- Portfolio item clicks
- Contact CTA clicks
- Time on page
- Download CV clicks

Tools:
- Google Analytics 4
- Hotjar heatmaps
- Custom events với Posthog

Privacy:
- Cookie consent
- Anonymous until consent
- Minimal data collection

Performance Checklist

💡 Pro Tip: Run Lighthouse trước mỗi major change. Regression dễ xảy ra.