LCP 개선, 가장 큰 요소를 먼저 특정합니다

어느 요소가 지표의 대상인지부터 찾습니다

가장 큰 콘텐츠가 그려지는 시간을 개선하려면 그 '가장 큰 콘텐츠'가 무엇인지 알아야 합니다. 대개 첫 화면의 큰 이미지이거나 큰 제목 문단입니다. 대상이 이미지면 이미지 전달을 손봐야 하고, 글이면 글꼴 로딩과 서버 응답을 손봐야 합니다. 둘은 조치가 완전히 다릅니다. 그래서 1단계는 대상 요소를 특정하는 일입니다. 측정 도구가 그 요소를 알려 주므로 추측할 필요가 없습니다. 화면 크기에 따라 대상이 달라질 수 있으므로 모바일과 데스크톱을 각각 확인합니다. 대상을 모른 채 전체 최적화를 하면 지표는 거의 변하지 않습니다.

시간을 네 구간으로 쪼갭니다

대상을 찾았으면 시간을 네 구간으로 나눕니다. 첫째는 서버가 첫 응답을 보내기까지입니다. 둘째는 브라우저가 그 자원의 존재를 알아내기까지입니다. 셋째는 자원을 받아 오는 시간입니다. 넷째는 받은 자원을 그리는 시간입니다. 각 구간의 조치가 다릅니다. 첫째는 서버와 캐시, 둘째는 문서 안에서 자원을 미리 알려 주는 선언, 셋째는 용량과 전송 경로, 넷째는 렌더를 막는 스크립트와 글꼴입니다. 네 구간을 측정하지 않고 '이미지를 줄이자'로 시작하면, 실제 병목이 둘째 구간일 때 아무 효과가 없습니다.

구간별 숫자로 목표를 배분합니다

학습용 가정으로 계산합니다. 가정값은 현재 측정값이 첫 응답 1.1초, 자원 발견 0.9초, 로드 1.6초, 렌더 0.6초라고 두겠습니다. 합계는 4.2초입니다. 공식 기준인 2.5초 이하로 들어가려면 1.7초를 줄여야 합니다. 이것이 중간 계산값입니다. 최종 배분은 큰 구간부터 합니다. 로드 1.6초와 자원 발견 0.9초의 합이 2.5초이므로 이 두 구간이 전체의 절반을 넘습니다. 자원을 미리 알려 주는 선언으로 발견 시간을 줄이고 이미지 용량을 줄이면 두 구간에서 1.7초를 확보할 수 있습니다. 첫 응답과 렌더는 그다음 작업으로 둡니다.

첫 응답이 느리면 다른 조치가 묻힙니다

결론을 뒤집는 조건은 첫 응답 시간입니다. 서버가 첫 바이트를 보내기까지 2초가 걸리면, 그 뒤 구간을 전부 0으로 만들어도 기준을 만족할 수 없습니다. 그래서 첫 응답이 1초를 넘는다면 그것이 1순위입니다. 원인은 서버 계산, 데이터베이스 질의, 또는 리다이렉트입니다. 두 번째 조건은 지연 로딩 설정입니다. 첫 화면의 큰 이미지에 지연 로딩을 걸면 브라우저가 늦게 받아 지표가 나빠집니다. 첫 화면 밖 이미지에만 적용해야 합니다. 그래서 점검 항목에 '첫 화면 이미지의 지연 로딩 해제'를 명시적으로 넣습니다.

성능 최적화 실행 전 점검표

• 모바일과 데스크톱 각각의 대상 요소를 특정했다
• 시간을 응답·발견·로드·렌더 네 구간으로 측정했다
• 큰 구간부터 목표 단축량을 배분했다
• 첫 화면 이미지의 지연 로딩을 해제했다