이미지가 원인일 때 느린 최대 콘텐츠풀 페인트(LCP)를 해결하는 방법

느린 최대 콘텐츠풀 페인트(LCP) 이미지를 해결하는 4단계: 표시 크기에 맞게 이미지 크기를 조정하고, WebP 또는 AVIF로 변환하고, 프리로드(preload)를 설정하고, fetchpriority를 high로 지정하세요. 처음 2단계만으로도 대부분의 개선이 이루어지며, 페이지 마크업을 변경할 필요도 없습니다.

대부분의 페이지에서 최대 콘텐츠풀 페인트 요소는 단일 히어로 이미지입니다. 즉, LCP는 전체 사이트의 문제라기보다는 단 하나의 파일에 관한 문제입니다. 이 파일 하나를 수정하는 것이 보통 다른 어떤 최적화 작업보다 측정 수치를 가장 크게 개선합니다.

LCP가 측정하는 것

LCP는 페이지 로드가 시작된 시점부터 가장 큰 가시적 요소가 렌더링되는 데 걸리는 시간을 기록합니다. Google은 2.5초 이하를 '좋음', 2.5초에서 4초 사이를 '개선 필요', 4초 초과를 '느림'으로 분류합니다.

측정 대상이 되는 요소는 보통 이미지이며, 때로는 제목 텍스트 블록이 되기도 합니다. 그리고 항상 스크롤하지 않고도 볼 수 있는 영역에 있는 요소입니다. 데스크톱 레이아웃을 차지하는 히어로 이미지가 모바일 화면에서는 스크롤해야 보이는 위치로 내려갈 수 있으므로, 기기에 따라 측정 대상 요소가 달라질 수 있습니다.

원인이 되는 요소 찾기

Lighthouse를 실행하고 정확히 어떤 요소가 측정되고 있는지 보여주는 '최대 콘텐츠풀 페인트 요소' 항목을 확인하세요. 짐작만으로 작업하면 시간을 낭비하게 됩니다. 실제 측정 대상이 사람들이 생각하는 것과 다른 경우가 많기 때문입니다.

레이아웃이 다르면 결과도 달라지므로 데스크톱뿐만 아니라 모바일에서도 확인해야 합니다. 실제 방문자로부터 수집한 필드 데이터가 단 한 번의 실험실 테스트보다 더 신뢰할 수 있습니다. 실제 환경의 네트워크 조건은 테스트 환경보다 훨씬 더 다양하기 때문입니다. 두 데이터가 일치하지 않는 경우 필드 데이터를 신뢰하고, 실험실 테스트는 진단용으로 사용하세요.

영향력이 큰 순서대로 이미지 수정하기

이미지의 LCP를 개선하려면 다음 6단계를 순서대로 진행하세요.

1. 이미지를 표시될 가장 큰 크기로 조정하되, 고해상도 화면을 위해 2배 크기로 설정합니다.
2. WebP로 변환하거나, 이미지가 크고 사진 스타일인 경우 AVIF로 변환합니다.
3. 히어로 이미지의 경우 200 KB 미만을 목표로 압축합니다. 대부분의 디자인에서 전체 너비 기준으로 충분히 달성 가능한 크기입니다.
4. 브라우저가 공간을 미리 확보하여 레이아웃 이동이 발생하지 않도록 width와 height 속성을 추가합니다.
5. 브라우저가 즉시 이미지를 가져올 수 있도록 페이지 head에 이미지를 프리로드(preload)합니다.
6. 이미지 요소에 fetchpriority를 high로 설정하여 브라우저에 이 파일이 가장 중요하다는 것을 알려줍니다.

1단계와 2단계가 보통 개선 사항의 대부분을 차지하며, 이 두 단계는 페이지 마크업을 전혀 건드릴 필요가 없는 작업입니다.

크기 조정이 압축보다 효과적인 이유

