[트러블슈팅] Layout Shift 해결하기

온라인 전시회를 무탈하게 운영하고 (운영하는 동안 큰 이슈가 없었고 사용자 피드백을 받으며 계속 개선해나아갔다!) 링크드인에도 글을 올리며 운영 경험을 포함해 웹사이트를 홍보했습니다.

 

프로그래머스 데브코스를 하면서 만난 훌륭한 멘토님이 계시는데, 여쭤볼 것이 있어서 이것저것 여쭤보다가 멘토님도 링크드인 게시글을 확인했다며 개선 사항들을 추천해주셨습니다. 그 중 하나가 Layout Shift!!

---

Layout Shift로 인한 문제점

링크드인으로부터 처음으로 웹사이트를 접속하는 사용자(특히 데스크탑 사용자)들은 웹성능이 캐시된 데이터를 사용자는 사용자보다 좋지 않았습니다. 따라서 데스크탑 첫 화면에 로딩되는 비디오가 느리게 로딩되었고, 이로 인해 로고 이미지가 위로 올라오는 Layout Shift 문제가 발생하게 되었습니다..

Layout Shift가 일어난 화면(왼쪽)과 정상화면(오른쪽)

CLS 점수

위 사진에서 볼 수 있듯이 비디오가 로딩될 때까지 Layout Shift가 일어났고, 비디오가 정상적으로 로딩되어 화면에 그려지게 되면 로고 이미지가 아래로 내려오게 됩니다. 육안으로도 확 띄는 문제였기 때문에 개선이 필요하다고 생각했습니다.

 

또한 CLS 점수도 0.224였는데요, 좋은 사용자 경험을 위해 0.1점 아래로 유지해야 합니다.

CLS란?
Cumulative Layout Shift로 페이지의 전체 생명 주기 동안 발생하는 모든 예상치 못한 레이아웃 변경에 대한
최대 레이아웃 변경 점수입니다. 

'예상치 못한'이라고 했는데 사용자의 상호작용으로 일어나는 Layout Shift는 '예상할 수 있기' 때문에 CLS 계산에서 제외됩니다.

---

해결 방법

1️⃣ 비디오 사이즈 고정

기존 코드에서는 비디오 사이즈를 고정하지 않았습니다. 사이즈를 고정하지 않으면 브라우저는 HTML 요소가 로딩 될 때마다 크기를 계산해야 합니다. 따라서 비디오가 로딩된 이후에 크기를 계산하게되어 reflow가 일어날 수 있으며 이는 성능에도 영향을 미칠 수 있습니다.

 

그래서 저는 비디오의 사이즈를 명시적으로 지정해주었고, CLS 점수를 0.223점에서 0.031점으로 개선할 수 있었습니다.

className={"sm:hidden w-full h-auto"}

2️⃣ 프리로딩

비디오를 미리 로딩해놓으면 비디오를 미리 캐시할 수 있게되어 사용자에게 빠르게 제공할 수 있습니다. 비디오 태그에서는 프리로딩을 하는 두 가지 방법이 있는데, 저는 둘 다 수행해보고 CLS 점수를 비교했습니다.

1. 비디오 태그에 preload 속성을 추가하여 페이지 로드시 프리로딩하기

<video preload="auto" src="비디오 src" ></video>

이미지 태그의 경우 preload 속성을 제공하지 않으니 2번으로 진행하시기 바랍니다.

 

결과 : 비디오 사이즈 고정 이후 프리로딩을 수행한 결과 CLS 0.031점으로 더 개선되지 않았습니다.

2. 자바스크립트 엔진이 index.html을 파싱할 때 비디오 파일 프리로딩하기

<link
  rel="preload"
  href="src"
  as="image"
/>

 

결과 : 1번과 동일하게 수행한 결과 0.031점에서 0점으로 CLS가 개선되었습니다.

---

간단하게 Layout Shift 문제를 개선한 내용을 정리해봤는데요, 도움이 되었으면 좋겠습니다! 감사합니다 :)