게으른로드

지연 로딩은 리소스 로딩을 필요할 때까지 연기하는 기술로, 일반적으로 이미지, iframe, 컴포넌트 등이 화면에 보이는 영역에 가까워질 때까지 로딩을 지연시키는 방식을 사용합니다. 이 기술의 목적은 초기 화면 렌더링에 필요한 작업량을 줄여, 방문자가 바로 볼 수 있는 콘텐츠가 화면 아래쪽에 위치하여 전혀 보이지 않을 수도 있는 콘텐츠와 대역폭 및 처리 능력을 놓고 경쟁하지 않도록 하는 것입니다.

이미지와 iframe의 경우, 브라우저의 기본 속성을 이용하면 자바스크립트 없이도 해당 요소를 처리할 수 있기 때문에 코드 분할 기법을 적용하는 것이 간단해졌습니다. 브라우저는 뷰포트와의 거리 및 연결 상태를 고려하여 로딩 시작 시점을 결정합니다. 컴포넌트와 라우트의 경우, 라우트 방문이나 기능 사용 시점까지 자바스크립트 번들 로딩을 연기함으로써 동일한 효과를 얻을 수 있습니다. 이를 통해 페이지가 상호 작용 가능하게 되기 전에 다운로드 및 실행해야 하는 스크립트 양을 크게 줄일 수 있습니다.

가장 흔하고 치명적인 실수는 초기 화면 콘텐츠를 포함하여 모든 콘텐츠에 지연 로딩을 무분별하게 적용하는 것입니다. 히어로 이미지를 지연 로딩하면 콘텐츠 표시 시간(contentful paint) 측정에서 가장 큰 영향을 미치는 요소의 로딩이 지연되어, 지연 로딩을 전혀 적용하지 않는 것보다 더 나쁜 결과를 초래합니다. 올바른 패턴은 화면 상단의 콘텐츠는 우선 순위 힌트를 사용하여 즉시 로딩하고, 화면 하단의 콘텐츠만 지연 로딩하는 것입니다. 플러그인이나 전역 설정을 통해 일괄적으로 적용하면 성능 최적화 후 사이트 로딩 성능이 오히려 악화되는 경우가 많습니다.

레이아웃 안정성은 두 번째 고려 사항입니다. 예약된 공간 없이 지연 로딩되는 이미지는 로딩 중에 콘텐츠 위치를 이동시켜 로딩 속도 향상을 시각적 불안정 문제로 바꿔놓습니다. 모든 지연 로딩 요소에 명확한 크기 또는 가로세로 비율을 지정하는 것은 필수이며, 올바른 공간을 차지하는 자리 표시자가 있어야 지연 로딩이 단순히 속도 향상뿐 아니라 사용자에게 보이지 않게 됩니다.

이 기법이 부적절한 경우도 있습니다. 검색 엔진이 안정적으로 색인을 생성하기 위해 반드시 존재해야 하는 콘텐츠, 모든 요소가 렌더링되어야 하는 인쇄용 페이지, 그리고 사용자가 긴 목록을 빠르게 스크롤하는 인터페이스는 모두 과도한 로딩 지연으로 인해 문제가 발생합니다. 특히 마지막 경우에는 뷰포트에 접근할 때만 이미지가 로드되므로 빠른 스크롤 사용자에게는 너무 늦게 도착하여 빈 자리 표시자가 계속 나타나게 되므로, 더 큰 로딩 여유 공간을 확보하거나 다른 전략을 사용해야 합니다.

관련하여 고려해야 할 사항은 지연 로딩이 실패할 경우 발생하는 상황입니다. 이미지가 JavaScript를 통해서만 로드되는데, 오류, 스크립트 차단 또는 브라우저의 지원 부족으로 인해 JavaScript가 실행되지 않으면 페이지는 이미지 없이 렌더링되고 대체 로드 방식이 없습니다. 브라우저의 기본 지연 로딩 기능은 이러한 문제를 완전히 방지하므로, 가능한 경우 스크립트 기반 구현보다 기본 지연 로딩 방식을 사용하는 것이 좋습니다. 스크립트 기반 방식이 불가피한 경우, 해당 메커니즘을 사용할 수 없을 때 콘텐츠를 로드하는 대체 로드 방식을 제공하는 것은 일반적인 테스트에서는 눈에 띄지 않지만 실제로는 소수의 방문자에게 영향을 미치는 오류를 방지하는 데 큰 도움이 됩니다.

적절하게 적용한다면, 지연 로딩은 대부분의 제품 목록, 기사, 긴 마케팅 페이지처럼 화면 하단에 상당한 양의 콘텐츠가 있는 페이지에 사용할 수 있는 가장 효과적인 기술 중 하나입니다. 실제로 이는 더 광범위한 로딩 전략의 한 구성 요소이며, 이 글에서 자세히 다룹니다. 웹 성능 이미지 형식 및 크기, 리소스 우선순위 지정, 번들 구조와 함께 작업하며, 그 영향은 다음과 같은 부분에서 가장 큽니다. 전자 상거래 카테고리 페이지에 수십 개의 이미지가 있고 모바일 방문자가 모든 이미지를 한 번에 로드하는 데 드는 비용을 모두 부담해야 하는 상황.