Web Performance 최적화 방법

1. 코드 최적화

① 불필요한 렌더링 최소화

React의 경우, useMemo, useCallback, React.memo를 활용해 불필요한 리렌더링 방지
Virtual DOM 업데이트 최소화

② 코드 분할 (Code Splitting)

Webpack의 Dynamic Import(import()), React의 React.lazy를 사용하여 필요한 부분만 로드
예시 (React Lazy Loading):

const LazyComponent = React.lazy(() => import('./LazyComponent'));

③ Tree Shaking 적용

Webpack, Rollup 등을 활용해 사용하지 않는 코드 제거
ES6 모듈을 사용하면 자동으로 Tree Shaking 적용됨

2. 네트워크 최적화

④ 이미지 최적화

WebP, AVIF 같은 차세대 이미지 포맷 사용
SVG, CSS Sprites 활용
Lazy Loading 적용 (loading="lazy")
CDN(Content Delivery Network) 활용

⑤ 압축 및 캐싱

Gzip, Brotli 압축 활성화
서비스 워커(Service Worker) 활용하여 캐싱 전략 적용
HTTP/2, HTTP/3를 사용하여 성능 개선

⑥ 요청 수 줄이기

CSS, JS, 이미지 파일을 최소한으로 로드
여러 개의 CSS/JS 파일을 하나로 번들링
폰트는 woff2를 사용하고, 불필요한 글리프 제거

3. 렌더링 최적화

⑦ Critical Rendering Path 최적화

<link rel="preload">, <link rel="prefetch"> 사용하여 중요한 리소스를 미리 로드
CSS는 async가 없으므로 Critical CSS 적용

⑧ CSS & JavaScript 블로킹 최소화

CSS는 상단에서 로드, JS는 defer 또는 async 적용
<script src="script.js" defer></script>
사용하지 않는 CSS 제거 (PurgeCSS)

4. 데이터 최적화

⑨ 서버 응답 최적화

API 응답 시간을 줄이기 위해 gzip 압축 + JSON 최소화
GraphQL을 활용해 필요한 데이터만 요청

⑩ 클라이언트 상태 관리 최적화

React Query, SWR을 사용해 데이터 페칭 효율화
Context API, Redux 사용 시 불필요한 리렌더링 방지
추가적으로 확인할 것

✔ Lighthouse & PageSpeed Insights로 점수 체크
✔ Web Vitals (LCP, FID, CLS) 모니터링
✔ SSR(Server-Side Rendering) 또는 SSG(Static Site Generation) 고려