LCP란 무엇인가?
최대 콘텐츠 렌더링 시간 (Largest Contentful Paint) 의 약자이다. 웹에 있어서 컨텐츠가 얼마나 빠르게 로딩되고 사용자들이 컨텐츠를 볼 수 있는지는 굉장히! 굉장히! 굉장히! 중요한 문제이다. 이러한 측면에서 LCP를 줄이는 것은 굉장히 중요하다.
이는 LCP가 페이지가 처음 로드하기 시작한 시점을 기준으로 표시 영역 내에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고하기 때문입니다.
만약 페이지 내의 최대 콘텐츠가 너무 크다면 어떻게 될까? 페이지는 로드 되기 이전에 필요한 자원들을 모두 렌더한 이후 다른 렌더 또한 이루어진다. 그렇기 때문에 크기가 큰 자원이 앞에서 뒤에 이어질 렌더들을 막는다면 자연스럽게 사이트는 느려질 것입니다.
LCP에 고려되는 요소들
- img 요소
- svg 요소내의 image 요소
- 섬네일 이미지가 있는 video 요소
- url()을 통해 로드된 배경 이미지가 있는 요소( CSS 그라데이션과는 반대로 적용된다. )
- 텍스트 노드 또는 기타 인라인 수준 텍스트 요소 하위 요소를 포함하는 블록 수준 요소 (ex. div, ul, p 등등)
- video 요소 자동재생을 위해 채색된 첫 번째 프레임
- 애니메이션 GIF 등 애니메이션 이미지 형식의 첫 번째 프레임
좋은 LCP 점수란 뭘까?
기본적으로 좋은 LCP의 기준은 최대 콘텐츠 렌더 시간이 2.5초 이하를 기준으로 삼습니다.
TTFB
이미지
TTFB(Time to First Byte) 는 첫 번째 바이트가 도착하기 시작하는 시점부터 시작해서 리소스의 요청과 응답이 도착하여 domInteractive가 시작되기 이전, 두 지점의 사이의 시간을 측정하는 항목에 해당합니다.
LCP를 이야기하다 말고 TTFB를 이야기한 이유는 무엇일까요? 이 두가지는 서로 상관관계를 갖고 있기 때문입니다.
TTFB는 자원(Resource)들을 로드하는데 걸리는 시간을 측정합니다. 이는 LCP보다 이전의 단계를 평가하기 때문에 만약 TTFB의 시간이 길어지게 된다면 LCP와 FCP와 같은 측정보다 이전에 측정을 시작하기 때문에 상관관계를 지닌다고 이야기 할 수 있습니다.
하지만 TTFB는 핵심 웹 바이탈에 포함되지는 않습니다. 그렇기 때문에 모든 경우 좋은 TTFB 점수를 받아야할 필요가 있는 것은 아닙니다.
하지만 몇몇 경우에 TTFB가 낮은 점수를 맞아야할 경우가 있습니다. SPA(Single Page Application)의 경우를 생각해봅시다.
SPA는 새로고침이 발생하지 않게 하기 위하여 HTML, Javascript, CSS에 코드에 과하게 의존하여 모든 번들들을 다운로드 하여하고 또한 클라이언트 측 Javascript 파일들이 빠른 시간내에 로드되지 않을 경우 페이지를 이용할 수 없기 때문에 사용자에게 최대한 빨리 마크업이 채워지고 자바스크립트가 의미 있는 콘텐츠를 채워야 하는 SPA의 경우 낮은 TTFB의 점수가 중요하다고 할 수 있습니다.
하지만 클라이언트의 작업이 많이 필요하지 않은 SSR 사이트는 SPA에 비하여 TTFB 점수가 높을 수 있지만 FCP와 LCP의 점수는 오히려 더 낮을 수 있습니다. 그렇기 때문에 TTFB는 핵심 웹 바이탈의 측정 항목들과는 달리 대략적인 가이드로써의 역할만을 한다는 것을 알 필요가 있습니다.
이미지를 사용할때 LCP를 줄일 수 있는 수단
간단히 말하자면 용량을 줄이는 것이다! 그렇다면 용량은 어떻게 줄일 수 있을까?
이미지 내에는 여러가지 많은 포맷들이 있다. .jpg, .png .webp, avif , .gif, .svg 와 같은 여러가지 포맷들 중에 각각의 용도에 맞는 적절한 포맷을 고르는 것이 이미지의 용량을 줄일 수 있는 좋은 수단이 되기도 한다. 그렇기 때문에 각각의 이미지 포맷을 한번 알아보자.
1. .JPG
jpg 파일은 엄밀히 따지면 JPEG 파일입니다. 그리고 우리에게 가장 친숙한 파일 포맷이기도 합니다. 대부분의 웹 브라우저와 스마트폰를 지원하고 또한 일반적인 이미지를 표시하고 저장하는데 유용하게 사용되는 파일 포맷입니다.
JPEG파일은 최대 24비트의 색상을 지원하며 간편한 저장과 전송을 위해 손실 압축 방식으로 이미지를 저장합니다. 이 말은 어려워 보이지만 그렇게 복잡한 이야기는 아닙니다.
이미지를 구성하는 가장 큰 요소는 무엇일까요? 바로 색입니다. 색에는 데이터가 존재합니다. 우리가 흔히 아는 빨, 주, 노, 초, 파, 남, 보와 같은 색이 있지만 이외에도 조금 얕은 빨간색, 파란 색이 약간 섞여 있는 보라색과 같이 다양한 색상이 있습니다. 앞서 이야기한 색상의 비트는 이를 포함하는 범위를 어디까지 포함 할 것인지를 최대 몇 비트의 색상을 지원하는 가를 통해 이야기 하는 것입니다.