검색엔진 최적화 기본 가이드 중 이번 시간에는 LCP(Largest Contentful Paint) 성능을 개선 방안에 대한 이야기를 해보려 합니다. 지난 포스팅 중 레이아웃 변경 횟수(CLS), 메타태그 및 스키마 표준 가이드 글도 참조하면 도움이 될 것이라 생각 합니다. 왜 내 사이트는 검색엔진에 노출이 안되는 것일까를 고민하는 분들에게 하고 싶은 말은 검색엔진이 좋아하는 페이지가 되기 위해 노력을 했는지 먼저 자문해 보라고 합니다. 뭘 좋아하고 뭘 싫어 하는지 알고 싶으면 https://pagespeed.web.dev/ 사이트에서 사이트 분석을 해보면 그 답을 알려줍니다. 분석을 해석하고 고쳐가는 과정이 힘들어서 그렇지 뭘 싫어하는지는 조금만 노력하면 알 수 있습니다.
LCP란 무엇인가요?
LCP(Largest Contentful Paint)는 코어 웹 바이탈(Core Web Vitals) 요소 중 사용자가 처음 화면에서 볼 수 있는 가장 큰 콘텐츠(주로 이미지나 텍스트 블록)가 로딩되는 시간을 측정합니다. (출처: https://web.dev/articles/lcp)
- 측정 시작점: 페이지가 처음 로드되기 시작하는 순간
- 측정 범위: 사용자가 보고 있는 화면(Viewport) 내의 블록 요소
좋은 LCP 기준은?
To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
일반적으로 모든 페이지 로드 시간을 측정한 후, 가장 빠른 75%의 사용자까지는 2.5초 이하의 로딩 시간을 경험해야 한다는 뜻입니다. 예를 들어, 100명의 사용자가 웹사이트를 방문했다고 가정하면, 그들의 페이지 로드 시간을 빠른 순서대로 정렬했을 때, 상위 75%의 LCP 값이 2.5초 이하라면 "좋은 LCP"를 충족한 것이 됩니다. 이는 전체 사용자 경험을 대표하는 지표로 사용되며, 특정 소수의 사용자만 빠르게 로드되는 것이 아니라, 대다수의 사용자(최소 75%)가 원활한 경험을 하도록 보장하는 기준이 됩니다.
Lazy loading이 LCP에 미치는 영향과 개선 방법
의미?
LCP는 사용자가 처음 화면에서 볼 수 있는 가장 큰 콘텐츠(주로 이미지나 텍스트 블록)가 로딩되는 시간을 측정하는 지표입니다. 반면, Lazy loading은 이미지가 실제로 화면에 보일 때까지 로딩을 지연시키는 기술입니다. 따라서, 첫 화면(뷰포트 내)에 있는 이미지에 lazy loading을 적용하면, 사용자가 페이지에 접속했을 때 해당 이미지가 즉시 로딩되지 않고 지연되므로, LCP 점수가 악화될 수 있습니다.
개선 방법
첫 화면에 보이는 주요 이미지(특히 LCP 후보가 될 수 있는 큰 이미지)에는 lazy loading을 적용하지 않고 화면 아래쪽(사용자가 스크롤해야 볼 수 있는 부분)의 이미지에만 lazy loading을 적용하는 방법이 있습니다.
예: <img> 태그에서 loading="lazy" 속성을 제거
이를 통해 불필요한 초기 로딩을 줄이면서도 LCP 성능을 개선할 수 있습니다. 이와 같은 방식으로 lazy loading을 적절히 활용하면, 초기 로딩 속도를 최적화하면서도 LCP 점수를 개선할 수 있습니다.
LCP 요소의 가변성과 프리로딩 적용 방법
뷰포트 크기에 따라 가변적으로 LCP 요소가 선정되므로, 가능성이 있는 여러 개의 이미지에 모두 프리로딩을 적용해야 합니다. 조금 더 쉽게 말해 내가 뭘로 웹을 보냐에 따라 해상도가 모두 다를 것이고 LCP 요소로 선택되는 이미지도 모두 달라질 수 있기 때문에 가장 가능성 있는 요소에 프리로딩 적용해야 한다는 말입니다.
데스크톱에서는 큰 배경 이미지가 LCP 요소가 될 수 있고, 모바일에서는 상대적으로 작은 메인 배너 이미지가 LCP 요소가 될 수 있습니다.
이처럼 어떤 이미지가 LCP 요소가 될지는 뷰포트 크기에 따라 달라질 수 있으므로, 특정 한 개의 이미지에만 최적화를 적용하면 충분하지 않을 수 있습니다.
개선 방법
가능성이 있는 모든 LCP 후보 이미지에 프리로딩을 적용해야 합니다. HTML <head> 태그 내에서 <link rel="preload"> 태그를 사용하여 LCP 요소가 될 가능성이 있는 모든 이미지의 로딩을 미리 요청합니다.
<link rel="preload" as="image" href="hero-image.jpg">
<link rel="preload" as="image" href="banner-image.jpg">
GeneratePress 차일드 테마에 적용하는 방법
Lazy Loading 조정
차일드 테마의 functions.php 파일에 다음 코드를 추가하세요:
function disable_lazy_loading_for_key_images($attr) {
// 헤더, 히어로 이미지 등 첫 화면에 표시되는 주요 이미지를 확인
// 클래스명은 실제 사이트에서 사용하는 것으로 변경해야 합니다
if (strpos($attr['class'], 'site-logo') !== false ||
strpos($attr['class'], 'hero-image') !== false ||
strpos($attr['class'], 'featured-image') !== false) {
$attr['loading'] = 'eager'; // lazy loading 비활성화
}
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'disable_lazy_loading_for_key_images');
중요 이미지 프리로딩
차일드 테마의 functions.php 파일에 다음 코드도 추가하세요:
function preload_critical_images() {
// 사이트 로고, 헤더 이미지 등 LCP 요소가 될 수 있는 이미지들을 프리로드
// 아래 URL은 실제 이미지 경로로 변경해야 합니다
// 로고 이미지 프리로드 예시
$logo_url = get_theme_mod('custom_logo') ? wp_get_attachment_image_url(get_theme_mod('custom_logo'), 'full') : '';
if ($logo_url) {
echo '<link rel="preload" as="image" href="' . esc_url($logo_url) . '">';
}
// 헤더 이미지 프리로드 예시
if (has_header_image()) {
echo '<link rel="preload" as="image" href="' . esc_url(get_header_image()) . '">';
}
// 첫 화면에 표시되는 다른 중요 이미지들
// 홈페이지 히어로 이미지 예시 (경로는 실제 이미지 경로로 수정)
if (is_front_page()) {
echo '<link rel="preload" as="image" href="' . get_stylesheet_directory_uri() . '/assets/images/hero.jpg">';
}
}
add_action('wp_head', 'preload_critical_images', 1);
마무리
검색엔진 최적화는 하면 할 수록 어려운것 같습니다. 하지만 그들이 좋아하는 것을 알고 맞춰 갈려고 노력한다면 언젠가는 내 사이트도 그들과 함께 어울리는 경지에 있지 않을까란 생각으로 오늘도 검색엔진과 친해지기 위해 공부해 봤습니다.