웹 프론트엔드 성능 지표: RAIL, Core Web Vitals

서론

 웹 프론트엔드가 발전함에 따라 성능을 측정하고 기준 또한 정교해지고 있다. 2015년 구글 Chrome 팀은 사용자 중심의 성능 모델인 RAIL을 발표하며 성능의 목표치를 인간의 인지 능력에 기반하여 제안하였다. 이후 2020년 5월, 구글은 웹사이트의 사용자 경험(UX)을 정량적으로 측정하기 위한 가이드라인인 Web Vitals를 발표하였고, 그중 핵심이 되는 지표를 Core Web Vitals로 정의하여 검색 순위에 반영하기 시작했다. 본 글에서는 RAIL 모델의 개념과 현대의 Core Web Vitals(LCP, INP, CLS) 지표에 대해 얘기해보고자 한다.

RAIL 모델

 RAIL 모델은 사용자가 성능을 인지하는 방식을 기반으로 Response(응답), Animation(애니메이션), Idle(유휴 시간), Load(로드)의 네 가지 영역에 대한 임계값을 제시한다.

• Response (100ms): 사용자의 입력(Tap, Click) 후 100ms 이내에 시각적 피드백이 제공되어야 한다. 이는 인과관계를 즉각적으로 인지할 수 있는 한계 시간이다.
• Animation (16ms): 부드러운 렌더링을 위해 초당 60프레임을 유지해야 하며, 브라우저의 프레임 처리를 고려할 때 한 프레임당 약 10ms 내지 16ms의 예산이 주어진다.
• Idle (50ms): 메인 스레드에서 실행되는 자바스크립트 작업 청크(Chunk)를 50ms 이내로 제한하여, 사용자 입력 발생 시 즉각적으로 메인 스레드를 제어할 수 있는 유휴 시간을 확보한다.
• Load (1000ms): RAIL에서 제시하는 1초의 Load 타임라인은 단순히 네트워크 리소스 다운로드가 완료되는 시점이 아니다. 이는 크리티컬 렌더링 패스(Critical Rendering Path)가 완료되어 사용자가 화면의 핵심 콘텐츠를 인지하고, 메인 스레드가 안정화되어 실제 상호작용(Interactive)이 가능한 상태에 도달하는 것을 의미한다. 즉, 단순한 로딩이 아닌 TTI(Time to Interactive)에 가까운 개념이다.

Core Web Vitals : 성능 지표의 세분화

 Core Web Vitals는 RAIL 모델이 제시한 목표를 실제 브라우저 환경(Field Data)에서 측정 가능한 형태로 구체화한 지표들이다. 2024년 기준, 구글은 LCP, INP, CLS를 핵심 지표로 삼고 있다.

• LCP (Largest Contentful Paint): 로딩 성능의 척도. 뷰포트 내에서 가장 큰 이미지나 텍스트 블록이 렌더링되는 시점을 측정한다. 페이지 진입 후 2.5초 이내를 우수한(Good) 상태로 판단한다. 과거 FCP(First Contentful Paint)가 로딩의 시작점을 측정했다면, LCP는 사용자가 로딩이 완료되었다고 체감하는 시점이다.
• INP (Interaction to Next Paint): 응답성의 척도. 사용자가 페이지 머무르는 동안 발생한 모든 클릭, 탭, 키보드 입력에 대해, 입력 시작부터 다음 프레임이 페인팅(Paint) 될 때까지의 지연 시간을 측정한다. 200ms 이내를 권장한다. 이는 기존 FID(First Input Delay)가 입력 지연(Input Delay)만을 측정했던 한계를 넘어, 이벤트 핸들러 실행 시간과 렌더링 지연 시간까지 포함한 지표다.
• CLS (Cumulative Layout Shift): 시각적 안정성의 척도. 페이지 로딩 중 이미지나 광고 등으로 인해 레이아웃이 예상치 못하게 변경되는 정도를 수치화한다. 0.1 이하의 점수를 유지해야 한다. 이는 RAIL 모델 발표 당시에는 명시되지 않았던 사용자 불쾌감 요소를 정량화한 것이다.