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

FID vs. INP: Core Web Vitals의 새 반응성 지표 이해와 최적화

2024년 3월부로 First Input Delay(FID)가 Core Web Vitals에서 Interaction to Next Paint(INP)로 공식 대체된다. FID는 첫 번째 사용자 입력 이후 브라우저 메인 스레드가 처리를 시작하기까지의 지연만 측정했지만, INP는 입력 지연(Input Delay) + 처리 지연(Processing Delay) + 표현 지연(Presentational Delay) 세 구간을 모두 포괄한다. 이 글은 두 지표의 핵심 차이와 INP 점수를 최적화하는 구체적인 기법을 다룬다.

핵심 포인트
  • INP = 입력 지연 + 처리 지연 + 표현 지연: 단순 이벤트 큐 대기를 넘어 인터랙션 전체 생명주기를 측정
  • FID와 달리 INP는 페이지 세션 전체 인터랙션 중 최악의 값을 최종 점수로 반환
  • Processing Delay 최적화 핵심: debounce/throttle, 코드 스플리팅, Long Task 분할
  • Presentational Delay 최적화 핵심: transform/opacity 우선 사용, Forced Synchronous Layout 회피
  • 이벤트 핸들링 최적화: passive event listener, 이벤트 위임(delegation), Web Worker 오프로드
  • 측정 도구: Vercel Speed Insights, PageSpeed Insights, Lighthouse Timespan Feature
상세 정리
  • FID는 브라우저 메인 스레드가 바쁠 때 첫 이벤트가 큐에서 대기하는 시간만 캡처
  • FID 한계 1: 첫 인터랙션 이후 모든 후속 인터랙션 지연은 측정 범위 밖
  • FID 한계 2: 이벤트 핸들러 처리 시간과 레이아웃 재계산 + 페인트 시간 미포함
  • INP 세 구간: Input Delay(이벤트 큐 대기) + Processing Delay(핸들러 실행) + Presentational Delay(레이아웃 + 페인트)
  • INP 최종 점수는 페이지 이탈 시점까지의 모든 인터랙션 중 최악의 측정값으로 결정
  • Processing Delay 최적화: 프로파일러로 병목 식별 후 debounce/throttle 적용
  • Long Task 분할: 긴 JS 작업을 작은 청크로 나눠 메인 스레드 블로킹 구간 최소화
  • 코드 스플리팅 + 트리 쉐이킹으로 불필요한 JS 제거, 필요한 시점에 필요한 코드만 로드
  • Presentational Delay - will-change: 브라우저가 애니메이션 대상 요소를 미리 준비하도록 힌트 제공
  • transform/opacity 우선 사용: 레이아웃 재계산을 유발하지 않아 Paint 비용 최소화
  • content-visibility: 뷰포트 밖 콘텐츠 렌더링을 지연해 필요한 시점에만 처리
  • Forced Synchronous Layout 회피: 레이아웃 쓰기 직후 읽기 패턴은 브라우저 동기 스타일 계산을 강제하므로 금지
  • passive event listener: scroll/touch 이벤트에 적용해 브라우저가 preventDefault 없음을 알고 지연 없이 스크롤 처리
  • 이벤트 위임(Event Delegation): 공통 부모에 리스너 하나로 개별 DOM 리스너 수 최소화
  • Web Worker: CPU 집약적 비UI 작업을 백그라운드 스레드로 오프로드해 메인 스레드 반응성 유지
  • Next.js 환경: React 18 Concurrent Features 활용 시 INP 추가 개선 가능
왜 읽나2024년 3월 Core Web Vitals 기준이 FID에서 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