개인노트-인강

개인 노트 정리) 마크업18 - 덜컥덜컥 누적 배치 변경 문제

roroism 2023. 10. 10. 19:22

The RED 견고한 UI 설계를 위한 마크업
Part 3. Performance
03. 덜컥덜컥 누적 배치 변경 문제

 

# 덜컥덜컥 누적 배치 변경 문제 (CLS 란)

- Cumulative Layout Shift (누적 배치 변경)

- LCP가 성능을 측정하는 대표적인 지표였다면, CLS는 사용자 경험을 측정하는 대표적인 지표이다.

- CLS를 0.1 안으로 단축하는 것이 우리의 목표다.

- 구글 라이트 룸을 이용하여 측정할 수 있다.

## 누적 배치 변경 문제(CLS)의 예시

1. 뒤늦게 요소가 추가되면서 전체 페이지가 아래로 떨어지는 현상.

2. 글꼴 스와핑 (FOIT / FOUT)

- 텍스트가 보이지 않다가 갑자기 보이는 것 (FOIT)

- 스타일되지 않은 글꼴(system 글꼴)이 표시가 됐다가 갑자기 웹 폰트 글꼴이 뒤늦게 로딩이 되는 현상(FOUT)

## CLS 유발 요인

- 첫 페인팅 이후 뷰포트 안에서 배치가 바뀌는 상황

1. 치수를 알 수 없는 이미지 로딩.

2. 동적으로 추가된 DOM.

3. 웹 폰트 swap 페인팅.

## CLS 확인 (Lighthouse)

## CLS 문제 해결 사례

- 자리표시자를 활용하여 CLS 문제를 효과적으로 억제한 사례 -> 이미지가 들어올 영역에 자리표시자를 미리 넣어서, 이미지가 들어오지 않더라도 그 영역을 다른 요소들이 침범하지 않게 처리.

## CLS를 구체적으로 확인하는 방법

- 개발자 도구의 performance 탭 -> Experience -> Summary -> CLS를 유발하는 영역이 어디인지 확인할 수 있다.

## CLS 문제 해결

1. 동적으로 추가하는 콘텐츠에 자리 표시자 제공.

2. 이미지/영상 요소에 비율 힌트 제공. (이미지에 width와 height 값을 넣어준다. 영상에는 비율 유지가 되도록 미리 자리를 잡아 둔다.)

3. 애니메이션 적용 시 transform 사용. (width, height 값이 변경되지 않도록 만든다.)

## 이미지/영상 비율 힌트 제공하기

### 1. img 태그에 width와 height를 적용하기

// As is 👎
<img src="..." alt>

// To be 👏
<img src="..." width="800" height="534" alt>
➕
max-width: 100%;
height: auto;

- img 태그에 width와 height를 작성하는 것이 좋다.

- 적용한 width와 height 값대로 렌더링되지 않아도 상관없다. 중요한 것은 width와 height의 비율이 중요하다.

- 웹 브라우저는 img에 적혀있는 width와 height의 값을 이용하여 이미지의 비율을 계산할 수 있다.

### 2. aspect-ratio 로 문제를 해결하기

- 콘텐츠의 너비와 높이의 비율을 고정해주는 속성이다.

- 사용하기 전에 caniuse에서 지원하는 브라우저를 확인하자.

aspect-ratio: 800 / 534; /* ⚠️ Check caniuse. */

### 3. 영상 종횡비 유지하기 (padding)

- 비율을 유지하면서 영상을 삽입하는 방법이다.

- 영상의 종횡비를 유지하는데 가장 많이 사용되는 코드이다.

- 부모요소의 너비값을 기준으로 padding 의 비율이 결정되기 때문에 이 특징을 이용하여 종횡비 유지에 사용할 수 있다.

.utube {
  position: relative;
  padding-top: 56.25%; /* 315 / 560 * 100 */
}
.utube__iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

## 자리표시자

- 최소값을 미리 넣어둔다.

- 배경색을 회색 등을 넣어서 자리 표시자를 제공한 것과 같은 느낌을 준다.

.heroBanner {
    min-height: 100px;
    background: silver;
}

## 웹 폰트 대체 글꼴

- 그냥 system 글꼴을 제공하는 것이 아니라 사용하려는 웹 폰트와 특성이 비슷한 대체 글꼴을 사용하는 것이 좋다.

// bad
font-family: 'Noto Sans KR', sans-serif;

// good
font-family: 'Noto Sans KR', Verdana, sans-serif;

# 정리

1. 이미지/영상 요소에 비율 힌트(width, height) 제공.
2. 추가 DOM에 자리표시자 제공.
3. 웹 폰트와 유사한 시스템 대체 글꼴 제공.