🤳Core Web Vital 이란?

(1) LCP (최대 콘텐츠 풀 페인트)
(2) FID (최초 입력 지연)
(3) CLS (누적 레이아웃 이동)

출처 : web.dev

사용자의 경험에 결정적인 영향을 미치는 측정가능한 지표 중 가장 중요한
세가지 항목을 핵심 웹 지표 라고한다.

그 외에도

(4) TTFB (최초 바이트까지의 시간)
(5) FCP (최초 콘텐츠 풀 시간)

두가지 지표를 추가해서 다섯 가지를 알아보자.

😱그 전에...

성능 최적화에 대해 알아보기 전에 기본적으로 알아야 할 부분이 있다.

브라우저는 위에서부터 차례대로 로드되는데 HTML파일을 읽는 중 css나js파일을 만나면 해당 파일을 읽는동안 웹페이지의 랜더링은 일시적으로 차단된다. 즉 이부분을 해결 하면 성능향상을 할 수 있을 것으로 기대된다.
이제 몇가지 방법들에 대해 알아보자.

👌(1) LCP (최대 콘텐츠 풀 페인트)

LCP(최대 콘텐츠 풀 페인트)란?

LCP는 사용자가 처음 페이지로 이동한 시점을 기준으로 뷰포트(사용자의 화면에 보여지는 영역)에 표시되는 가장 큰 이미지 or 텍스트 블록의 렌더링 시간을 말한다.

LCP의 평가 기준은 아래 그림과 같다. 2.5초 이하일때 좋은 사용자 경험을 줄 수 있다.

출처 : web.dev

LCP를 최적화하는 방법

랜더차단 리소스 제거

👍 불필요한 css제거

• css는 랜더링 차단 리소스이기 때문에 불필요하게 선언된 css들은 삭제해주는 것이 좋다.
  공용 스타일을 적용해서 관리해준다면 성능향상에 도움을 줄 수 있다.

• 또한 selector또한 복잡하게 선언하면 레이아웃을 그리는데 시간이 소요되기때문에 간결하게 작성해주는 것이 유지보수, 성능면에서 이점이 있다.

👍 preload, preconnect, prefetch

• rel="preload"는 image,css,js가 바로 필요하지 않은 경우 랜더링과 병렬로 다운받게하고 완료시에 웹페이지에 적용되도록 해준다.

• rel="preconnect"는 현재 페이지에서 외부 도메인 리소스를 참고하는 것을 브라우저에게 알려고 ,서드파티 자원을 연결할때 활용하면 좋다.

• rel="prefetch"는 앞으로 사용될 것이라고 예상되는 리소스를 미리 가져온다.
  브라우저는 rel="prefetch"가 적용된 리소스들을 가져와 캐시에 저장한다.
  예를들어 게시판 리스트 검색 시 사용자가 다음에 클릭할 부분은 첫 번째 게시글 또는 검색 리스트 2페이지일 확률이 높다. 이러한 경우 첫 번째 게시글의 상세페이지 또는 2페이지를 prefetch 적용할 수 있다.

이미지 최적화
👍 lazyloading 사용하기

<img src="item.jpg" loading="lazy" alt>

• 위와같이 선언함으로써 화면에 보여질 필요가없는 image들은 loading을 늦출 수 있다. 지연 로딩을 하면 뷰포트 밖에 이미지들은 로딩되지 않는다.

TTFB (최초 바이트까지의 시간)를 줄이자

(4)TTFB (최초 바이트까지의 시간)란 사용자가 페이지 로딩을 시작하고 브라우저가 HTML 응답으로 첫 바이트를 받아오기까지의 시간을 의미한다.

👌(2) FID (최초 입력지 지연)

FID(최초 입력 지연)란?

• FID는 유저와 페이지가 처음으로 상호작용하는 순간부터 (예를 들어, 링크를 클릭하거나, 버튼을 탭하는 등) 브라우저가 해당 인터렉션에 대한 응답으로 실제로 이벤트 핸들러 처리를 시작하기까지의 시간을 측정한다.

• 좋은 사용자 경험을 제공하기 위해서는 사이트의 최초 입력 지연 값이 100ms 이하 여야 한다.

FID를 최적화 하는법

JavaScript실행시간 단축

50ms 이상 메인 스레드를 차단하는 모든 코드는 긴 작업은 FID수치를 높인다.
긴 작업을 분할해서 작성하는 것이 좋다.

사용하지 않는 Javascript 지연시켜 FID를 낮춘다.

👌(3) CLS (누적 레이아웃 이동)

CLS (누적 레이아웃 이동)란?

CLS는 첫 페인팅 이후 뷰포트 내 콘텐츠 위치 변화에 대한 수치이다.
범위는 0~1이고 좋은 사용자 경험을 위해서는 0.1이내로 유지하는 것이 좋다.

CLS를 최적화 하는법

이미지의 크기를 정하자

이미지의 크기를 정해두고 스켈레톤UI를 미리 보여줌으로써 레이아웃의 영역이 이미 정해지기 때문에 사용자가 예상하지 못한 레이아웃 변화를 일으키지 않는다.

기존 컨텐츠의 중간에 추가하는것은 지양

기존 레이아웃의 상단, 중간에 레이아웃이 추가되는 것은 전체적인 레이아웃이 변하게 되기 때문에 CLS에 영향을 미친다.
*단 사용자 입력 후 500ms 이내에 발생하는 레이아웃 이동은 CLS에 포함되지 않는다고 한다.

FOUT/FOIT를 유발하는 웹 폰트

FOUT(Flash Of Unstyled Text) 웹폰트가 로드 되기전까지 대체 폰트로 보여진후 로딩후에 적용되는 것이다. FOUT현상은 자연스럽지 못한 경험을 하게 한다.

FOIT(Flash Of Invisible Text) 웹 폰트를 로드하기 전까지 텍스트가 보이지 않는 현상

👌(4)TTFB (최초 바이트까지의 시간)

TTFB(Time to First Byte)는 HTTP 요청을 했을때 처음 byte (정보) 가 브라우져에 도달하는 시간을 의미한다.

좋은 사용자 경험을위한 TTFBs는 0.8s 이하라고 한다.

👌(5)FCP (최초 콘텐츠 풀 시간)

최초 콘텐츠풀 페인트(FCP)는 브라우저가 DOM에서 첫 번째 콘텐츠 비트를 렌더링하여, 페이지가 실제로 로드되고 있다는 첫 번째 피드백을 사용자에게 제공하는 경우이다. FCP 이후에 사용자는 웹 페이지가 로드되어 있다는 것을 느낄 수 있습니다.

1.8초 이하로 유지하는것이 좋다고 한다.

😁참고자료

최적화-핵심적인-웹-지표-개선하기
LCP(Largest Contentful Paint) 최적화하기
코어 웹 바이탈 최적화
web.dev