패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"
CLS
- Cumulative Layout Shift(누적 레이아웃 이동, CLS)
- 사용자 경험을 측정하는 대표적인 지표로, 구글의 검색에 반영됨
- 시각적 안정성을 측정하기 위해 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량화한 지표
- CLS가 낮으면 우수한 사용자 경험을 보장하는 데 도움이 됨
- 0부터 1까지의 점수 범위가 있으며, 우수한 사용자 경험을 제공하려면 사이트의 CLS 점수가 0.1 이하여야 함
참고 : https://web.dev/cls/
유발 요인
첫 페인팅 이후 뷰포트 안에서 배치가 바뀌는 상황
(페이지가 덜컬덜컥 로딩 되면서 사용자가 정확한 위치에 포인팅 하기 어려운 사황)
- 치수를 알 수 없는 이미지 로딩
예) 메인페이지 상단의 배너가 뒤늦게 로딩 되어 나타나면서 메뉴 버튼을 누르려던 사용자가 배너를 누르게 되는 경우 - 동적으로 추가된 DOM
예) 뒤늦게 추가된 DOM이 다른 콘텐츠를 밀어서 떨어뜨리는 경우 - 웹 폰트 swap 페인팅 (FOIT/FOUT)
- FOIT(Font Of Invisible Text) : 텍스트가 보이지 않다가 갑자기 화면에 나타나는 것
- FOUT(Font Of Invisible Text) : 스타일 되지 않은 글꼴이 표시 되었다가 갑자기 웹폰트 글꼴이 뒤늦게 로딩 되면서 시스템 글꼴을 대체해 웹폰트로 바뀌는 것
→ 글꼴에 따라 줄간격이 달라지므로, 폰트가 변경되면 페이지 콘텐츠가 흔들리는 현상이 발생할 수 있음
점수 계산법
- Viewport의 높이를 100%로 간주하고 그 안에서 충격 비율이 얼마나 되는지를 계산한 것
- 충격 비율 x 이동 비율 = CLS 점수
충격 비율: CLS 발생으로 배치가 바뀐 영역의 비율
이동 비율: CLS 발생을 초래한 영역의 비율 (예를 들어 갑자기 등장한 배너 영역의 비율)
점수 및 상세 정보 확인
- 구글 lighthouse
*lighthouse 다운로드 및 실행 방법은 아래 링크 참고
https://velog.io/@uhye/CSS-Optimization
- 개발자도구 Performance 탭
Performance → Experience → Summary
Experience에서 그래프가 그려진 영역 중 Layout Shift 발생 부분 선택
Summary 상세 내용을 통해 웹페이지 내에서 CLS를 유발하는 항목과 CLS 발생으로 레이아웃이 어느 위치에서 어디로 이동했는지 확인 가능
문제 해결 방법
자리 표시자
동적으로 추가하는 콘텐츠에 자리 표시자(콘텐츠가 들어갈 고정 사이즈 영역) 제공
<style>
.heroBanner {
min-height: 100px;
background: gray;
}
</style>이미지/영상 비율 힌트
이미지/영상 요소에 비율 힌트 제공 (width, height 값 설정)
→ 인라인으로 width, height 값 작성 후 CSS로 width, height 값을 따로 설정하여 해당 인라인 값으로 사이즈가 제공되지 않더라도 width, height 값의 비율이 중요한 것이므로 꼭 작성할 것
→ 웹브라우저는 img 태그 내 작성한 width, height 값으로 이미지 비율을 계산함
[이미지 비율 제공 에제]
// As is 👎
<img src="..." alt>
// To be 👍
<img src="..." width="800" height="534" alt>
<style>
max-width: 100%;
height: auto;
</style>
[영상 비율 제공 예제]
* 영상 종횡비 유지하기
<style>
.Yutube {
position: relative;
padding-top: 56.25%; /* 315 / 560 * 100 */
}
.Yutube__iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
</style>*애니메이션 적용 시에는 transform 사용 (width, height 값이 변경되지 않도록 설정)
웹 폰트 대체 글꼴
웹 폰트 사용 시 대체 글꼴로 통상적인 시스템 글꼴을 제공하는 것이 아니라, 사용 중인 웹 폰트와 특성이 비슷한 대체 글꼴 지정
예) NotoSans 웹폰트에서 Sans-serif로 변경되면 기존의 5줄이던 텍스트가 6줄로 바뀜 → 자간이 비슷한 Verdana 글꼴을 대체 글꼴로 지정하여 텍스트 5줄로 유지함으로써 컨텐츠 영역이 덜컥이는 현상 해결
<style>
// As is 🤔
font-family: 'Noto Sans KR', sans-serif;
// To be 👍
font-family: 'Noto Sans KR', Verdana, sans-serif;
</style>Summary
- 이미지/영상 요소에 비율 힌트(width, height) 제
- 추가 DOM에 자리표시자 제공
- 웹 폰트와 유사한 시스템 대체 글꼴 제공
