Skeleton UI 로 Layout Shift 관리하기

LightHouse에서는 CLS (Cumlative Layout Shift)라고 Layout Shift 가 얼마나 일어나는지에 대한 점수를 매겨준다.

이때 Layout Shift란  컴퍼넌트나 이미지등이 화면에 그려질 때, 각각의 컴퍼넌트마다 그려지는 속도가 다르다.

(연산작업이 많거나 이미지를 그리는 경우 등등)

이때 위쪽에 있는 DOM요소가 높이를 차기하기 전에 아래쪽에 있는 먼저 로드가 되면 추후에 위쪽에 있는 컴 DOM요소가 가 로드가  완료되면서, 아래쪽에 있는 컴퍼넌트들이 아래로 밀려난다.

 

이 경우에 사용자는 버튼등을 클릭하려하는데, 갑자기 위치가 바뀌는 불편함을 겪게 되고, 이를 LightHouse에서는 CLS라는 점수로 측정해준다.

 

 

이를 해결하기 위한 대표적인 방법이 Skeleton UI로  관련 컴퍼넌트와 유사한 UI를 뼈대만 잡고, 해당 컴퍼넌트가 로드가 완료되면 교체하는 방식을 사용한다.

 

이를 리엑트의 Suspense를 사용하여 구현할 수 있는데, 로딩 중일 때는 Compound Component인 ListRow.Skeleton을 보여주고, 로딩이 완료가 되면 CardList를 랜더링하고 있습니다. 

 

<Suspense
        fallback={[...new Array(10)].map((_, idx) => (
          <ListRow.Skeleton key={idx} />
        ))}
      >
        <CardList />
      </Suspense>

이떄 현재 페이지는 무한스크롤을 통해 최초 10개만 보여주고 있기 때문에 fallback에서  Skeleton이미지를 10개 렌더링 하고 있습니다.