프론트엔드 성능 최적화

최적화의 첫걸음은 ‘무엇을 좋게 만들 것인가’를 숫자로 정하는 일이다. 구글의 Core Web Vitals는 사용자 체감 성능을 세 지표로 요약한다. 추측 대신 이 값을 먼저 잰다.

React에서 INP·버벅임의 흔한 원인은 ‘바뀌지 않아도 될 컴포넌트가 다시 그려지는’ 것이다. 리렌더 자체가 죄는 아니지만, 비싼 트리가 자주 리렌더되면 문제가 된다. 먼저 원인을 찾고, 그다음 메모이제이션을 쓴다.

// 문제: 부모가 리렌더될 때마다 새 객체/함수가 생겨 자식도 리렌더
function Parent() {
  const [count, setCount] = useState(0)
  const style = { color: 'red' }              // 매번 새 참조
  return <Child style={style} onClick={() => {}} />  // 매번 새 함수
}

// 처방: 참조를 안정화하고, 자식을 memo로 감싼다
const style = { color: 'red' }                 // 컴포넌트 밖으로
const Child = React.memo(function Child(props) { /* ... */ })
const onClick = useCallback(() => { /* ... */ }, [])

상태의 출처를 구분하고 렌더링을 최적화하는 더 구체적인 패턴은 React 핵심 패턴 글에서 이어서 본다.

내려보내는 자바스크립트가 많을수록 다운로드·파싱·실행이 모두 느려진다. 첫 화면에 필요 없는 코드는 나눠서(코드 스플리팅) 나중에 불러오는 것이 핵심이다.

// 무거운 차트 라이브러리를 첫 로드에 포함하지 않는다
const Chart = lazy(() => import('./HeavyChart'))

function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}>
      <Chart />          {/* 이 컴포넌트가 필요할 때 비로소 청크를 받는다 */}
    </Suspense>
  )
}

• 경로 기반 분할: 라우트 단위로 청크를 나누면 방문한 페이지의 코드만 받는다. 메타프레임워크는 이를 기본 제공한다.
• 트리 셰이킹: 쓰지 않는 export는 번들에서 빠진다. 라이브러리를 통째로 import하지 말고 필요한 것만 가져온다.
• 번들 분석: 번들 애널라이저로 ‘무엇이 큰지’ 눈으로 확인하고, 무거운 의존성은 더 가벼운 대안으로 교체한다.

이미지는 보통 페이지에서 가장 무거운 자원이고, 폰트는 가장 흔한 레이아웃 이동(CLS) 원인이다. 둘 다 작은 습관으로 큰 개선을 얻는다.

코드를 줄였다면, 이제 ‘얼마나 빨리·얼마나 적게 받느냐’다. 캐싱과 사전 로딩을 활용하면 같은 자원을 반복해서 받지 않고, 필요한 것을 미리 준비할 수 있다.