레이지 로딩(지연 로딩)은 사용자가 화면을 스크롤하여 해당 요소가 뷰포트에 들어올 때까지 이미지나 iframe 같은 비필수 리소스의 로딩을 늦추는 성능 최적화 기법입니다. 이는 초기 페이지 로딩 속도를 획기적으로 개선하고 데이터 낭비를 줄여줍니다. SEO 측면에서의 핵심은 검색 엔진이 이 '지연된' 콘텐츠를 여전히 찾아서 인덱싱할 수 있느냐입니다. 과거의 JavaScript 기반 레이지 로딩은 봇으로부터 URL을 숨기는 문제가 있었지만, 현재의 권장 방식인 '네이티브 레이지 로딩'은 `<img>` 및 `<iframe>` 태그에 `loading="lazy"` 속성만 추가하면 됩니다. 이 방식은 모든 현대적 브라우저에서 지원되며, Googlebot이 `src` 속성을 읽는 데 아무런 문제가 없어 SEO 친화적입니다. 만약 구형 브라우저 지원을 위해 JavaScript 라이브러리를 써야 한다면, Intersection Observer API를 사용하고 `<noscript>` 폴백을 제공하는 Google의 가이드를 따라야 합니다. 중요한 점은, 로고나 히어로 이미지처럼 '스크롤 없이 바로 보이는(above the fold)' 영역의 이미지에는 절대 레이지 로딩을 적용해서는 안 된다는 것입니다. 이는 LCP 점수에 악영향을 줍니다.
단계별 가이드
스크롤 하단 콘텐츠 식별
페이지가 처음 로드될 때 화면에 보이지 않는 이미지와 iframe들을 파악합니다.
Loading 속성 추가
파악된 요소들의 HTML 태그에 `loading="lazy"` 속성을 삽입합니다.
히어로 영역 제외
메인 히어로 이미지나 페이지 상단 콘텐츠에는 레이지 로딩이 적용되지 않도록 제외합니다.
이미지 크기 명시
이미지가 로드될 때 레이아웃이 틀어지는 것을 방지하기 위해 항상 width와 height 속성을 포함합니다.
인덱싱 테스트
GSC(Google Search Console)의 URL 검사 도구를 사용해 Google이 레이지 로딩된 이미지를 여전히 인식하는지 확인합니다.
전문가 팁
- 더 나은 성능을 위해 레이지 로딩을 'decoding="async"' 속성과 함께 사용해 보세요.
- 로딩 중 사용자 경험을 위해 저화질 이미지 플레이스홀더(LQIP)나 단색 블록을 활용하십시오.
- 모바일은 '화면 상단' 기준이 PC와 다르므로 모바일 기기에서의 레이지 로딩 범위를 별도로 체크하세요.
- 레이지 로딩이 '인쇄용(Print)' 스타일시트와 충돌하여 이미지가 누락되지 않는지 확인하십시오.
pSeoMatic의 도움을 받는 방법
pSeoMatic의 감사 엔진은 사이트 전반의 레이지 로딩 구현 상태를 정밀하게 점검합니다. 잘못 적용되어 페인트 성능(LCP)을 저하시키는 히어로 이미지부터, 레이지 로딩이 누락되어 페이지를 무겁게 만드는 하단 미디어까지 찾아냅니다. pSeoMatic과 함께라면 속도와 인덱싱이라는 두 마리 토끼를 모두 잡을 수 있습니다.
pSeoMatic 무료로 체험하기관련 질문
Google이 레이지 로딩된 이미지를 인덱싱할 수 있나요?
네, 네이티브 `loading="lazy"` 속성이나 SEO 친화적인 JS 방식을 사용한다면 Googlebot은 문제없이 인덱싱합니다.
레이지 로딩이 PageSpeed 점수에 도움이 되나요?
매우 큰 도움이 됩니다. 초기 페이지 용량을 줄이고 상호작용 시작 시간(TTI)을 앞당겨 줍니다.
로고에도 레이지 로딩을 적용해야 할까요?
아니요, 로고는 대개 페이지 최상단에 위치하므로 즉시 로드되도록 두는 것이 좋습니다.
관련 가이드
이 내용을 바로 실행에 옮길 준비가 되셨나요?
pSeoMatic은 귀하의 데이터를 기반으로 수천 개의 SEO-optimized 페이지를 생성합니다.