이미지 활용으로 페이지 로딩 시간 단축하기: LCP 최적화

LCP 속도 향상을 위한 이미지 활용 방법

검색엔진 최적화 작업 중 LCP 속도 향상을 위해 이미지를 타겟으로 사용하는 방법은 가장 효과적인 방법 중 하나입니다. LCP(Largest Contentful Paint, 최대 콘텐츠 표시 시간)는 페이지 로딩 시 뷰포트 내에서 가장 큰 콘텐츠 요소가 화면에 나타나는 데 걸리는 시간을 측정하며, 이는 검색엔진 순위 결정에 중요한 요소입니다. 이미지 최적화를 통해 로딩 속도를 향상시키는 방안은 Core Web Vitals 점수 개선에 직접적으로 영향을 줄수 있습니다.

LCP 정의 및 이미지 활용의 이점

LCP(최대 콘텐츠 표시 시간): 페이지 로딩 시 뷰포트 내에서 가장 큰 콘텐츠(이미지, 텍스트 블록 등)가 표시되는 시간입니다. 2.5초 이내를 달성하는 것이 SEO에 권장됩니다.

이미지 타겟팅의 필요성과 이점

• 이미지 타겟: LCP 속도 향상을 위해 가장 큰 콘텐츠인 이미지를 의도적으로 최적화하는 방법입니다.
• 텍스트와 이미지: 이미지가 텍스트보다 디자인적으로 더 효과적이며, 폰트 로딩으로 인해 LCP가 지연되는 FOUC (Flash of Unstyled Content) 문제를 피할 수 있습니다.
• 사용자 경험 향상 (UX): 첫 화면에 중요한 이미지를 빠르게 표시하여 이탈률을 낮춥니다.

LCP 최적화를 위한 이미지 설정 및 세부 제작 방법

성공적인 LCP 최적화를 위해서는 단순히 이미지를 넣는 것을 넘어, 파일 포맷, 사이즈, 로딩 방식 등 다양한 요소를 세밀하게 조정해야 합니다. 이러한 이미지 SEO 최적화 작업을 통해 로딩 지연을 최소화할 수 있습니다.

이미지 설정 및 주의 사항

