검색 엔진 최적화 LCP 2
검색엔진 최적화 작업 중 LCP 속도 향상을 위해 이미지를 타겟으로 사용하는 방법입니다. 검색 엔진의 최적화 작업 중 LCP는 최초 로딩 중 가장 큰 콘텐츠의 로딩 속도입니다. 검색엔진 최적화 속도는 측정 대상인 콘텐츠의 로딩과 연관이 있기 때문에 이미지의 최적화를 통해 로딩속도를 향상시키는 방안입니다.
검색엔진 최적화의 방법으로 이미지보다 텍스트가 더 빠를 수 있습니다. 그러나 왜 이미지를 타겟으로 선택했는지에 대한 간단한 제 생각을 말씀드리겠습니다. 이미지가 아닌 텍스트를 이용해 타겟으로 지정했을 경우 폰트의 로딩과 연관이 있으며, 폰트를 제외시키면 디자인적인 면에서 부담스럽기 때문입니다. 또한 실제 테스트를 진행했을 때 속도 면에서 큰 차이가 발생하지 않았습니다.
현재로서는 이미지를 이용한 LCP 타겟 방법이 현실적인 방법일 것으로 판단해 진행합니다. 검색 엔진의 최적화를 위해 LCP 타겟으로 이미지를 사용할 때 고려해야 할 사항입니다.
검색 최적화 이미지 작업
- 이미지를 웹용 이미지로 변환
- 이미지를 압축하거나 최적의 사이즈로 변환
- 이미지를 모바일용과 데스크탑용으로 제작
- 이미지 사이즈는 뷰포인트를 넘어가지 말아야 함
- 이미지 사전 로드와 우선순위 지정 태그 사용
검색엔진 최적화의 속도를 향상하기 위해서 먼저 이미지를 제작해 보세요. 상단 이미지는 가장 노출이 잘 되는 곳이라 단순히 검색 최적화를 위해 활용하기는 너무 아까운 공간입니다. 그러나 주의할 점은 검색 최적화의 기본 의미를 상실시키는 복잡한 이미지와 용량이 큰 이미지만 피하시면 됩니다.
이미지 제작은 두 가지로 진행합니다. 모바일 버전과 PC 버전입니다. 각각의 사이즈는 개별적인 선택 사항이 될 수 있지만 너무 작거나 너무 크지 않으면 됩니다. 너무 작은 경우 검색 엔진 최적화 LCP의 타겟이 다른 요소로 지정될 수 있고, 너무 크게 되면 오히려 다른 요소가 더 긍정적일 수 있습니다.
대략적으로 저는 검색엔진 최적화의 사이즈를 모바일 버전은 가로 300 세로 100 이내로 지정하며, PC 버전은 가로 500 세로 200 이내로 지정하기를 권장드립니다.
제작이 완료되었다면 웹용 이미지로 변환하세요. 이미 웹용 이미지로 제작했다면 넘어가셔도 됩니다. 또한 이미지 파일을 좀 더 작게 압축시키면 효율이 향상됩니다.그러나 큰 파일은 압축하는 것이 효과가 있지만 작은 용량은 그대로 사용하는 것이 좋을 것 같습니다.
이미지가 완성되었다면 이미지의 위치를 결정하세요. 검색엔진 최적화의 속도를 높이기 위해서 사이드, 상단, 하단 어느 위치든 상관 없습니다. 그러나 뷰포인트를 벗어나면 검색최적화의 타켓에 의미가 없으므로 첫 로딩 화면에 노출되어야 합니다. 저는 가장 안전한 중앙 상단을 선택했습니다.
검색최적화를 위해서 이미지를 코딩하시면 됩니다. 사전 로드와 우선순위를 지정하세요. 그러면 이미지가 좀 더 빨리 로딩됩니다. 검색최적화의 이미지 로딩 속도 관련 태그는 preload와 high 입니다. 이미지는 뷰포인트의 사이즈, 즉 모바일과 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="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의 속도가 향상되는 것은 아닙니다. 우선 관리 가능한 타겟을 지정해서 운영자가 관리할 수 있는 상태에서 최적화 작업을 진행해야 합니다. 무작위 타겟을 관리하는 것은 시스템 전반에 관련된 모든 코드 작업을 진행해야 하기 때문에 작업이 힘들고, 자신이 직접 코딩할 수 있는 사이트가 아니면 불가능합니다. 이제는 낮에도 야한 광고가 나옵니다. 다음에는 이미지의 속도 향상에 대한 코드작업을 진행하겠습니다.
