웹 최적화 기법

💡 웹사이트의 성능은 사용자 경험(UX) 과 검색엔진 최적화(SEO) 모두에 직접적인 영향을 준다.

불필요한 리소스를 줄이고 렌더링을 효율화하면, 더 빠르고 쾌적한 웹을 만들 수 있다.

🧱 1. 전송 최적화 (Network & Bundle Optimization)

⚙️ 코드 스플리팅 (Code Splitting)

• 사용자가 필요한 페이지의 코드만 로드하도록 분리.
• next/dynamic 또는 React.lazy()를 사용해 불필요한 JS 전송 방지.

⚙️ 트리 셰이킹 (Tree Shaking)

• 사용하지 않는 모듈을 번들에서 제거.
• ESModule(import/export) 기반에서 자동으로 적용됨.

⚙️ 압축 및 프로토콜

• Gzip / Brotli 압축 활성화 → 전송 크기 절감.
• HTTP/2, HTTP/3 사용 시 다중 요청 처리 속도 개선.

⚙️ CDN (Content Delivery Network)

• 정적 자산(JS, CSS, 이미지 등)을 전 세계 서버에 분산.
• 사용자의 지리적 위치에 따라 가장 가까운 서버에서 빠르게 응답.

🖼️ 2. 이미지 최적화 (Image Optimization)

📏 포맷 최적화

• WebP / AVIF 포맷 사용 → 기존 JPG, PNG보다 30~80% 가벼움.
• 호환성 이슈 대비를 위해 fallback 이미지 준비.

🧩 반응형 이미지 (Responsive Image)

• next/image 컴포넌트로 기기별 크기 자동 조절.
• 고해상도(레티나) 대응 및 lazy-loading 자동 적용.

💤 Lazy Loading

• 화면에 노출되는 시점에만 이미지를 로드.
• 초기 렌더링 부하를 크게 줄임.

🔤 3. 폰트 최적화 (Font Optimization)

✂️ 폰트 서브셋 만들기

• 실제 사용하는 글자만 포함한 subset 폰트 생성.
• 용량 절감 및 로딩 시간 단축.

⏱️ font-display 속성

• swap 설정으로 보이지 않는 텍스트(FOIT) 문제 방지.

  → 시스템 폰트로 먼저 보여주고 나중에 교체.

🏠 Self Hosting

• Google Fonts CDN 대신 직접 호스팅.
• 네트워크 지연과 차단 이슈 줄이고 안정적 성능 확보.

🔄 4. 데이터 패칭 최적화 (Data Fetching Optimization)

⚙️ SSR / SSG / ISR 전략

• SSG: 정적 데이터 → 빌드 시 미리 생성
• SSR: 요청 시 서버에서 생성
• ISR: 일정 주기마다 자동 갱신

fetch("https://api.example.com/data", { next: { revalidate: 60 } });

🧠 캐싱 활용 (React Query / SWR)

• 데이터 캐싱 + 자동 재검증으로 불필요한 API 호출 방지.
• background revalidation으로 신선한 데이터 유지.

🛰️ Prefetching

• 사용자가 링크에 hover할 때 미리 데이터 패칭.
• 실제 클릭 시 즉시 페이지 표시.

🪄 5. 사전 렌더링 (Pre-rendering)

🧊 Static Rendering

• 빌드 시점에 HTML을 미리 생성 → 첫 화면이 즉시 표시됨.

🔥 Dynamic Rendering

• 요청마다 새 HTML 생성 → 최신 데이터를 항상 표시.

♻️ ISR (Incremental Static Regeneration)

• 정적 + 동적 혼합 형태. 일정 주기마다 자동으로 HTML 갱신.

💧 Streaming Rendering

• 서버에서 HTML을 순차적으로 전송.
• 사용자에게 첫 부분을 빠르게 보여줌.

🧠 6. 캐싱 전략 (Caching Strategy)

📦 HTTP 캐시

• Cache-Control, ETag 헤더 설정으로 정적 자산 재사용.
• immutable 옵션 사용 시 변경 없는 리소스는 완전히 캐싱.

🪶 Service Worker (PWA)

• 네트워크 요청 없이 로컬에서 캐싱된 데이터 제공.
• 오프라인 접근 및 반복 방문 시 빠른 응답.

⚡ 7. 렌더링 최적화 (Rendering Optimization)

🧩 Critical Rendering Path 단축

• 불필요한 CSS/JS 제거, 렌더 차단 리소스 최소화.

⏳ Lazy Hydration

• 유저 상호작용이 필요한 컴포넌트만 나중에 Hydration.

💧 Suspense + Streaming

• React 18의 Concurrent Rendering으로 체감 속도 향상