pile·
프론트엔드·vercel-blogVercel Blog·

React 18과 Suspense로 INP 개선하기

Core Web Vitals의 새 핵심 지표인 INP(Interaction to Next Paint)는 페이지 전체 세션 동안의 사용자 인터랙션 반응성을 측정한다. 기존 FID(First Input Delay)가 첫 번째 입력만 측정했던 것과 달리, INP는 모든 사용자 입력의 최대 latency를 추적하며 2024년 3월 FID를 대체하는 세 번째 Core Web Vital이 됐다. React 18의 Suspense를 활용한 선택적 hydration(selective hydration)이 INP 개선에 강력한 도구가 되며, 실제 nextjs.org에 적용해 TBT(Total Blocking Time)를 430ms에서 80ms로 줄이고 INP 48ms를 달성했다.

핵심 포인트
  • INP ≤ 200ms가 "양호" 기준. FID와 달리 전체 세션의 모든 인터랙션 최대 latency를 측정
  • React 17 이하: 전체 페이지 JS 로드 전까지 hydration 불가 → 페이지 비활성 상태 유지
  • React 18 + Suspense: hydration이 메인 스레드에서 분리되어 Suspense 경계 내 컴포넌트 독립적 hydration 가능
  • nextjs.org 적용 결과: TBT **430ms → 80ms**, FID **5ms**, INP **48ms** 달성
  • CSS 애니메이션은 컴포지터 스레드에서 실행되므로 메인 스레드 차단 없이 INP에 영향 없음
  • 스크롤 기반 이벤트 throttle/debounce, DOM 크기 축소, 웹 워커로 추가 최적화 가능
상세 정리
  • **INP 측정 원리**: 첫 이벤트 발생부터 브라우저가 시각적 업데이트를 표시할 수 있을 때까지의 시간. JS는 단일 스레드이므로 큰 스크립트 로딩 중엔 사용자 입력에 반응 불가
  • **FID vs INP 핵심 차이**: FID는 첫 번째 입력 + 응답 시작 지연만 측정. INP는 전체 세션의 모든 입력 + 이벤트 완료까지의 시간을 측정하고, 같은 논리적 인터랙션의 이벤트 그룹 중 최대값을 사용
  • **선택적 hydration 원리**: React 18 Concurrent Mode는 렌더링을 인터럽트 가능하게 만들어, 더 높은 우선순위 인터랙션 발생 시 hydration을 중단하고 해당 인터랙션 먼저 처리
  • **Suspense 적용 패턴**: `<Suspense fallback={<Loading />}>` 으로 주요 영역을 감싸면 해당 컴포넌트를 독립적으로 hydrate 가능. fallback 생략 시 subtree 내 컴포넌트 suspend 시 빈 화면 위험
  • **nextjs.org 실제 적용**: Header는 Suspense 바깥에 두고, Features/Customers/Learn/Newsletter/Footer를 단일 Suspense로 묶어 독립적 hydration 처리
  • **CSS 애니메이션 활용**: 컴포지터 스레드에서 처리되므로 메인 스레드 차단 없음. transform 같은 속성은 GPU 가속 가능, JS 애니메이션 대비 INP 영향 최소
  • **이벤트 최적화**: 스크롤 이벤트 등 반복 호출되는 이벤트를 throttle/debounce 처리
  • **DOM 크기 축소**: DOM 요소 증가 시 브라우저 재계산 요소 증가. JSX 내 인라인 SVG는 번들 크기 증가 + 메인 스레드 차단 야기 — `<img>` 태그 또는 Server Components로 이동 고려
  • **추가 기법**: 웹 워커로 JS를 별도 스레드에서 실행해 메인 스레드 확보, Next.js 이미지/폰트/스크립트 자동 lazy loading 활용
왜 읽나React 18의 선택적 hydration이 Core Web Vitals에 미치는 실질적 영향을 구체적 수치(TBT 430→80ms, INP 48ms)와 코드 예시로 확인할 수 있어, INP 전환에 즉시 대응 가능한 기술 기반을 제공한다.
vercel-blog
Vercel Blog 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)
·takedown 요청

이 글과 비슷한

  3. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2