HTML 속성으로 네이티브 이미지 지연 로딩(Lazy loading) 하기

이미지 지연 로딩, 또는 레이지 로딩(Lazy loading)이라고 하는 웹 기술은 웹의 반응성과 검색 최적화를 위한 최신 기법 중의 하나입니다.

지연 로딩은 웹 페이지에 포함된 이미지가 웹 브라우저 뷰포트 안에 표시되기 시작하는 시점에 로딩(네트워크를 통해 이미지를 가져옴)하는 기법을 말합니다.

특히 웹 페이지 안에 이미지 갯수가 많거나 용량이 큰 이미지를 로딩해야 하는 경우 지연 로딩이 없으면, 이미지가 모두 로딩 완료될 때까지 웹페이지는 로딩 상태로 표시되며, 사용자 인터렉션도 되지 않습니다.

이미지 로딩이 완료되지 않는 시간동안 사용자는 웹페이지에 조작을 할 수 없기 때문에 하염없이 기다리게 되고, 방문자가 이탈하는 주요 원인이 되기도 합니다.

이미지 지연 로딩을 하는 방법은 크기 자바스크립트를 사용하는 방법과 HTML 태그 속성을 통한 웹 브라우저 네이티브(Native) 지원 2가지가 있습니다.

지연 로딩 이미지 속성

HTML 이미지 태그에 지연 로딩을 구현하는 속성은 "loading" 입니다.

"loading" 속성은 3개의 속성 값을 가질 수 있으며, 각 속성 값은 다음의 기능을 합니다.

속성 값이 3가지 있지만 "lazy" 속성 값만 의미가 있기 때문에 실제로는

loading="lazy"

만 사용된다고 생각하면 됩니다.

다음처럼 HTML 이미지 태그에 지연 로딩 속성을 부여하면

<img src="./backup/858/img/1.jpg">
<img src="./backup/858/img/2.jpg">
<img src="./backup/858/img/3.jpg">
<img src="./backup/858/img/4.jpg" loading="lazy">
<img src="./backup/858/img/5.jpg" loading="lazy">
<img src="./backup/858/img/6.jpg" loading="lazy">
<img src="./backup/858/img/7.jpg" loading="lazy">

속성이 부여된 오프스크린(뷰포트 바깥에 있는) 이미지는 로딩되지 않고, 웹 페이지 로딩이 완료됩니다.

페이지를 스크롤 해서 이미지 태그가 있는 위치에 도달하면 이미지가 로딩됩니다.

지연 로딩되는 이미지의 크기 값 지정

지연 로딩은 이미지를 지연 로딩되도록 하는 굉장히 좋은 기술이지만, 올바르게 사용하지 않으면, 웹페이지의 가독성을 현저히 떨어뜨리고, 검색 엔진의 검색 지수에서 심각한 악영향을 미칩니다.

예를 들어 지연 로딩되는 이미지 사이, 또는 밑에 텍스트 내용이 있을 경우, 지연 로딩된 이미지가 로딩되는 순간 텍스트 내용이 밑으로 밀려나면서 읽던 내용의 흐름이 끊기게 됩니다. 로딩된 이미지 높이 만큼 텍스트 내용일 밑으로 밀려나면서 발생하는 현상으로, 읽던 내용 위치를 찾기 위해 화면을 밑으로 다시 스크롤 해야하는 번거로움이 발생합니다.

이렇게 로딩되어 위치가 잡힌 페이지 컨텐츠 내용이 지연된 이미지 로딩으로 인해 밑으로 밀려나는 현상에 대해 구글 검색 엔진은 검색 결과에 패널티를 부여합니다. 

이 문제를 구글 검색엔진은 CLS(Cumulative Layout Shift) 항목으로 구분해 검색 지수 판단에 가장 중요한 요소 중의 하나로 판단합니다.

CLS 는 "누적 레이아웃 이동" 즉, 페이지 로딩 과정에서 레이아웃이 얼마나 변경되는지를 판단하는 지수입니다.

