레이지 로딩 가정한 배치 장면으로 읽기

간추린 개념 스케치

화면에 보일 때가 되면 그림이나 영상을 불러오는 처리이며, 첫 화면 전송량을 줄이는 데 쓰인다. 이 요소는 범례를 붙인 방식에 따라 Lazy Loading, 지연 로딩이라고 줄여 적어 두는 일도 있다.¹

가설의 사이트 하나

검색엔진최적화를 염두에 두고 칸을 묶는 자리에서 이 요소가 어느 층에 걸리는지 가정한 장면 하나로 가늠해 본다.² 예를 들어 사례 사진이 수십 장인 문서라면, 첫 화면 사진만 바로 불러오고 나머지는 내려갈 때 불러오는 배치가 맞는다.

장면 뒤의 사정

장면에서 한 걸음 물러나 노트를 앞으로 넘기면 레이지 로딩이 챙길 칸이 된 내력이 꼽힌다. 문서 하나에 들어가는 그림이 많아지면서 처음부터 모두 내려받는 방식이 첫 화면을 느리게 만들자, 필요한 시점에 불러오는 처리가 표준 기능으로 들어왔다.

사례가 작동하는 원리

장면에 얹힌 순서대로 가닥을 풀면 이 요소의 짜임이 장면 안에서 드러난다. 브라우저는 요소가 화면에 가까워질 때 요청을 보내므로 처음 받는 자원이 줄어들고, 크롤러는 화면을 넓게 잡아 수집하지만 끝까지 불러오지 않는 경우도 있다.

도면 대조 확인 경로

칸과 층을 아울러 보는 순서는 콘텐츠설계 쪽에 순서대로 실려 있다. 그려 본 도면을 쓰고 있는 도면으로 바꾸면 맞춰 볼 자리는 이렇게 세워진다. 개발자 도구 네트워크 탭에서 내려갈 때마다 요청이 늘어나는지 보고, 서치 콘솔 화면 보기에서 그림 자리가 비어 있지 않은지 확인한다.

사례 속 작업자의 챙길 일

가정한 사이트의 작업 지시를 받으면 레이지 로딩을 두고 하는 대표 작업은 이렇게 세워진다. 첫 화면에 들어가는 그림은 지연 대상에서 빼고, 나머지에는 브라우저 기본 속성을 써 스크립트 의존을 줄인다.

그림이 틀어지는 함정

꾸민 도면이 실물과 어긋나는 데를 짚으면 레이지 로딩을 손볼 때 걸리는 지점은 이렇게 갈린다. 첫 화면에 보이는 큰 그림에까지 걸면 화면 완성이 늦어지고, 스크립트에만 의존해 만들면 수집 단계에서 그림이 빠질 수 있다.

짝처럼 묶이는 개념과의 차이점

이름의 모양이 닮아 보여서 이 요소와 함께 정리할 개념이 표에 나란히 있다. 자원을 미리 받아 두는 처리와 달리, 이쪽은 요청 시점을 뒤로 미뤄 첫 화면의 짐을 덜어 낸다.

오래 굳은 통념

사례만 보고 짐작한 조언 가운데 레이지 로딩에 대해 자주 틀리는 곳은 이렇게 드러난다. 모든 그림에 걸면 속도가 좋아진다고 보기 쉬우나, 첫 화면 요소에 걸면 오히려 화면이 그려지는 시점이 늦어진다.

끝에 남길 쪽지

검색엔진최적화를 두고 쌓아 두는 작업 노트에 레이지 로딩을 여백에 한 문장으로 남긴다면 이렇다. 자원을 필요한 시점에 불러와 첫 화면 전송량을 줄이는 처리이며, 적용 범위를 가리는 일이 중요하다.

더 볼 표제어

장면 노트 옆에 끼워 둔 항목으로는 이미지 최적화와 대체 텍스트가 두 칸이 나란히 있다. 나머지 참고 자리에 남겨 둔 쪽으로는 페이지네이션과 TTFB 칸도 나란히 적혀 있다. 그림 준비 자체는 이미지 최적화에서 다루고, 요소 설명은 대체 텍스트로 남겨 두어야 수집 단계에서 내용이 전해진다.