구글은 검색 엔진 순위 산정 시 웹사이트의 사용자 경험(UX)을 정량 평가하는 Core Web Vitals(주요 웹 지표)를 적용하고 있습니다. 특히 기존 FID(First Input Delay)를 대체하여 정식 지표가 된 INP(Interaction to Next Paint)와 LCP(Largest Contentful Paint)는 페이지의 체감 속도와 상호작용 반응성을 좌우하는 절대적인 요소입니다.
본 아키텍처 가이드에서는 메인 스레드 블로킹(Main Thread Blocking)을 최소화하여 INP를 200ms 미만(목표 < 50ms)으로 단축하고, LCP를 2.5초 미만(목표 < 1.2초)으로 렌더링하는 모던 프론트엔드 최적화 기법을 기술합니다.
1. INP (Interaction to Next Paint) 심층 분석 및 최적화
INP는 사용자가 클릭, 탭, 키보드 누름 등의 상호작용을 시작한 순간부터 브라우저가 화면의 다음 프레임(Next Paint)을 실제로 그려낼 때까지 걸리는 전반적인 지연 시간을 측정합니다.
▶ ⏱️ INP 지연의 3가지 구성 요소
1. Input Delay (입력 지연): 이벤트가 발생했으나 메인 스레드가 이전 Long Task(50ms 이상의 작업) 처리로 바빠 이벤트 리스너 실행을 시작하지 못하는 시간. 2. Processing Time (처리 시간): 이벤트 리스너 콜백 코드가 실행되는 시간. 3. Presentation Delay (제시 지연): 이벤트 처리 후 브라우저가 렌더 툴바 재계산, 레이아웃, 페인팅을 완료할 때까지 걸리는 시간.▶ 💡 INP 최적화 코드 패턴: `requestAnimationFrame` & `yieldToMain`
긴 자바스크립트 연산을 수행해야 할 때는 메인 스레드에 제어권을 양보(Yield)하는 패턴을 적용해야 합니다.javascript
// 메인 스레드에 제어권을 양보하는 yieldToMain 헬퍼 함수
function yieldToMain() {
if ('scheduler' in window && 'yield' in scheduler) {
return scheduler.yield();
}
return new Promise((resolve) => {
setTimeout(resolve, 0);
});
}// 대규모 데이터 리스트 렌더링 시 분할 처리
async function processLargeDataList(items) {
for (let i = 0; i < items.length; i++) {
processItem(items[i]);
// 50개 항목 처리마다 메인 스레드가 프레임을 그리도록 양보
if (i % 50 === 0) {
await yieldToMain();
}
}
}
2. LCP (Largest Contentful Paint) 99점 달성 아키텍처
LCP는 뷰포트 내에서 가장 큰 시각적 요소(히어로 이미지, 거대 텍스트 블록)가 완전히 렌더링되는 시점을 의미합니다.