피드로 돌아가기
Dev.toFrontend
원문 읽기
INP 480ms에서 170ms로 단축시킨 메인 스레드 Yield 설계
I Spent Six Months Chasing Core Web Vitals. Here’s What Actually Moved the Needle.
AI 요약
Context
Lighthouse 시뮬레이션 점수와 실제 CrUX 필드 데이터 간의 괴리로 인한 사용자 경험 저하 발생. 특히 필터 인터랙션 시 과도한 React Re-render와 동기적 작업으로 인한 Main Thread 차단이 INP 성능 악화의 핵심 원인으로 작용.
Technical Solution
scheduler.yield()도입을 통한 인터랙션 로직의 분절 및 브라우저 렌더링 기회 강제 부여- 시각적 피드백을 우선 처리하고 무거운 필터링 연산을 후순위로 배치하는 비동기 렌더링 파이프라인 설계
useDeferredValue를 활용하여 입력 반응성과 리스트 업데이트 렌더링의 우선순위를 분리- 메인 스레드 점유율이 높은 Third-party 분석 스크립트의 JSON 직렬화 작업을 Web Worker로 오프로딩
- LCP 최적화를 위해 특정 Hero Image에 대한
preload설정 및fetchpriority="high"속성 부여 - 구글 임계값의 80% 수준에서 사전 알림을 설정하는 모니터링 체계 구축
실천 포인트
- CrUX 데이터를 통해 실제 사용자 환경의 p75 지표 확인 - Chrome DevTools Performance 패널에서 50ms 이상의 Long Task 식별 - 무거운 연산 로직에 `scheduler.yield()` 또는 `setTimeout(0)` 적용 검토 - LCP 요소 식별 후 `link rel="preload"` 및 `fetchpriority` 최적화 수행