Study

웹사이트는 방문한 목적을 손쉽게 달성할 수 있어야하고, 목적을 달성하는 데 걸리는 시간이 짧아야 하며, 개인정보가 노출되는 등의 사고 없이 보안이 철저해야 한다.

구글이 핵심 웹 지표로 꼽는 지표

페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는 데 걸리는 시간

LCP는 뷰포트 내부에서 가장 큰 영역을 차지하는 요소가 렌더링되는 데 얼마나 걸리는지를 측정하는 지표로, 뷰포트 영역 밖에 넘치는 요소가 있다면 해당 영역의 크기는 고려되지 않는다.

개선 방안

이미지를 어떻게 불러올 것인가?

<img>: 이미지는 브라우저의 기능인 프리로드 스캐너에 의해서 먼저 발견되어 빠르게 요청이 일어난다. HTML 파싱이 미처 완료되지 않더라도 프리로드 스캐너가 병렬적으로 리소스를 다운로드한다.
<svg>: svg 내부의 img는 스캐너에 의해 발견되지 않아 LCP에 악영향을 미친다.
<video>의 poster: poster는 사용자가 video 요소를 재생하거나 탐색하기 전까지 요출되는 요소다. 이 역시 프리로드 스캐너에 의해 조기에 발견된다. video가 LCP에 영향을 받을 것 같다면 poster를 반드시 넣어줘야 한다.
background-img: css에 있는 리소스는 항상 느리다. 브라우저가 DOM을 그릴 준비가 될 때까지 리소스 요청을 미루기 때문이다.

웹사이트의 반응 속도, 반응성을 측정하는 지표 사용자가 얼마나 빠르게 웹페이지와의 상호작용에 대한 응답을 받을 수 있는 지 측정하는 지표다.

개선 방안

실행에 오래 걸리는 긴 작업을 분리해 처리
자바스크립트 코드 최소화
타사 자바스크립트 코드 실행의 지연
- <script>의 async와 defer를 이용해 지연 불러오기를 실행
- 광고와 같이 실제 사용자의 뷰포트 위치에 따라 불러와야 하는 컴포넌트라면 Intersection Observer 를 이용해 뷰포트에 들어오는 시점에 렌더링

페이지의 생명주기 동안 발생하는 모든 예기치 않은 이동에 대한 지표를 계산하는 것이 누적 레이아웃 이동 지표