지연 로딩

지연 로딩은 이미지, 동영상, 콘텐츠 섹션이 뷰포트에 보이기 직전까지 로드를 미루는 기법입니다. 페이지의 초기 로딩 성능을 개선합니다.

지연 로딩의 작동 방식

지연 로딩이 없으면 브라우저는 HTML을 읽는 즉시 페이지의 모든 이미지, 동영상, 리소스를 내려받습니다. 첫 화면에서 멀리 떨어져 있고 사용자가 보지 않을 수도 있는 리소스까지 포함합니다. 이미지가 수십 장인 긴 페이지에서는 대역폭을 낭비하고 페이지가 조작 가능한 상태가 되는 시점을 늦춥니다.

지연 로딩은 요소가 뷰포트 가까이 올 때까지 리소스 로드를 미룹니다. 가장 흔한 구현 방식은 두 가지입니다.

브라우저 기본 지연 로딩은 <img>와 <iframe> 요소에 loading="lazy" 속성을 사용합니다. 요소가 보이는 영역에 가까워진다고 판단하면 브라우저가 내부적으로 리소스를 가져옵니다. JavaScript가 필요하지 않습니다.

Intersection Observer API는 코드로 더 세밀하게 제어합니다. JavaScript 관찰자가 대상 요소를 지켜보다 뷰포트 안이나 가까이에 들어오면 콜백을 실행합니다. 콜백은 자리 표시자나 데이터 속성 대신 실제 src 속성을 설정해 다운로드를 시작합니다. 로딩을 시작할 거리, 애니메이션 실행, 기타 조건을 직접 정할 수 있습니다.

두 방식의 목적은 같습니다. 첫 화면 콘텐츠만 바로 가져오고 나머지는 사용자가 스크롤할 때 필요에 따라 불러와 페이지를 더 빨리 엽니다.

지연 로딩과 스크린샷

지연 로딩은 스크린샷 캡처에 특별한 문제를 만듭니다. 전체 페이지 스크린샷 도구는 보통 뷰포트를 페이지 맨 위에 둔 채 문서 전체 높이를 한 번에 렌더링합니다. 첫 화면 아래의 지연 로딩 요소는 활성화되지 않아 빈 컨테이너, 자리 표시자, 저해상도 썸네일로 찍힙니다.

해결하려면 캡처 전에 페이지를 코드로 스크롤해야 합니다. 헤드리스 브라우저 스크립트가 위에서 아래까지 여러 단계로 내리며 각 지점에서 Intersection Observer 콜백이 실행되고 이미지가 로드되기를 기다릴 수 있습니다. 맨 아래에 도달한 뒤 다시 위로 올라가 모든 콘텐츠가 로드된 페이지를 캡처합니다.

일부 스크린샷 도구는 지연 로딩 요소를 찾아 캡처 과정에서 페이지를 자동으로 스크롤합니다. 직접 조작하지 않아도 빈 영역 없는 전체 페이지 스크린샷을 만듭니다.

지연 로딩 콘텐츠 찾기

페이지가 지연 로딩을 쓰는지 알면 캡처 방식을 정하기 쉽습니다. 다음 표시를 확인하세요.

• <img>와 <iframe> 태그의 loading="lazy" 속성 — 브라우저 기본 구현입니다.
• data-src 또는 data-lazy 속성 — 실제 이미지 URL을 데이터 속성에 보관하다 요소가 뷰포트에 들어오면 JavaScript가 src로 옮기는 흔한 방식입니다.
• 자리 표시자 이미지 — 스크롤할 때 전체 이미지로 바뀌는 작고 흐리거나 단색인 이미지입니다.
• Intersection Observer 사용 — 페이지 JavaScript에서 이미지나 콘텐츠 요소를 감시하는 IntersectionObserver 인스턴스를 찾습니다.
• 프레임워크 전용 구성 요소 — React의 lazy(), Next.js의 Image 구성 요소 같은 프레임워크 도구는 기본적으로 지연 로딩을 구현합니다.

흔한 실수

• 캡처 전에 스크롤하지 않습니다. 지연 로딩 페이지에서 가장 흔한 스크린샷 문제입니다. 캡처 도구가 먼저 페이지를 훑지 않으면 첫 화면 아래 이미지가 결과물에서 빠집니다.
• 로딩 임계값을 너무 높게 설정합니다. 요소가 이미 보인 뒤에야 로딩을 시작하면 이미지가 나타나기 전에 빈 공간이 번쩍 보입니다. 뷰포트에 들어오기 조금 전에 로딩을 시작하세요.
• 첫 화면 콘텐츠를 지연 로딩합니다. 페이지를 열자마자 보이는 이미지와 콘텐츠는 미루지 마세요. 사용자가 처음 보는 화면을 늦추고 Largest Contentful Paint 점수를 떨어뜨립니다. 첫 화면 아래의 리소스만 미루세요.
• JavaScript가 꺼진 환경의 대체 콘텐츠를 잊습니다. 지연 로딩을 JavaScript에만 의존하면 JavaScript를 쓰지 않는 사용자와 크롤러에게 이미지가 보이지 않습니다. <noscript> 대체 콘텐츠나 기본 loading="lazy"를 기준으로 사용하세요.