requestIdleCallback으로 LCP 개선

requestIdleCallback

브라우저의 유휴시간(idle)에 콜백을 실행할 수 있는 웹 API이다.
브라우저가 주요 메인스레드의 작업을 끝낸 후 남은 시간에 우선순위가 낮은 작업을 실행 할 수 있다.

requestIdleCallback은 이벤트루프의 모든큐(태스크 큐,마이크로태스크 큐) 동작이 끝나고 렌더링, requestAnimationFrame 콜백까지 모두 처리 후 유휴시간에 유휴 콜백큐에 등록된 콜백함수가 실행된다.

requestIdleCallback의 실전 활용

나는 이 함수를 통계 수집 API 요청시 사용했다.
tanstack query를 사용중이라 일반적으로 useQuery를 사용해 api를 요청했었는데 페이지 진입시 불러오는 데이터 요청 API 보다 통계 수집 API가 먼저 요청되거나 중간에 요청됬었다.
통계수집 같은 경우 사용자 경험에 영향을 미치는 부분이 아니고 백그라운드에서 요청되기를 바랬기 때문에 requestIdleCallback을 사용해서 요청하기에 최적화 된다고 생각했다

 

  useEffect(() => {
    if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
      const idleCallbackId = requestIdleCallback(
        () => {
          trackAnalytics(pathname);
        },
        { timeout: 3000 }, // 최대 3초까지 대기
      );

      return () => {
        if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
          cancelIdleCallback(idleCallbackId);
        }
      };
    }
    // requestIdleCallback 미지원 브라우저
    else {
      const timeoutId = setTimeout(() => {
        trackAnalytics(pathname);
      }, 3000);

      return () => clearTimeout(timeoutId);
    }
  }, []);

 

🔵 timeOut

timeOut을 걸면 설정한 시간내에 브라우저가 유휴상태에 진입하지 않았을 경우 강제실행 된다. 
만약 설정하지 않을 경우 브라우저가 유휴 상태가 될때까지 콜백은 실행되지 않는다. 보통 분석 요청 같은 경우 2~5초가 적당한 타임인거같다.

🔵 호환성 이슈

requestIdleCallback mdn

대부분의 브라우저의 경우 지원하지만 Safari(ios)는 지원되지 않는다.
폴리필을 설정하거나 setTimeout으로 대체 할 수 있다. 나같은 경우에도 setTimeout으로 사용했다.
단순 분석용이고 이 외에는 requestIdleCallback을 사용하진 않기때문에 폴리필까지 사용하기엔 복잡성이 커질거 같았다.

 

 

LCP(Largest Contentful Paint) 개선

requestIdleCallback 사용 전

 

requestIdleCallback 사용 후

LCP는 페이지가 처음으로 로드되는 시점으로 뷰포트내에 있는 가장 큰 이미지나 텍스트 블록이 렌더링 되는 시간이다.

requestIdleCallback을 사용 후 0.35 -> 0.16으로 54% LCP가 개선됬다. 
브라우저가 유휴상태일때 trackAnalytics함수를 실행 함으로써 페이지 로딩 초기에 중요한 렌더링(이미지, 폰트 등)의 우선순위가 더 올라가 작업을 처리하게 되고 한가할때 trackAnalytics함수를 실행함으로써 LCP 요소에 리소스를 더 많이 할당 할 수 있어 효율적으로 처리가 된다.
무거운 계산처리나 LazyLoading을 이 메서드를 활용해 성능을 크게 향상 시킬 수 있다