LCP(Largest Contentful Paint)

LCP는 웹페이지의 로딩 속도에 대한 지표로 <main>이나 <section> 뿐만 아니라 제목, div, 양식 요소 등 텍스트 요소가 포함된 모든 HTML 요소들이 브라우저 화면에 렌더링 완료되는데까지 걸리는 시간의 길이이다.

단순한 로딩 속도와는 조금 다르며, 스크롤 없이 볼 수 있는 부분을 로딩하는데 걸리는 시간을 의미한다.

대부분의 중요한 정보들은 스크롤 없이 볼 수 있는 부분에 담겨있기 때문이다.
따라서 스크롤 페이지 레이아웃을 개선함으로써 LCP를 향상시킬 수 있다.

📌LCP를 개선하기 위해서는 레이아웃을 조정하여 중요한 컨텐츠를 상단에 배치하는 것으로 해결할 수 있다. 동영상이나 고해상도 이미지 등은 다운로드 링크 형식으로 배치하는 것도 좋은 방법이나, 상황이 그렇지 못하다면 압축 등을 통해 용량을 낮추는 것도 방법이다.

FID(First Input Delay)

사용자가 페이지의 링크를 클릭하거나 버튼을 클릭하는 등의 상호작용을 처음했을 때 부터 브라우저가 이에 반응할 때 까지의 시간을 의미

따라서 블로그와 같이 사용자와의 상호작용이 불필요한 웹의 경우 FID는 무의미하다.

모든 웹 사이트가 상호작용 요소를 넣지 않기 때문에 FID를 볼 때 95~99번째 백분위를 보는 것을 추천한다고 한다.

📌FID를 개선하기 위해서는 코드를 최소화하는 것이 중요하다.
타사코드의 영향을 줄이고, 불필요한 코드는 제거하는 것이 바람직하다.

다운로드 파일의 경우 사이즈를 최소하하는 것이 효과적이다.

CLS(Cumulative Layout Shift)

CLS는 어떤 콘텐츠를 읽다가 링크를 클릭하려고 한 순간, 갑자기 광고나 다른 요소가 나오며 원하지 않은 요소를 클릭하는 실수를 방지하기 위한 척도

📌CLS를 개선하기 위해서는 LCP와 비슷하게 시각적으로 안정적인 페이지 로딩이 될 수 있도록 레이아웃을 적절하게 배치하는 것이 바람직하다.

과도한 애니메이션은 레이아웃을 변경시키는 요소이기 때문에 변환 애니메이션을 최대한 제한하는 것이 좋다.