이미지 크기(가로세로 해상도)가 파일 크기의 대부분을 결정하므로, 크기를 조정하는 것이 어떤 품질 설정보다 용량을 더 많이 줄여줍니다. 1200 픽셀로 표시되는 화면에 4000 픽셀 크기의 사진을 사용하면 페이지가 보여줄 수 있는 것보다 11배나 더 많은 픽셀 데이터를 전송하게 됩니다.

세 번째 행은 왜 크기 조정이 먼저여야 하는지 보여줍니다. 크기 조정만 한 것이 압축만 한 것보다 나은 결과를 보였으며, 두 가지를 모두 적용했을 때 가장 뛰어난 결과를 얻었습니다. 구체적인 수치는 이미지와 연결 상태에 따라 다르지만, 이 순서의 효과는 일관되게 나타납니다.

프리로드와 fetchpriority

프리로드는 브라우저가 페이지 분석을 마치기 전에 히어로 이미지를 먼저 가져오도록 지시하는 것으로, 보통 200에서 500 밀리초를 단축합니다. 브라우저는 페이지 분석 프로세스 후반부에 이미지를 발견하기 때문에 이 설정이 중요합니다.

이미지는 단 하나만 프리로드해야 합니다. 여러 개를 프리로드하면 브라우저가 주의를 분산시키기 때문에 혜택이 사라집니다. fetchpriority를 high로 설정하면 더 적은 마크업으로도 비슷한 결과를 얻을 수 있으며, 초기 HTML에 이미 존재하는 이미지의 경우 이 설정만으로도 충분한 경우가 많습니다.

LCP를 더 악화시키는 실수들

• 히어로 이미지에 지연 로딩(lazy loading) 적용하기. 지연 로딩은 가장 먼저 보여야 할 파일의 로딩을 지연시킵니다. 지연 로딩은 스크롤해야 보이는 영역 이하에만 적용하세요.
• JavaScript를 통해 히어로 이미지 로드하기. 스크립트로 삽입된 이미지는 스크립트가 실행되기 전에는 다운로드를 시작할 수 없습니다.
• CSS 배경 이미지 사용하기. 배경 이미지는 img 요소보다 늦게 발견되며 우선순위를 지정하기가 쉽지 않습니다.
• 여러 이미지 프리로드하기. 우선순위가 서로 경쟁하면 프리로드의 이점이 완전히 사라집니다.
• width와 height 생략하기. 레이아웃 이동이 발생하여 LCP가 개선되는 동안 다른 측정 지표(CLS)가 악화됩니다.

LCP 요소가 텍스트인 경우

텍스트 기반 LCP는 보통 텍스트 자체보다는 웹 폰트 때문에 지연됩니다. 브라우저는 텍스트를 즉시 가지고 있지만 웹 폰트 파일이 다운로드될 때까지 렌더링을 대기하기 때문입니다.

font-display를 swap으로 설정하여 웹 폰트가 로드되는 동안 기본 폰트로 텍스트를 먼저 렌더링하고, 웹 폰트가 도착하면 전환되도록 하세요. 가장 중요한 단 하나의 폰트 파일을 프리로드하고, 페이지에서 실제로 사용하는 문자만 포함하도록 폰트를 서브셋(subset)화 하세요. 이렇게 하면 보통 200 KB의 폰트를 30 KB 미만으로 줄일 수 있습니다. 또한 외부 서비스 대신 자체 도메인에서 폰트를 제공하면 타사 연결 단계를 줄일 수 있습니다.

서버 응답 시간이 한계를 결정합니다

LCP는 서버가 첫 번째 바이트를 반환하는 데 걸리는 시간보다 빨라질 수 없으므로, 느린 서버는 다른 모든 개선 사항의 효과를 제한합니다. 첫 번째 바이트까지의 시간(TTFB)을 600 밀리초 미만으로 만드는 것을 목표로 하세요.

