📌

Skeleton & Spinner를 통해 CLS 개선하기

CSR(클라이언트 사이드 렌더링)은

서버에 동적으로 데이터를 요청하여 화면을 렌더링한다.

이 때 데이터를 가져오는 로딩 시간 동안 사용자는 멍하니 기다려야 한다.

그 동안 사용자에게 placeholder를 적절히 제공해 주어야 한다.

※ SSR(서버 사이드 렌더링)은 즉시 렌더링 가능한 HTML 문서가 있으므로,

placeholder가 항상 필요한 것은 아니다.

보통 CSR에서는 Skeleton 또는 Spinner UI를 placeholder로 사용하여

유저의 로딩 체감 시간을 줄이는 방식을 사용한다.

특히 Skeleton은 무척 효과적이다.

한 연구자료에 따르면, 유저들은 Skeleton 방식을 사용했을 때

아무것도 없을 때 보다 약 0.4~ 0.75초,

Spinner 보다 약 0.04초~ 0.16초 가량 로딩을 짧게 느낀다고 한다.

이미 <아트집> 프로젝트에서는 Spinner를 사용하고 있지만,

Skeleton UI는 적용하지 않았었다. 이번에 Skeleton UI를 적용함으로써

사용자의 경험을 높이는 한편, CLS 수치를 낮추고자 한다.

CLS(Cumulative Layout Shift, 누적 레이아웃 이동)은

유저가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량화한 지표로,

시각적 안정성 측면에서의 중요한 성능 지표이다.

CLS는 페이지의 전체 수명 동안 발생하는

모든 예기치 않은 레이아웃 이동 중 가장 큰 레이아웃 이동의 점수다.

CLS가 나쁘면 어떻게 될까?

텍스트가 갑작스럽게 움직여서 읽던 부분을 놓치게 되거나,

링크나 버튼을 탭하기 직전 갑작스레 링크가 움직이는 바람에

다른 것을 클릭하게 될 수도 있다.

불안정한 레이아웃이 가져올 수 있는 부정적인 결과

(마우스의 연기력이 인상적이다….)

이상적인 CLS 점수는 0.1 이하이다.

그렇다면 <아트집> 프로젝트의 CLS는 어떠할까?

CSR을 사용하는 페이지들에 대하여 lighthouse를 통해 CLS를 측정해보았다.

2. 유저 페이지