오늘은 INP는 무엇인지 그리고 어떻게 React 환경에서 최적화 할 수 있는지에 대해 알아보자!
INP(Interaction to Next Paint)란?
: 웹사이트에서 사용자의 클릭, 탭, 키 입력 등(사용자 인터렉션)이 발생한 후에 다음 화면이 렌더링 될 때까지 걸리는 시간을 측정하는 웹 성능 지표를 의미한다.
(사용자의 인터렉션이 화면에 반영되는 속도를 나태는 지표)
프론트엔드 개발을 하면서 사용자의 인터랙션이 화면에 반영되는 속도를 빠르게 하기 위해(사용자 경험과 연관이 있기에..!) 여러 가지 방법들을 고려하게 되는 것 같다.
반영 속도를 줄이기 위해 INP 이 지표를 사용해 테스트를 해볼 수 있을 거 같은데.. 더 알아보자
이 INP는 구글의 Web Vitals에서 FID(First Input Delay)의 대표 지표로 제안 되었다.
(INP가 기존의 FID보다 더 정확히 웹사이트의 반응 속도를 측정할 수 있어 FID를 대체할 지표로 제안되었다는 뜻임!)
INP와 FID 모두 반영 속도를 나타내는 지표지만,
FID는 페이지의 첫 번째 입력 지연 시간만 측정하고 INP는 전체적인 인터랙션 응답성을 평가한다고 한다!
(INP는 페이지의 첫 번째 입력 지연 시간부터 브라우저가 다음 프레임으로 페인트 되기 전까지의 모든 인터랙션들의 지연 시간을 관찰하여 평가하는 것)
좋은 INP는 어떤 것일까?
좋은 반응성 또는 응답성을 갖춘 사용자 경험을 제공하기 위해서는 실제 환경에서 기록된 페이지 로드 시간 중 75 퍼센타일 즉, 상위 25프로로 측정되는 것이 기준이 된다.
위에 참고된 사진을 보면 INP가
200ms거나 그 아래는 GOOD -> 좋은 반응성을 의미
200ms 이상이고 500ms 이하는 NEEDS IMPROVEMENT -> 조금 더 개선이 필요
500ms 이상이면 POOR -> 좋지 않은 반응성(느림)을 의미한다.
그러니까 좋은 사용자 경험을 제공하기 위해서는 200ms 이하로 INP를 유지하는 것이 좋겠쥬?
INP의 평가된 값이 없을 때가 있는데, 그 이유는 아래와 같다!
(1) 페이지가 로드 됐지만 사용자의 아무런 인터렉션이 없을 때
(사용자가 클릭, 탭, 또는 키보드 입력 등을 아무것도 하지 않았을 때)
(2) 페이지가 로드 되고, 사용자가 스크롤을 하거나 호버(hover)를 하는 등 제스처를 이용해 인터렉션을 해서 시간이 지연 시간이 측정 되지 않았을 때
그럼 내가 자주 쓰는 React의 환경에서 INP를 최적화하는 방법 중 간단하게 두 가지만 알아보자
1. 메인 스레드 작업 최적화
: 기본적으로 메인 스레드에서 실행이 되는 리액트는 무거운 작업이 메인 스레드를 차지하면 UI 업데이트를 지연하게 된다.
그래서 이 메인 스레드 작업을 어떻게 최적화 할 수 있냐면!
(1) useMemo나 useCallback 등을 활용한 불필요한 렌더링 방지
(2) 비동기 데이터 로딩은 Lazy/Suspense나 React Query로 처리
2. 렌더링 최적화
: 리액트에서 변경 사항을 감지하는 과정이 오래 걸리면 INP 값이 증가하는 것을 막기
(1) React.memo로 불필요한 리렌더링 방지
(2) Virtualized List (react-window, react-virtualized) 활용
여기서 Virtualized List란?
: 리스트나 그리드처럼 많은 양의 데이터를 화면에 표시할 때의 성능을 최적화하는 기술
많은 데이터가 있을 때 한꺼번에 모든 데이터를 렌더링하면 페이지가 느려지고 메모리 사용량이 커지기 때문에, 이 Virtualized List는 현재 화면에 보여지는 아이템만 렌더링하고 스크롤할 때 보이는 항목만 추가로 렌더링해서 성능을 최적화해준다고 함!
(렌더링 성능과 메모리 사용량 최적화 그리고 스크롤 성능 개선까지..!)
전에 진행했던 안심식당 프로젝트에서 많은 식당들을 한꺼번에 보여줘 페이지 로드 시간이 굉장히 긴 문제를 마주친 적이 있었는데, intersection observer를 사용해 화면에 보일 때만 로드를 한 적이 있었다.
그 때 이 Virtualized List의 라이브러리인 react-window나 react-virtualized를 이용하면 조금 더 간단하게 처리 할 수 있었을 듯 싶다!
이 방법들을 적용하는동안 브라우저에서 React Profiler를 활용해 성능 문제를 분석하고 최적화가 필요한 컴포넌트들을 찾아 수정하면 좋을 듯 하다!
이 외에도
이벤트 핸들러 최적화(불필요한 상태 업데이트 최소화, 비동기 작업 실행 우선순위 조절)
CSS와 애니메이션 최적화(레이아웃 변경 최소화, CSS 애니메이션 대신 requestAnimationFrame 활용)
네트워크 성능 최적화(WebP를 사용하는 등 이미지 최적화, 불필요한 리소스 제거)
이러한 최적화 방법들이 존재한다!
이러한 방법들은 프론트엔드 개발자로서 계속해서 중요하게 생각해오던 최적화 기법이었다.
최적화를 하고 직접 웹페이지에서 지연 시간을 확인하는 등 실질적인 지표를 확인해 본 적이 없는데, INP로 직접 확인할 수 있는 것을 배웠다!
(이번에는 꼭 잘 확인하면서 할게요오..)
결론적으로, INP의 최적화를 위해서 최대한 빠르게 화면을 업데이트할 수 있도록 리소를 효율적으로 관리하는 것이 핵심이라고 말할 수 있겠다!
참고 문서:
Interation to Next Paint(INP)
What are the Key Differences Between INP vs FID: Google Core Web Vital Metrics
Virtualized List
