[Nextjs] 밀림현상 최적화 CLS(feat. dynamic import, Image component, getStaticProps, SSG revalidate)

적용 전 

전

CLS 및 이미지 최적화 전 왼쪽화면을 보면 아래 컴포넌트 이미지가 먼저 뜨고난후 위의 배너 컴포넌트 그후 동영상 썸네일 파트가 차례로 뜨는걸 볼수있다. 이는 CLS(Cumulative Layout Shift)로 예측적이지 않은 밀림 현상을 나타낸다.

 

이를 통해 느려보일뿐 아니라 잘못된 클릭 가능성, 유저경험상 일정하지않고 혼란스러운 경험을 줄수있는 단점이있다.

이와같은 원인은 Nextjs를 쓰면서 static 페이지를 미리 만들면서도 dynamic import를 사용함으로써 화면로드는 빠르게 하기위한 장점은 있었지만 메인 홈 이다보니 첫진입에 있어서 dynamic import 이점이 위의 단점을 상쇄하지못하고 현 서비스에는 오히려 독이라고 판단되었다. 

 

적용 후

이를 개선하기위해 static 페이지(SSG)는 유지하되 dynamic import 를 없애고 썸네일, 배너에 사용하는 Nextjs의 Image 컴포넌트를 사용함으로써 파일크기 최적화 및 priority를 통해 우선순위로 빠르게 불러오도록 하였다. 또한 min-height을 설정함으로써 이미지가 들어가는 배치를 일정하게하여 CLS를 크게 줄였다.

 

dynamic import 제거 일부 예시

추가 작업 revalidate

최상단 배너 부분의 이미지와 url은 마케팅 부분으로 활용하고 많은 이벤트들이 적용되야하는데 static 페이지(SSG)의 경우 정적이기에 관리자페이지에서 이미지를 변경해도 다이나믹하게 바뀌지않고 build시에 생성된 이미지만 보이게된다. 이때 주기를 1시간의 revalidate을 주었지만 이마저도 마케터가 활용하기에는 시간적 제약이 커서 실사이트 10분의 텀과 개발사이트의 5분 텀을 두고 재생상되도록ISR(Increment Static Regeneration)를 적용하였다. 

 

이를통해 짧은 시간안에 마케터가 테스트를 할수있는 이점을 살렸다.