구조·마크업 · 공식 문서
레이지 로딩 SEO, 색인에 안전한 구현 선택 기준
화면에 들어올 때 불러오는 방식(브라우저 내장 loading="lazy", IntersectionObserver, 화면 진입 감지 라이브러리)이면 구글이 콘텐츠를 볼 수 있습니다. 스크롤이나 클릭에 묶어 불러오면 구글 검색은 그 동작을 하지 않으므로 콘텐츠가 빠질 수 있습니다.
지연 로딩은 화면 밖 이미지를 나중에 불러와 첫 화면을 빨리 띄우는 방법입니다. 구글도 흔한 성능 권장사항으로 적었습니다.
문제는 구현 방식입니다. 사용자가 스크롤해야 불러오게 짜면, 스크롤하지 않는 구글에게는 그 이미지와 문장이 없는 페이지가 됩니다.
발견 01
색인에 안전한 지연 로딩은 화면에 들어올 때 불러오는 3가지 방식입니다
The methods mentioned don't rely on user actions, such as scrolling or clicking, to load content, which is important as Google Search does not interact with your page.
위 방식들은 스크롤·클릭 같은 사용자 동작 없이 콘텐츠를 불러옵니다. 구글 검색은 페이지와 상호작용하지 않으므로 이 점이 중요합니다.
| 방식 | 색인 판단 | 쓰는 자리 | 공식 문서 원문 |
|---|---|---|---|
| 브라우저 내장 loading="lazy" | 안전. 화면에 가까워지면 브라우저가 불러옵니다. | 첫 화면 아래의 이미지·iframe | Browser built-in lazy-loading for images and iframes이미지와 iframe 에 브라우저 내장 지연 로딩을 씁니다. |
| IntersectionObserver API | 안전. 요소가 화면에 들어오는 것을 감지해 불러옵니다. | 직접 만든 카드 목록·위젯 | IntersectionObserver API and a polyfillIntersectionObserver API 와 폴리필을 씁니다. |
| 화면 진입 감지 자바스크립트 라이브러리 | 안전. 화면 진입 기준으로 동작하는 라이브러리일 때만입니다. | 이미 라이브러리를 쓰는 사이트 | A JavaScript library that supports loading data when it enters the viewport화면에 들어올 때 데이터를 불러오는 자바스크립트 라이브러리를 씁니다. |
| 스크롤·클릭 이벤트에 묶은 불러오기 | 빠질 수 있음. 구글 검색은 스크롤·클릭 없이 페이지를 봅니다. | 쓰지 않고 위 세 방식으로 바꿉니다 | The methods mentioned don't rely on user actions, such as scrolling or clicking, to load content, which is important as Google Search does not interact with your page.위 방식들은 스크롤·클릭 같은 사용자 동작 없이 콘텐츠를 불러옵니다. 구글 검색은 페이지와 상호작용하지 않으므로 이 점이 중요합니다. |
| 첫 화면 콘텐츠에 지연 로딩 | 표시가 늦어짐. 사용자가 바로 알아챌 만큼 늦게 뜹니다. | 첫 화면 이미지는 기본 로딩으로 둡니다 | Don't add lazy-loading to content that is likely to be immediately visible when a user opens a page.페이지를 열자마자 보일 콘텐츠에는 지연 로딩을 넣지 않습니다. |
고르는 기준은 하나입니다. 「사용자가 무엇을 해야 불러오는가」가 아니라 「화면에 보이면 불러오는가」입니다.
탭·아코디언·더보기 버튼 뒤에 둔 문장도 같습니다. 누른 뒤에야 서버에서 받아 오는 구조라면 구글은 그 문장을 받지 못할 수 있습니다.
발견 02
첫 화면 이미지는 지연 로딩에서 빼고, 아래쪽 요소만 loading="lazy" 로 둡니다
Don't lazy-load images that are likely to be in-viewport when the page loads, especially LCP images.
페이지가 열릴 때 화면 안에 있을 이미지, 특히 LCP 이미지는 지연 로딩하지 않습니다.
| 요소 | 쓰는 속성 | 확인할 것 | 공식 문서 원문 |
|---|---|---|---|
| img | loading="lazy" · width · height | 첫 화면 이미지(특히 LCP 이미지)는 빼기 | Don't lazy-load images that are likely to be in-viewport when the page loads, especially LCP images. we recommend adding width and height attributes to all <img> tags.첫 화면 이미지, 특히 LCP 이미지는 지연 로딩하지 않습니다. 모든 img 태그에 width·height 속성을 넣기를 권합니다. |
| iframe | loading="lazy" | 지도·영상처럼 첫 화면 아래에 있는 것만 | <iframe loading=lazy> has also been standardized.iframe 의 loading=lazy 도 표준이 되었습니다. |
| video | loading="lazy" · preload="none" · poster | 지원하지 않는 브라우저는 속성을 무시하므로 preload 를 함께 | Browsers have started to support the loading attribute on media elements (<video> and <audio>). Therefore, the best chance of avoiding loading the video is with using preload="none".브라우저들이 video·audio 요소의 loading 속성을 지원하기 시작했습니다. 영상 로딩을 피하는 가장 확실한 방법은 preload="none" 입니다. |
| CSS 배경 이미지 | 없음 | 색인되어야 할 상품·본문 이미지는 img 요소로 | Can CSS background images use the loading attribute? No, you can only use it with <img> tags.CSS 배경 이미지에는 loading 속성을 쓸 수 없고, img 태그에만 쓸 수 있습니다. |
발견 03
무한 스크롤은 덩어리마다 고유 URL을 주고 순서대로 링크해야 뒤쪽까지 색인됩니다
| 할 일 | 공식 문서 원문 |
|---|---|
| 덩어리마다 고정된 고유 URL | Give each chunk its own persistent, unique URL.덩어리마다 바뀌지 않는 고유 URL을 줍니다. |
| 같은 URL에는 늘 같은 내용 | Ensure that the content shown on each URL remains the same every time it's loaded in a browser.각 URL에 보이는 내용은 브라우저에서 열 때마다 같아야 합니다. |
| 절대 페이지 번호 사용 | One way this can be done is to use absolute page numbers in the URL, for example by using ?page=12 as a query parameter. Avoid using relative elements like ?date=yesterday in these URLs.URL에 ?page=12 처럼 절대 페이지 번호를 쓰는 방법이 있습니다. ?date=yesterday 같은 상대 값은 피합니다. |
| URL끼리 순서대로 링크 | Link sequentially to the individual URLs so that search engines can discover the URLs in a paginated set.검색엔진이 나뉜 URL들을 찾을 수 있게 순서대로 링크합니다. |
| 스크롤하면 주소창 URL 바꾸기 | When a new page chunk is loaded in response to the user scrolling, and it becomes the primary visible element for the user, update the displayed URL using the History API.스크롤로 새 덩어리를 불러와 그것이 주로 보이게 되면 History API 로 주소창 URL을 바꿉니다. |
발견 04
구현이 맞는지는 URL 검사 도구의 렌더링된 HTML에서 src 속성으로 확인합니다
If your image or video URLs appear in the src attribute on the <img> or <video> elements in the rendered HTML, your setup works correctly.
렌더링된 HTML의 img·video 요소 src 속성에 이미지·동영상 URL이 있으면 설정이 제대로 된 것입니다.
| 순서 | 확인할 것 |
|---|---|
| 1 | 서치 콘솔 URL 검사 도구에 대표 페이지 URL을 넣고 「실제 URL 테스트」를 누릅니다. |
| 2 | 「테스트된 페이지 보기」에서 렌더링된 HTML을 엽니다. |
| 3 | 첫 화면 아래 이미지의 img 요소에 실제 이미지 URL이 src 로 들어 있는지 찾습니다. |
| 4 | data-src 같은 다른 속성에만 URL이 있고 src 가 비어 있으면 구현을 바꿉니다. |
| 5 | 탭·더보기 뒤에 있던 문장도 렌더링된 HTML에 있는지 검색합니다. |
발견 05
지연 로딩이 콘텐츠를 숨기는 자리는 B2B·B2C·B2G 사이트마다 다릅니다
예시 ① 쇼핑몰의 상품 목록 이미지(B2C)
상품 이미지 URL을 data-src 에만 두고 스크롤 이벤트로 src 를 채우는 구조입니다. 사람에게는 잘 보여도 렌더링된 HTML에는 빈 src 가 남습니다.
브라우저 내장 loading="lazy" 로 바꾸고, 첫 줄 상품 이미지는 기본 로딩으로 둡니다.
예시 ② 문의형 기업 사이트의 제품 사양 탭(B2B)
사양표를 탭을 눌러야 서버에서 받아 오게 만든 경우입니다. 구매 담당자가 검색하는 품번과 규격이 그 표에 있습니다.
사양 문장은 처음 HTML에 넣고 탭은 보이기만 바꾸게 합니다. 렌더링된 HTML에서 품번이 검색되는지 확인합니다.
예시 ③ 공공기관 누리집의 보도자료 목록(B2G)
보도자료를 무한 스크롤로 이어 붙이면 지난 자료가 검색에서 사라집니다. 덩어리마다 ?page= 번호 URL을 두고 순서대로 링크합니다.
주소창 URL도 함께 바꾸면 시민이 특정 목록 위치를 공유할 수 있습니다.
그럼 지금 사이트의 지연 로딩은 어떤 순서로 고치나요?
- 대표 페이지(상품 목록·제품 상세·자료 목록)를 고르고 URL 검사 도구로 렌더링된 HTML을 엽니다.
- 이미지 src 가 비어 있거나 탭 뒤 문장이 없으면, 불러오는 방식이 스크롤·클릭에 묶여 있는지 봅니다.
- 묶여 있으면 위 3가지 중 하나로 바꿉니다. 대부분은 브라우저 내장 loading="lazy" 로 충분합니다.
- 첫 화면 이미지에서는 loading="lazy" 를 걷고, 모든 img 에 width·height 를 적습니다.
- 무한 스크롤 목록은 덩어리마다 ?page= URL과 순서 링크를 붙입니다.
- 고친 뒤 같은 페이지를 다시 테스트해 src 와 문장이 렌더링된 HTML에 있는지 확인합니다.
조사 방법
- Google Search Central 「Fix lazy-loaded content」 (문서 수정일 2025-12-10) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading
- web.dev 「Browser-level image lazy loading for the web」 (문서 수정일 2024-08-13) · 최종 확인일 2026-10-25 · https://web.dev/articles/browser-level-image-lazy-loading
- web.dev 「Lazy loading video」 (문서 수정일 2026-07-02) · 최종 확인일 2026-10-25 · https://web.dev/articles/lazy-loading-video
- 방식 5가지와 요소 4가지는 위 문서들이 적은 구현 방법과 주의를 색인 기준으로 나눠 묶은 것입니다. 묶는 방식은 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 원문은 영어판(hl=en)이고, 「URL 검사 도구」·「렌더링된 HTML」은 같은 문서 한국어판(hl=ko) 표기를, 「실제 URL 테스트」·「테스트된 페이지 보기」는 「구글 URL 검사 결과 보는 법과 실제 테스트 비교 순서」 편이 확인한 서치 콘솔 화면 표기를 따랐습니다.