Lazy Loading

지연 로딩은 화면 밖 리소스를 뷰포트에 들어오기 직전까지 불러오지 않는 웹 기법입니다. 이미지, iframe, 동영상, 페이지의 일부 영역에 사용됩니다.

브라우저는 HTML Living Standard에 정의된 기능으로 img와 iframe 요소의 loading 속성을 lazy로 설정해 지연 로딩을 지원합니다. 사이트는 보통 IntersectionObserver API를 사용해 JavaScript로도 구현합니다. 이 API는 요소가 보이는 영역에 가까워지는 시점을 알려 줍니다.

리소스가 로드되기 전까지 페이지는 자리 표시자를 보여 줍니다. 빈 상자, 단색, 흐린 미리 보기, 로딩 아이콘이 여기에 해당합니다. 지연 로딩은 처음 로드되는 페이지 용량을 줄이고 첫 화면 표시를 빠르게 합니다.

지연 로딩의 동작 방식

1. 페이지가 화면 밖 이미지를 자리 표시자로 로드합니다.
2. 브라우저 또는 스크립트가 각 자리 표시자의 위치를 확인합니다.
3. 사용자가 근처까지 스크롤하면 실제 파일을 요청합니다.
4. 파일이 도착하면 이미지가 자리 표시자를 대체합니다.

무한 스크롤도 같은 방식으로 콘텐츠를 불러옵니다. 사용자가 목록의 끝에 도달하면 새 항목을 가져옵니다.

지연 로딩과 스크린샷

전체 페이지를 한 번에 렌더링하는 전체 페이지 캡처는 스크롤하지 않으므로, 첫 화면 아래의 지연 콘텐츠를 요청하지 않을 수 있습니다. 결과에는 빈 상자나 흐린 미리 보기가 남습니다. 뷰포트 캡처는 보이는 부분만 저장하므로 영향을 덜 받습니다.

지연 로딩된 콘텐츠 찾기

• 전체 페이지 캡처의 아래쪽에서 빈 상자나 회색 상자를 찾습니다.
• 페이지를 직접 스크롤하면서 서서히 나타나는 이미지를 확인합니다.
• 브라우저 DevTools에서 이미지 요소의 loading 속성이나 자리 표시자 소스를 확인합니다.
• 바로 찍은 캡처와 잠시 기다린 뒤 찍은 캡처를 비교합니다.

Temposhot Website Capture에서는 Wait 설정으로 Network idle을 선택하거나 0-60초의 지연 시간을 추가할 수 있습니다. Temposhot Full Page Screenshot 확장 프로그램은 캡처하는 동안 활성 페이지를 스크롤하므로, 스크롤로 로드되는 이미지도 불러옵니다.

자주 하는 실수

• load 이벤트 시점에 캡처하고 페이지가 완전히 로드되었다고 가정함.
• 스크롤 없이 긴 지연 시간만 설정함. 스크롤로 로드되는 이미지에는 효과가 없습니다.
• 무한 스크롤 페이지를 "전체 페이지"로 캡처함. 이 방식은 끝나지 않습니다.
• 작은 크기에서는 로드된 것처럼 보이는 흐린 자리 표시자 이미지를 무시함.

같은 스크린샷을 반복해서 찍고 있나요?

Wait 조건을 한 번 설정하고, 웹사이트 스크린샷 자동화에서 모든 URL에 같은 설정을 재사용합니다.

자주 묻는 질문

지연 시간을 늘리면 지연 로딩 이미지가 해결되나요?

타이머나 네트워크 활동 이후에 콘텐츠가 로드되는 경우에는 도움이 됩니다. 스크롤로 로드되는 콘텐츠에는 스크롤이 필요합니다.

내 사이트에서는 지연 로딩을 쓰지 않아야 하나요?

아닙니다. 지연 로딩은 속도를 높입니다. 첫 화면에 보이는 이미지는 지연 없이 즉시 로드되도록 합니다.

출처

• Lazy loading (Wikipedia)
• HTML Living Standard: URLs and fetching

관련 자료

• 웹사이트 캡처 옵션: 대기 및 지연 설정.
• 전체 페이지 스크린샷: 페이지 전체 높이 캡처.