[ LCP 속도 최적화 ]콘텐츠 표시 시간 LCP 속도 향상을 위한 이미지 최적화

이미지 활용으로 페이지 로딩 시간 단축하기

LCP 속도 최적화

검색엔진 최적화 작업 중 LCP 속도 향상을 위해 이미지를 타겟으로 사용하는 방법입니다. 검색 엔진의 최적화 작업 중 LCP는 최초 로딩 중 가장 큰 콘텐츠의 로딩 속도입니다. 검색엔진 최적화 속도는 측정 대상인 콘텐츠의 로딩과 연관이 있기 때문에 이미지의 최적화를 통해 로딩속도를 향상시키는 방안입니다.

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

이미지를 활용해서 LCP를 최적화 하는 방법입니다.

LCP 정의

LCP(최대 콘텐츠 표시 시간): 페이지 로딩 시 가장 큰 콘텐츠가 표시되는 시간.

LCP 최적 이미지 활용

• 이미지 타겟: LCP 속도 향상을 위해 이미지를 최적화하는 방법.
• 텍스트 vs 이미지: 이미지가 텍스트보다 디자인적으로 더 효과적이며, 폰트 로딩 문제를 피할 수 있음.

이미지 설정 및 주의 사항

• 관리 가능한 타겟 설정: 무작위 타겟 관리보다 운영자가 직접 관리할 수 있는 타겟을 설정
• 지속적인 모니터링: 최적화 작업 후에도 지속적으로 성과를 점검하고 조정 필요.
• 이미지를 웹용 이미지로 변환
• 이미지를 압축하거나 최적의 사이즈로 변환
• 이미지를 모바일용과 데스크탑용으로 제작
• 이미지 사이즈는 뷰포인트를 넘어가지 말아야 함
• 이미지 사전 로드와 우선순위 지정 태그 사용

이미지로 최적화 활용 세부 사항

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

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

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

웹용 이미지로 변환 및 압축

제작이 완료된 이미지는 웹용 이미지로 변환해야 하며, 이미 웹용으로 제작된 경우에는 이 단계를 생략할 수 있습니다. 추가로, 이미지 파일 크기를 적절히 압축하여 효율성을 높이는 것이 중요합니다.

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

이미지 코딩

마지막으로, 검색 최적화를 위해 이미지를 코딩할 때는 사전 로드와 우선순위를 지정하는 것이 중요합니다. 이를 통해 이미지를 더 빨리 로딩할 수 있습니다. 이미지 로딩 속도와 관련된 태그로는 preload 와 fetchpriority가 있습니다.

코드는 아래를 참고하세요.

<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="openipc"  <!-- 대체 텍스트 -->
            class="responsive-image"  <!-- 클래스명 -->
            loading="eager"  <!-- 이미지 로딩 방식 설정 -->
            width="500"  <!-- 이미지의 너비 -->
            height="189">  <!-- 이미지의 높이 -->
    </picture>
</div>

그리고 이 코드를 글 페이지 상단이나 제목 아래 위치해서 넣어주시면 됩니다. 그리고 한 가지 더 잊지 말아야 할 것은 HEAD 부분에 이미지를 먼저 로딩해 달라고 요청해야 합니다.

그 요청 코드는 아래와 같습니다.

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

<!-- 두 번째 이미지 사전로드 -->
<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 속도 최적화

 

아래와 같이 본인이 제작한 이미지가 LCP 타겟이 되었다면 작업은 완료된 것입니다. 물론 이 작업만으로 LCP의 속도가 향상되는 것은 아닙니다.

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