(네.. 지금 진행하고 있는 프로젝트의 성능입니다 좀 많이 처참하네요\\ 부끄럽기도 하구요. 그래서 이번 주는 성능을 개선하는 작업을 목표로 하고자 합니다.
성능을 평가하는 지표가 어떤건지, 어떻게 개선해나갈지 차근차근 알아보고 실제로 적용해보도록 하겠습니다.)
성능 최적화란 웹 페이지를 빠르고 효율적으로 동작하게 하는 작업이다. 이는 사용자에게 더 나은 사용자 경험을 줄 수 있다. 만약 페이지의 로딩 속도가 느리고 레이아웃이 이상하게 로딩된다면, 사용자는 불편함을 느끼고 페이지를 이탈할 확률이 높아질 것이다. 실제로 웹 페이지가 3초 이상 걸리면 약 53% 사용자가 이탈한다.
또한, 검색 엔진에도 영향을 준다. Google은 웹 성능을 검색 랭킹에 반영한다고 한다.
이러한 성능 최적화는 한 번으로 끝나지 않으며, 지속적인 관리가 필요하다. 성능은 시간이 지남에 따라 변할 수 있고 새로운 기능을 추가함에 따라 성능 문제는 계속해서 발생할 수 있기 때문이다.
우선 성능 최적화를 하기 전에 현재 성능을 분석해야 한다. 필자는 LightHouse 도구로 성능을 측정한다.
3가지 주요 성능 지표
코어 웹 바이탈은 3가지 주요 지표로 구성되어 있다. Google이 사용자 경험을 측정하기 위해 도입한 웹 성능 지표이다.
1. LCP (Largest Contentful Paint)
가장 큰 콘텐츠가 보이기까지 걸린 시간이다.
- 목표: 2.5초 이내
- 이미지 최적화
- 폰트 지연 줄이기
2. FID (First Input Delay)
사용자가 처음 클릭하거나 입력할 때까지 걸린 지연 시간이다.
- 목표: 100ms 이하
- JS 파일 분할 (Code Splitting)
- 타이머/이벤트 핸들러 최적화
3. CLS (Cumulative Layout Shift)
예상치 못한 UI 위치 변경
- 목표: 0.1 이하
- 이미지, 광고 등에 width/height 고정하기
- 글꼴 변경이 발생하지 않도록 font-display:swap 사용
성능 최적화는 크게 로딩 최적화와 렌더링 최적화로 나눌 수 있다. 이 두 가지는 서로 다른 관점에서 사용자 경험을 향상시키며 어떤 방법이 있는지 알아보자.
로딩 최적화
사용자가 페이지를 요청했을 때 얼마나 빠르게 초기 콘텐츠를 볼 수 있는가?
목표
- 초기 페이지 로드 속도 개선하기 -> LCP 개선하기
- 번들 사이즈 줄이기
- 서버-클라이언트 간 데이터 전송 효율적으로 하기
방법
- 코드 스플리팅
- 페이지 단위로 JS 파일로 나눠 필요한 코드만 로딩하기
- Lazy Loading
- 이미지, 컴포넌트, 데이터 등을 스크롤 시점에 비동기로 불러오기
- Preload / Prefetch
- 중요한 리소스를 미리 불러오거나 다음 페이지 리소스를 사전 로딩하기
- 서버 사이드 렌더링 (SSR)
- 초기 HTML을 서버에서 만들어주기
- 정적 사이트 생성 (SSG)
- 빌드시 미리 HTML 생성하기
- 이미지 최적화
- Webp 등 차세대 포맷 사용하기 + 이미지 사이즈 줄이기
- 리소스 캐싱 전략
렌더링 최적화
페이지가 화면에 나타난 후, 얼마나 부드럽게 동작하고 빠르게 반응하는가?
목표
- Repaint/Reflow 최소화하기
- 불필요한 리렌더링 방지하기
- 인터렉션 시, 렉 최소화하기
방법
- Virtual DOM 최적화
- React의 key 사용하기
- 컴포넌트 분리하기
- memo/ useMemo 사용하기
- 리렌더링 최소화
- useCallback/ useMemo 사용하기
- 배치 처리
- 여러 상태 업데이트를 한 번에 처리하기
- Throttle / Debounce
- 과도한 이벤트 제어하기
- IntersectionObserver 사용
- 스크롤 이벤트 대신 컴포넌트 노출 여부 감지하기
- 비동기 작업 분리
- 무거운 연산은 Web Worker로 넘기기
- CSS 애니메이션 최적화
- transform, opacity 활용하기
- Repaint 최소화
- DOM 구조 깊이 줄이기
- 애니메이션 GPU 처리하기
멋져요