이미지를 최적화하기 전에 이 수치를 먼저 확인하세요. 서버 응답이 2초 걸린다면 이미지 파일을 어떻게 처리하든 LCP 2.5초 목표를 달성하는 것은 불가능하기 때문입니다. 캐싱, 더 빠른 호스팅 서비스 또는 콘텐츠 전송 네트워크(CDN)를 사용하여 이 문제를 해결하세요. 이미지 최적화는 다른 곳에서 설정된 한계와 싸우는 것이 아니라, 서버 응답 이후 남은 시간을 개선하는 작업입니다.

타사 스크립트도 이미지를 지연시킵니다

분석 도구, 동의 배너, 채팅 위젯 및 광고 스크립트는 대역폭과 처리 시간을 두고 히어로 이미지와 경쟁합니다. 완벽하게 최적화된 이미지라도 그 앞에 12개의 스크립트가 먼저 로드되면 렌더링이 늦어질 수밖에 없습니다.

동의 배너가 가장 치명적입니다. 많은 배너가 방문자가 선택할 때까지 렌더링을 차단하기 때문입니다. 타사 스크립트는 defer 또는 async 속성을 사용하여 로드함으로써 페이지를 가로막지 않도록 하고, 실제로 필요한 스크립트가 몇 개인지 점검하세요. 사용하지 않는 추적 스크립트 3개를 제거하는 것이 추가로 이미지를 압축하는 것보다 LCP를 더 많이 개선하는 경우가 많습니다.

올바르게 변경 사항 테스트하기

확장 프로그램이 비활성화된 시크릿 창에서 테스트하고, 단 한 번의 결과만 믿지 말고 측정을 3번 실행하세요. 실행할 때마다 점수가 눈에 띄게 달라질 수 있습니다.

브라우저가 실제로 더 작은 파일을 받았는지 확인하세요. 개발자 도구를 열고 네트워크(Network) 탭으로 이동한 다음, 이미지로 필터링하고 새로고침합니다. 전송된 크기와 포맷이 목록에 표시됩니다. 페이지에서 여전히 이전 파일이 제공되고 있다면 최적화가 실패한 것이 아니라 캐싱 레이어가 이전 버전을 유지하고 있기 때문일 가능성이 높습니다.

해결 후에도 빠른 LCP 유지하기

새로운 페이지가 추가되면서 문제가 다시 발생할 수 있으므로, 히어로 이미지를 하나씩 수정하기보다는 일관된 규칙을 설정하세요. 한 번 수정한 사이트라도 편집자가 카메라에서 찍은 원본을 그대로 업로드하면 몇 달 안에 다시 느려집니다.

히어로 이미지의 최대 너비와 최대 파일 크기를 합의하여 문서화하고, 모든 새 페이지에 적용하세요. 가로 1920 픽셀 이하, 용량 200 KB 이하와 같은 규칙은 확인하기 쉬우며 거의 모든 디자인에 적용할 수 있습니다. 여러 사람이 콘텐츠를 발행하는 환경에서는 기술적인 방법보다 명문화된 규칙이 더 중요합니다. 전체 성능 측정 수치는 가장 좋은 페이지가 아니라 가장 나쁜 페이지를 반영하기 때문입니다.

한 번에 히어로 이미지 준비하기

사이트의 모든 히어로 이미지는 동일한 사양과 목표 크기를 공유하므로 한꺼번에 처리하세요. 대부분의 사이트는 랜딩 페이지, 카테고리 페이지, 아티클 전반에 걸쳐 10개에서 100개 사이의 히어로 이미지를 가지고 있습니다.

너비와 목표 KB를 한 번만 설정하고 이미지를 끌어다 놓으면 모든 파일이 기준에 맞춰 변환됩니다. 한 번에 최대 500개의 이미지를 처리할 수 있으며, 외부 업로드 없이 브라우저 내부에서 사용자의 프로세서만을 사용하여 실행됩니다. 아무것도 업로드되지 않으므로, 준비 중인 자산이나 미공개 캠페인 페이지, 클라이언트 작업물 등을 컴퓨터 외부로 유출하지 않고 안전하게 전체 라이브러리를 준비할 수 있습니다.