브라우저 렌더링 최적화 - CLS

개요

LCP와 CLS에 용어에 대해 이해하고 브라우저 렌더링을 최적화 시키는 방법에 대해 알아보자

CLS란?

사용자 경험을 측정하는 대표지표로 개발자 도구(lighthouse)를 통해 검사 할 수 있다.
cumulative layout shift라는 의미로 페이지거 랜더링 되고 나서 새로운 DOM이 추가 되는 등에 의한 요인으로 페이지 콘텐츠가 흔들리는 경우 발생하게 된다.
이러한 문제는 사용자가 예를 들어 버튼을 누르려다가 밀리면서 다른 버튼을 누르게 되는 등 사용자 경험을 떨어뜨리기 때문에 CLS를 방지하는 것은 중요하다.

CLS 발생 요인

1. DOM이 추가 되는 경우: DOM이 추가 되면서 사용자가 다른 버튼을 누르게 되는 경우
2. FOUT, FOIT: 스타일 되지 않는 폰트가 나오다가 스타일이 뒤늦게 일어나면서 크기가 변하는 경우
3. 글꼴마다 줄간격이 달라져서 페이지 콘텐츠가 흔들리는 경우
4. 치수를 알 수 없는 이미지 로딩

foit: 폰트가 로드되기 전까지 보이지 않는 현상
fout: 폰트가 로드되고 난 후 스타일이 적용되지 않은 상태로 보이는 현상

1. DOM이 추가되는 경우
2. CLS 해결방법

• 추가되는 위치에 미리 스켈레톤영역으로 박아둔다.
• 이미지의 경우 미리 width와 height를 지정한다.

<img width="100" height="100" />

• 폰트 스타일링이 지연되어 콘텐츠 크기가 변하는 경우
• 비슷한 시스템 대체글꼴을 찾아서 크기에 영향을 미치지 않게한다.
• woff2확장자를 사용할 것, 폰트중 가장 용량이 작기 때문에 빠르게 다운로드 된다.
• css 파일 보다 더 빨리 로드되기 위해서 preload를 한다.

비슷한 시스템 대체글꼴 찾기

// 변경 전
font-family: 'Noto Sans KR', sans-serif

// 변경 후
font- family: 'Noto SansKR', Verdana, sans-serif

woff2로 변환

1. https://transfonter.org/
   해당 사이트에서 폰트 woff2로 변경

@font-face { 
    font-family: "폰트 이름"; 
    src: url("파일위치"); } 
// woff2 를 지원하지 않는 경우, 다른 확장자로 대체할 수 있게 분기하는 코드를 넣어주어야 한다. 
@font=face { 
    font-family: 폰트이름; 
        src: url('파일위치.woff2') format('woff2');
        url('파일위치.woff') format('woff'); 
        url('파일위치.ttf')format('truetype'); // ttf 확장자 
}

css보다 먼저 preload 하기
css보다 먼저 로드가 되면 css 로드 중에 폰트파일을 로드하느라 css로딩이 차단됨으로 font파일을 꼭 먼저 로드 시켜 css 로드가 차단되지 않게 한다.

<link rel="preload" href="파일위치" as="font" type="font/woff2" >

출처

인프런 성능최적화 by 유동균
견고한 UI 설계를 위한 마크업 가이드 by 유동균
웹 성능 최적화 기법 (책)