대부분의 웹 사이트에서 이 문제는 자리를 차지하는 레이아웃 요소나 이미지의 영역 크기(특히 높이)가 정해져 있지 않아, 컨텐츠가 로딩되면서 레이아웃이 계속 변하거나, 길이가 계속 늘어나는 경우가 해당됩니다.

CLS 지수에 대해 구글 검색 엔진은 0.1이 넘으면 가독성이 떨어지는 사이트로 주의 표시를 하고, 0.25가 넘으면 가독성에 문제가 있는 사이트로 분류해 검색 지수에 낮은 등급을 부여합니다.

검색 지수가 낮은 사이트, 또는 웹 페이지는 검색 결과에서 우선 순위가 밀리게 됩니다.

"loading" 속성 사용으로 인한 레이아웃 밀림을 막으려면 이미지 태그에 다음 속성을 지정해서 기본적인 높이 값을 가지도록 해야 합니다.

img{
  max-width: 100%;
  height: auto;
}

이렇게 이미지 높이 값이 자동(auto)으로 지정되면, 너비가 정해지는데 따라 이미지 비율(Aspect ratio)에 따라 높이 값이 정해지고, 높이 값만큼 빈 이미지 영역이 자리를 차지하게 됩니다.

네이티브 지연 로딩의 한계

HTML 속성을 이용한 지연 로딩은 몇 가지 제약이 있습니다.

"loading" 속성을 이용한 지연 로딩은 페이지 안에 지연 로딩된 이미지가 여러 개일 경우 첫 번째 지연 로딩 이미지가 뷰포트 안으로 들어오면 페이지 안의 모든 지연 로딩된 이미지들이 한꺼번에 로딩됩니다.

뷰포트 안으로 들어온 지연 로딩 이미지 개별로는 로딩되지 않습니다.

"loading" 속성은 웹 페이지 로딩 완료 지연을 줄여 웹페이지와 사용자가 인터렉션을 빨리 할 수 있는 것에 목표를 두고 있기 때문에 자바스크립트의 최신 지연 로딩 기법인 "IntersectionObserver" 를 이용한 정밀한 개별 이미지별 지연 로딩과는 차이가 있습니다.

또, 첫 번째 지연 로딩 이미지가 페이지 상단에 위치해서 초기 페이지 로딩시점에 뷰포트 안에 위치한 경우 지연 로딩이 되지 않습니다. 첫 번째 지연 로딩 이미지가 뷰포트 안에 들어오면 페이지 안의 모든 지연 로딩 이미지가 한꺼번에 로딩되는 특성으로 인해 페이지 로딩 시점에 모든 지연 로딩 이미지가 함께 로딩됩니다.

지연 로딩 속성 "loading"의 호환성

"loading" 속성은 이미지에만 사용할 수 있는 것은 아니고 아이프레임에도 사용할 수 있습니다.

단, 조건이 있습니다.

아이프레임 지연 로딩은 크로미움 기반 웹 브라우저(구글 크롬, 마이크로소프트 신형 엣지) 에서만 지원됩니다.

이미지 지연 로딩을 웹 브라우저에서 직접 지원하는 "loading" 속성은 현재 애플 사파리 브라우저에서는 실험실 기능으로만 지원되고 공식 지원이 되지 않습니다.

파이어폭스는 아이프레임을 제외한 이미지 지연 로딩만 지원하며, 애플 사파리 브라우저(데스크톱, 모바일 모두 해당)는 지연 로딩 속성을 공식적으로 지원하지 않습니다.

애플 사파리 브라우저는 버전 14 기준으로 실험실 기능(Experimental Webkit Features)으로만 지원되기 때문에 사파리 브라우저에서 이 기능을 사용하려면 "설정 > Safari > 고급 > Experimental Webkit Features" 에서 지연 로딩(Lazy loading)을 켜야 합니다.

2020년 3월에 실험적으로 추가되었으므로 차기 버전인 15에서는 지연 로딩을 공식 지원할 가능성이 높습니다.