CSS 덜컥덜컥 누적 배치 변경 문제

• CLS는 구글 핵심 성능 지표에 포함되는 항목

• lighthouse: 크롬에 내장되어 있음

• 0.1 이내에 로드하는 것이 목표

• 돔이 뒤늦게 추가, 웹폰트가 뒤늦게 로딩되는 등의 이유로 레이아웃 배치가 변경됨.

• FOIT: font of invisible text / 보이지 않다가 나타나는 현상

• FOUT: font of unstyled text / 시스템 폰트에서 웹폰트로 변경되는 현상

CLS 유발 요인

• 첫 페인팅 이후 뷰포트 안에서 배치가 바뀌는 상황
  • 치수를 알 수 없는 이미지 로딩.
  • 동적으로 추가된 DOM.
  • 웹폰트 swap 페인팅.

CLS 확인

• 동적으로 추가하는 콘텐츠에 자리 표시자 제공
• 이미지/영상 요소에 비율 힌트 제공
• 애니메이션 적용시 transform 사용 (width, height X)

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

첫번째

<img src="..." width="800" height="534" alt>

max-width: 100%;
height: auto;

두번째

aspect-ratio: 800/534; /* check caniuse */

세번째

.utube {
    position: relative;
    padding-top: 56.25%
}

.utube__ifram {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

자리 표시자

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

웹폰트 대체 글꼴

• 웹폰트와 최대한 비슷한 대체 글꼴 지정

---

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님