[FrontEnd] google lighthouse LCP/INP/CLS

- LCP (Lagest Contentful Paint )

1. 최대 콘텐츠 렌더링 시간

2. 사용자가 URL을 요청한 시점부터 표시 영역에 가장 큰 시각 콘텐츠를 렌더링하는데 걸리는 시간

3. 사이트의 최대 렌더링 속도가 2.5초 이하여야한다.

 

- INP ( Interaction to Next Page )

1. 다음 페인트까지의 상호작용.

2. 클릭, 탭, 키보드 상호작용 반응 시간

3. 페이지의 전반적인 반응성 평가

4. 200 밀리초 이하 - 응답성 양호 / 200 ~ 500 : 개선 필요 / 500 ~ : 좋지않음

 

- CLS ( Cumulative Layout Shift )

1. 누적 레이아웃

2. 전체 수명 동안 발생하는 예상치 못한 레이아웃 변화 ( 개별적 )

3. 숫자가 클수록 페이지 레이아웃 많은 변경

4. 0.1 이하가 좋은 환경