개인 프로젝트 개선 기록 - CLS 개선

 

오늘은 커피챗 때 피드백 받았던 CLS 개선에 대한 내용을 정리하고자 한다.

 

CLS가 뭔지 알아보기 전 비교부터 해보자!

개선 전과 개선 후

 

첫 번째 이미지를 보면 새로고침 클릭 시 이미지 로딩 전후로 레이아웃이 변경되는 것을 확인할 수 있다.

반면 두번째 이미지는 새로고침을 클릭해도 레이아웃의 변경이 일어나지 않는다.

 

 

CLS(Cumulative Layout Shift)란?

레이아웃 변경 횟수로, 화면에서 이동하는 컨텐츠의 양과 정도를 계산한 값이다.

이 지표는 사용자 중심의 성능 지표로서 컨텐츠가 화면에서 이리저리 움직이는 것이 불편을 초래할 수 있기 때문에 제공한다.

 

✔️ TIP 

우수한 사용자 환경을 제공하기 위해선 사이트에서 페이지 방문의 75% 이상에서 CLS가 0.1 이하여야 한다.

 

 

솔직히 CLS에 대한 설명을 처음 봤을 땐 이게 그렇게 중요한가..?라고 생각했는데 아래의 예시 자료를 본 후 바로 납득했다.😲

 

 

약간 극단적인 예시이긴 하지만 실제로 있을 수 있는 일이고,

나 또한 비슷한 경험을 했던 적이 있었기에 CLS의 중요성에 대해 이해할 수 있었다.

 

⚙️ CLS가 좋지 않은 일반적인 원인들

✔️ 크기가 없는 이미지

✔️ 크기가 없는 광고, 삽입, iframe

✔️ 크기가 없는 광고, 삽입, iframe과 같이 동적으로 삽입된 콘텐츠

✔️ 웹 글꼴

 

 

본격적인 성능 측정을 위해 라이트하우스를 이용해 진단을 해봤다.

 

📉 개선 전 성능 

 

 

CLS가 0.102로 나타난다.

그리고 큰 레이아웃의 변화는 피하라는 경고 문구 또한 확인할 수 있었다.

 

⚙️ 원인과 개선 방법

나의 경우는 이미지태그에 크기 속성을 지정하지 않은 게 원인이었다.

web.dev 레이아웃 변경 누적 최적화 가이드에 나온 대로 이미지에 width, height 크기 속성을 추가해서 해결했다.

이렇게 하게 되면 이미지가 로드되는 동안 브라우저가 이미지에 맞는 올바른 크기의 공간을 할당할 수 있다고 한다.

이 부분은 내가 놓친 부분인데...사실 이미지 크기는 css로 크기를 설정해 줬기 때문에 상관없을 줄 알았다.

하지만 찾아본 결과..CSS와 HTML의 이미지 태그에서 width와 height를 설정하는 건 아주 큰 차이가 있었다.

 

HTML 이미지 태그의 width, height를 지정하는 경우 

✔️ 브라우저에게 이미지의 원래 크기를 알려주는 역할

✔️ 브라우저는 이 정보를 통해 이미지가 로딩되기 전에 이미지가 차지할 공간을 미리 확보할 수 있다.

 

CSS에서 width와 height를 지정하는 경우

✔️ 이미지의 실제 표시 크기를 조절하는 역할을 한다. 

 

너무 기초적인 내용인데 크게 착각하고 있음을 깨달았다..!

(조금 많이 창피하지만) 이제라도 제대로 알아서 다행..😨

 

개선 작업을 진행한 후 라이트 하우스를 통해 성능 측정을 다시 한번 시도해 봤다.

 

📈 개선 후 성능

 

CLS가 0.102에서  0.001로 개선되었음을 확인할 수 있었다!!
또 기존에 빨간색으로 표시되던 Avoid large layout shift 문구 또한 사라졌다!

 

 

느낀 점

모 침대 회사의 흔들리지 않는 편안함이라는 홍보 문구처럼..

프론트엔드 개발자 역시 사용자에게 흔들리지 않는 편안한 레이아웃을 제공하는 것이 중요하다고 느꼈다.

 

'이 문제가 더 큰 문제는 개발 중인 사이트와 사용자가 경험하는 방식이 크게 다른 경우가 많기 때문입니다. 맞춤설정 콘텐츠 또는 서드 파티 콘텐츠는 개발 단계에서 프로덕션 단계에서처럼 동작하지 않는 경우가 많고, 테스트 이미지가 이미 개발자의 브라우저 캐시에 있는 경우가 많으며, 로컬에서 실행되는 API 호출은 너무 빨라서 지연을 눈에 띄지 않는 경우가 많습니다.'

 

web.dev에 나와있는 저 설명대로 개발 환경과 실제 운영 환경의 차이로 인해 놓치기 쉬운 부분이라고 생각했다.

놓치기 쉽지만 사용자는 불편함을 느낄 수 있으니 더욱더 신경 써야겠다고 느낌!!! 꼼꼼하게 확인하자! 🧐

 

---

Reference

 

https://web.dev/articles/cls?hl=ko

Cumulative Layout Shift (CLS)  |  Articles  |  web.dev

https://web.dev/articles/optimize-cls?hl=ko

레이아웃 변경 누적 최적화  |  Articles  |  web.dev