[React] Deep Dive 모던 리액트(31) 핵심 웹사이트 지표

사용자가 웹사이트에 접속하였을때 웹사이트의 성능을 나타내기 위한 핵심 웹지표란 개념이 있다. 핵심 웹지표? 구글에서 만든 지표로 웹사이트에서 뛰어난 사용자 경험을 제공하는데 필수적인 지표를 일컫는 용어이다. 1. LCP (최대 콘텐츠풀 페인트) 2. FOD (최초 입력 지연) 3. CLS (누적 레이아웃 이동) LCP? 최대 콘텐츠풀 페인트란 페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지나 텍스트를 렌더링하는데 걸리는시간 을 의미한다. 큰 이미지와 텍스트는 아래와 같이 정의되어 있다. 내부 poster 속성을 사용하는 url()을 통해 불러온 배경이미지가 있는 요소 텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소 (,) 즉, 콘텐츠풀 페인트란 사용자의 기기가 ..