• 관리 가능한 타겟 설정: 시스템이 아닌 운영자가 직접 코딩 및 관리가 가능한 요소를 LCP 타겟으로 설정해야 효율적인 최적화가 가능합니다.
• 지속적인 모니터링: 최적화 작업 후에도 PageSpeed Insights 등을 통해 지속적으로 LCP 성과를 점검하고 조정하는 것이 중요합니다.
• 이미지 포맷 변환: JPG, PNG 대신 WEBP 등 웹용 차세대 포맷으로 변환하여 파일 크기를 획기적으로 줄입니다.
• 이미지 압축 및 사이즈 최적화: 이미지 품질을 유지하면서 파일 크기를 압축하거나, 최적의 사이즈(반응형 사이즈)로 변환해야 합니다.
• 반응형 이미지 제작: 모바일용과 데스크탑용 이미지를 분리 제작하여 불필요한 데이터 전송을 막습니다.
• 뷰포트 준수: 이미지 사이즈는 뷰포인트(Viewport)를 넘어가지 말아야 합니다. 이는 LCP 계산에 혼란을 주거나 로딩을 지연시킬 수 있습니다.
• 사전 로드 및 우선순위 지정: fetchpriority` 태그를 사용하여 LCP 타겟 이미지의 로딩 우선순위를 높여야 합니다.

이미지로 LCP 최적화 활용 세부 사항: 반응형 및 파일 포맷

모바일과 PC 버전 반응형 이미지 제작

이미지 제작은 두 가지 버전, 즉 모바일과 PC 버전으로 진행하여 반응형 웹 환경에 최적화해야 합니다. 각각의 사이즈는 적절하게 설정해야 하며, 너무 작거나 너무 크지 않도록 주의해야 합니다.

작은 이미지의 경우, 검색 엔진 최적화에서 LCP(최대 콘텐츠 표시 시간)의 타겟이 다른 요소로 지정될 수 있으며, 너무 큰 이미지는 오히려 다른 요소의 긍정적인 평가를 저해할 수 있습니다. 일반적으로 모바일 버전의 경우 가로 300픽셀, 세로 100픽셀 이내로, PC 버전은 가로 500픽셀, 세로 200픽셀 이내로 설정하는 것을 권장합니다. 이는 절대적인 기준은 아니며, 콘텐츠의 배치와 디자인에 따라 조정될 수 있습니다.

웹용 이미지로 변환 및 압축을 통한 파일 크기 줄이기

제작이 완료된 이미지는 WEBP 등 웹용 이미지 포맷으로 변환해야 합니다. 이미 웹용으로 제작된 경우에는 이 단계를 생략할 수 있습니다. 추가로, 이미지 파일 크기를 적절히 압축하여 효율성을 높이는 것이 중요합니다. 특히 대형 파일은 압축 효과가 크지만, 작은 파일은 원본 크기를 유지하는 것이 바람직합니다.

이미지가 완성되면, 그 위치를 결정해야 합니다. 이미지가 검색엔진 최적화에 기여하려면 뷰포인트 내에 배치되어야 하며, 사이드, 상단, 하단 등 어느 위치에 놓아도 상관없지만, 첫 로딩 화면에 노출되는 것이 가장 효과적입니다.

최대 로딩 속도를 위한 이미지 코딩 및 사전 로드

이미지 코딩:

태그와 로딩 우선순위 지정

마지막으로, 검색 최적화를 위해 이미지를 코딩할 때는

하고, 사전 로드와 우선순위를 지정하는 것이 중요합니다. 이를 통해 이미지를 브라우저가 더 빨리 로딩할 수 있도록 지시합니다. 이미지 로딩 속도와 관련된 태그로는 `preload` 와 `fetchpriority`가 있습니다.

이미지 파일의 포맷을 WEBP로 변환한 후, 모바일과 PC 환경에 맞게

태그를 활용하여 코딩합니다. 코드는 아래를 참고하세요.

div class="image-ad-container"
picture
!-- 모바일용 이미지 --
source
srcset="https://tistory1.daumcdn.net/tistory/6933373/skin/images/52585554.webp"
media="(max-width: 767px)" !-- 화면 너비가 767px 이하일 때 적용됨 --
width="300" !-- 이미지의 너비 --
height="56" !-- 이미지의 높이 --
/
!-- PC용 이미지 --
source
srcset="https://tistory1.daumcdn.net/tistory/6933373/skin/images/52585554-1.webp"
media="(min-width: 768px)" !-- 화면 너비가 768px 이상일 때 적용됨 --
width="500" !-- 이미지의 너비 --
height="189" !-- 이미지의 높이 --
/
!-- 기본 이미지 (fallback) --
img
src="https://tistory1.daumcdn.net/tistory/6933373/skin/images/52585554.webp"
alt="LCP 최적화용 이미지" !-- 대체 텍스트(ALT 속성) 지정 --
class="responsive-image" !-- 클래스명 --
loading="eager" !-- 이미지 로딩 방식 설정 --
width="500" !-- 이미지의 너비 --
height="189" !-- 이미지의 높이 --
/
/picture
/div

HEAD 섹션에 사전 로드 요청 (Preload)

이 코드를 글 페이지 상단이나 제목 아래 위치시켜 이미지가 뷰포트에 확실히 노출되도록 합니다. 그리고 한 가지 더 잊지 말아야 할 것은 HEAD 부분에 이미지를 먼저 로딩(Preload)해 달라고 요청해야 합니다. 이를 통해 브라우저가 렌더링을 시작하기 전에 LCP 요소를 미리 가져와 로딩 시간을 단축합니다. 그 요청 코드는 아래와 같습니다.

!-- 첫 번째 이미지 사전로드 (모바일) --
link
rel="preload" !-- 리소스를 사전로드하도록 지시 --
fetchpriority="high" !-- 사전로드 우선순위를 높음으로 설정 --
href="https://tistory1.daumcdn.net/tistory/6933373/skin/images/52585554.webp" !-- 사전로드할 이미지의 URL --
as="image" !-- 사전로드할 리소스의 타입을 이미지로 지정 --
type="image/webp" !-- 사전로드할 이미지의 MIME 타입을 WebP로 지정 --
/

!-- 두 번째 이미지 사전로드 (PC) --
link
rel="preload" !-- 리소스를 사전로드하도록 지시 --
fetchpriority="high" !-- 사전로드 우선순위를 높음으로 설정 --
href="https://tistory1.daumcdn.net/tistory/6933373/skin/images/52585554-1.webp" !-- 사전로드할 이미지의 URL --
as="image" !-- 사전로드할 리소스의 타입을 이미지로 지정 --
type="image/webp" !-- 사전로드할 이미지의 MIME 타입을 WebP로 지정 --
/

위 작업 후, 본인이 제작한 이미지가 LCP 타겟으로 정확히 지정되었다면 1단계 작업은 완료된 것입니다. 물론 이 작업만으로 LCP의 속도가 획기적으로 향상되는 것은 아닙니다. LCP 속도 향상은 페이지 전반적인 최적화가 필요합니다.

우선 관리 가능한 타겟을 지정해서 운영자가 관리할 수 있는 상태에서 최적화 작업을 진행해야 합니다. 무작위 타겟을 관리하는 것은 시스템 전반에 관련된 모든 코드 작업을 진행해야 하기 때문에 작업이 힘들고, 자신이 직접 코딩할 수 있는 사이트가 아니면 불가능합니다.

Q1. LCP 최적화를 위해 이미지를 무조건 WEBP로 변환해야 하나요?

A: WEBP는 PNG나 JPEG 대비 압축 효율이 뛰어나 파일 크기를 크게 줄여주기 때문에 LCP 최적화에 가장 권장되는 이미지 포맷입니다. 하지만 모든 브라우저의 호환성을 고려하여,

태그를 사용해 WEBP를 지원하지 않는 구형 브라우저 사용자에게는JPEG/PNG 파일을 대체(Fallback)로 제공하는 것이 모범적인 웹 개발 방식입니다.

Q2. LCP 타겟으로 이미지를 사용하는 것이 텍스트를 사용하는 것보다 항상 좋나요?

A: 이미지 자체가 무겁다면 LCP가 지연될 수 있습니다. 그러나 텍스트를 사용할 경우 웹 폰트(Web Font)를 로딩하는 과정에서 지연이 발생하여 LCP가 늦춰지는 경우가 많습니다. 적절히 압축되고 사전 로드된 이미지는 텍스트/폰트 로딩 문제 없이 빠르게 렌더링될 수 있어, LCP 최적화에 효과적인 타겟으로 간주됩니다.

Q3. `loading=”eager”`와 `fetchpriority=”high”` 태그를 함께 사용해야 하는 이유는 무엇인가요?

A: `loading=”eager”`는 이미지를 즉시 로드하라는 지시이며, 이는 기본값과 비슷합니다. 하지만 fetchpriority=”high” 속성은 브라우저에게 이 리소스가 다른 리소스보다 매우 높은 우선순위로 패치되어야 한다고 강력하게 알려줍니다. LCP 요소는 페이지의 핵심이므로, 이 두 속성을 함께 사용하고 “를 통해 HEAD에서 선언하면 가장 빠르게 렌더링되도록 보장 할 수 있습니다.