Lazy Loading

Lazy loading은 Suspense

const WhatDoWeProvideSection = React.lazy(() => import('./WhatDoWeProvideSection'));

function MainPage() {
  return (
    <React.Suspense fallback={<div style={{ height: '400px' }} />}>
      <WhatDoWeProvideSection />
    </React.Suspense>
  );
}

Intersection Observer

react-intersection-observer 라이브러리

온보딩페이지의 맨 위 영역은 바로 보여주되, 그렇지 않은 경우는 공용으로 사용되는 Skeleton 컴포넌트를 대신 보여준다.

변경 전

FCP : 1.8s
LCP : 3.3s
TBT : 2,220ms
Speed Index : 10.6s

변경 후

FCP : 1.3s
LCP : 1.7s
TBT : 1,040 ms
Speed Index : 3.3s

정리

• FCP : 1.8s → 1.3s ( 27.8% ↓)
• LCP : 3.3s → 1.7s ( 48.5% ↓)
• TBT : 2,220ms → 1,040 ( 53.2% ↓)
• Speed Index : 10.6s → 3.3s ( 68.9% ↓)

개선률(%)은 위와같다.

각 요소의 역할

참고 자료

• tren:be 기술 블로그-FE Lazy Loading 적용기
• Intersection Observer와 Lazy Loading을 활용한 효율적인 이미지 로딩