Core Web Vitals 최적화: Offscreen

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 웹 성능 최적화 담당자

난이도: 중급 (React 및 웹 성능 기초 지식 필요)

핵심 요약

• setTimeout을 사용해 의 src 업데이트를 지연시켜 사용자 상호작용 우선순위 유지
• startTransition으로 상호작용 차단 방지 및 비동기 상태 업데이트 처리
• memo를 통해 불필요한 리렌더링 방지 및 성능 향상
• React.useEffect와 useTransition의 조합으로 자원 로딩 우선순위 최적화

섹션별 세부 요약

1.

• setTimeout을 사용해 iframe의 src 상태 업데이트를 100ms 지연
• src 값이 이미 목표 URL과 동일할 경우 useEffect 조기 종료
• startTransition으로 상태 업데이트를 비동기 처리하여 사용자 상호작용 방해 방지

2. 성능 최적화 기술 적용

• React.memo를 통해 LazyIframe 컴포넌트의 불필요한 리렌더링 방지
• useTransition과 setTimeout 조합으로 자원 로딩 우선순위 조정
• useEffect의 정리 함수로 clearTimeout을 통해 리소스 누수 방지

3. 코드 구조 및 핵심 API

• useState로 iframe src 상태 관리
• useEffect로 타이머 및 상태 업데이트 로직 구현
• startTransition을 통해 비동기 상태 변경 처리
• memo로 컴포넌트 재렌더링 최소화

결론

• 사용자 상호작용 우선순위 유지 및 자원 로딩 최적화를 위해 setTimeout + startTransition + memo 조합 사용
• Core Web Vitals(FCP, LCP) 개선을 위한 비동기 처리 전략과 리렌더링 최소화가 핵심
• React.useTransition은 상태 업데이트 동기화를 위한 핵심 API로, 성능 최적화 시 반드시 고려해야 함