🚀 Next.js 블로그 성능 최적화 기록

Next.js로 만든 블로그에서 카드 클릭 시 느린 반응과 이미지 로딩 중 화면 흔들림 등의 문제가 있었습니다.
실제 문제 상황과, 성능을 대폭 개선한 5가지 최적화 전략을 정리합니다.

---

✅ 문제 상황

• 페이지 로딩 10초 이상
• 이미지 로딩 중 콘텐츠 위치 변경 (CLS)
• 클릭 반응 느림 → 사용자 이탈 가능성 증가

---

💡 성능 최적화 전략 5가지

1️⃣ 이미지 최적화 (LCP 개선)

• <img> 대신 next/image 사용
• 자동 WebP 변환 + 사이즈 최적화
• blur placeholder로 부드러운 로딩 효과 제공

import Image from 'next/image'

<Image
  src="/example.jpg"
  width={600}
  height={400}
  alt="예시 이미지"
  placeholder="blur"
/>

2️⃣ Link 컴포넌트 prefetch 활성화

<Link href={`/posts/${slug}`} prefetch={true}>
  <a>포스트 보기</a>
</Link>

• 백그라운드에서 페이지 미리 로딩
• 클릭 즉시 전환 가능
• 중복된 Link 제거로 DOM 최적화

3️⃣ React.memo로 카드 컴포넌트 최적화

const PostCard = React.memo(({ post }) => (
  <div>{post.title}</div>
));

• 동일 props일 경우 리렌더링 방지
• 렌더링 비용 감소
• 메모리 절약

4️⃣ Skeleton UI 추가

{isLoading ? <PostCardSkeleton /> : <PostCard post={post} />}

• 로딩 중에도 레이아웃 유지
• 사용자의 기다림에 대한 인지 제공
• 콘텐츠 밀림 방지

5️⃣ next.config 설정 최적화

// next.config.mjs
export default {
  compress: true,
  experimental: {
    optimizeCss: true,
  },
};

• 번들 크기 감소
• 서버 처리 성능 향상
• CSS 렌더링 효율 개선

---

🎯 화면 흔들림(CLS) 방지

• 이미지의 width, height 명시
• blur placeholder로 자연스러운 전환
• 콘텐츠가 밀리지 않도록 이미지 위치 고정

---

📊 성능 개선 결과

---

📱 사용자 체감 변화

• 모바일에서도 페이지가 빠르게 열립니다
• 카드 클릭하자마자 상세 페이지가 바로 뜹니다
• 이미지가 깨끗하고 빠르게 보여집니다
• 콘텐츠 로딩 중에도 스켈레톤 UI로 UX 유지됩니다

---

🏁 결론

Next.js는 기본적으로 최적화가 잘 되어 있지만,
아래와 같은 작은 개선들만으로도 큰 UX 향상을 이끌 수 있습니다:

• next/image 도입
• Link prefetch 활용
• memoization, Skeleton UI
• config 설정 최적화

👉 블로그 성능을 고민 중이라면 위 전략들을 하나씩 적용해보세요!
눈에 띄게 달라진 사용자 경험을 확인할 수 있습니다. 🎉