레이지 로딩이란?
이미지 레이지 로딩(Image Lazy Loading)은 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록 하는 기법이다.
웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것이라 볼 수 있다.
웹 성능과 디바이스 내 리소스 활용도 증가, 그리고 연관된 비용을 줄이는데 도움을 줄 수 있다.
레이지 로딩은 페이지 내에서 실제로 필요로 할 때까지 리소스의 로딩을 미루는 것이다.
페이지를 로드하자마자 리소스를 로딩하는 일반적인 방식 대신, 실제로 사용자 화면에 보여질 필요가 있을 때까지 이러한 로딩을 지연하는 것이다.
레이지 로딩의 원리
사용자가 웹 페이지를 열면 전체 페이지의 내용이 다운로드 되어 단일 이동으로 렌더링 된다.
이를 통해 브라우저는 웹페이지를 캐시할 수 있지만 사용자가 다운로드한 모든 컨텐츠를 실제로 볼 수 있다는 보장은 없다.
예를 들어 전체 사진 갤러리를 다운로드했지만 사용자가 첫번째 이미지만 본 후 사용자가 떠났을 때 웹펭지에서는 메모리 및 대역폭의 낭비가 발생한다.
페이지에 액세스할 때 모든 컨텐츠를 대량으로 로드하는 대신 사용자가 필요한 페이지의 일부에 액세스할 때 컨텐츠를 로드할 수 있다.
레이지 로딩을 사용하면 페이지가 placeholder 컨텐츠로 작성되며, 사용자가 필요할 때만 실제 컨텐츠로 대체된다.
어떻게 적용이 되는가?
레이지 로딩은 페이지를 읽어들이는 시점에 필요하지 않은 리소스 로딩을 추후에 하는 기술이다.
대신에 필요하지 않은 리소스들은 필요할 때 로드가 되도록 한다.
이미지와 관련된 경우 중요하지 않은 리소스들은 "off-screen"와 함께 동기화 된다.
사용자가 웹페이지를 검색할 때 실제 리소스는 브라우저에 의해 캐시되고 리소스가 사용자 화면에 표시될 때 placeholder를 대체한다.
레이지 로딩을 사용해야 하는 이유
First Meaningful Paint (FMP) is the time it takes for the first part of a web page’s readable or viewable content rendered to the visitor.
레이지-로딩을 적용시키지 않은 웹 페이지를 열면 브라우저가 모든 이미지를 읽고 불러와서 DOM에 렌더링 할 것이다.
레이지 로딩은 페이지 내에서 바로 필요하지 않은 이미지들을 로딩 시점을 뒤로 미루는 것이다.
페이지 로드 시점에 유저에게 보여지지 않는 이미지는 스크롤 등으로 실제로 이미지가 보여지는 시점이 올 때 로딩된다.
만약 사용자가 스크롤하는 행위가 없으면, 사용자에게 보여지지 않는 이미지는 스크롤 등으로 실제로 이미지가 보여지는 시점이 올 때 로딩된다.
만약 사용자가 스크롤하는 행위가 없으면, 사용자에게 보여지지 않은 이미지는 절대 로딩되지 않는다.
챌잇 서비스의 경우 서비스의 특성상 평균적으로 1~20개 내외의 인증 이미지 파일을 모두 로드하는 것은 First Meaningful Paint(FMP) Time을 지연시키는 요인이 될 수 있기 때문에 UX적인 측면을 개선하기 위해 필요성을 느꼈다. 또한 필터 기능을 사용해 챌린지 별로 인증 요청을 볼 수 있기 때문에 전체 인증 요청을 불러오는 것은 효율적이지 않기 때문에 레이지 로딩을 도입하였다.
레이지 로딩의 장점
성능 향상
레이지 로딩은 웹 사이트의 로딩 시간, 성능 관리 면에서 중요한 요소이다.
레이지 로딩을 이용하면, 페이지 초기 로딩 시 필요로 한 이미지의 수를 줄일 수 있다.
리소스 요청을 줄이는 것은 다운로드 바이트를 줄이는 것이며, 유저가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄이는 것을 의미한다.
디바이스가 다른 리소스들을 더 빠르게 처리해서 다운로드하도록 확보한다.
레이지 로딩을 쓰지 않는 것에 비해 유저가 페이지를 빨리 이용할 수 있도록 한다.
- 레이지 로딩을 사용할 수 있는 이미지
레이지 로딩은 당장 필요하지 않은 모든 요소들의 로딩을 잠시 지연하는 것이다.
사용자가 페이지에서 스크로를을 아래로 내림으로써, 이미지의 placeholder는 뷰포트(웹 페이지 내 보여지는 부분)에 다가오게 된다.
뷰포트에 보여지게 되면 이미지를 로딩하도록 트리거를 일으킨다.
- 레이지 로딩을 다루는 기술
웹 페이지 내 이미지는 두 가지 방법으로 로드할 수 있다.
태그와 CSS 속성 중 ‘background’를 이용하는 방법이 있다.
태그를 이용하는 방법
레이지 로딩 이미지들은 두 단계로 나눌 수 있다.
첫번째는 이미지 로딩을 사전에 막는 것이다.
일반적으로 태그를 이용해서 이미지를 로드하기 위해서 브라우저는 태그 내 src 속성을 이용한다.
HTML 내 첫 번째 이미지든 100번째 이미지든, 혹은 뷰포트 밖에 있든 상관없이, 브라우저가 src 속성을 가지면 이미지를 무조건 로드한다.
그러므로 이와 같은 이미지들의 로딩을 지연시키려면, src 속성 대신 다른 속성에 이미지 URL을 넣는 것이다.
태그의 data-src라는 속성에 이미지 URL을 지정했다고 가정하면, src가 비워져 있고, 브라우저는 해당 이미지를 로드하지 않는다.
이와 같이 이미지 로드를 사전에 막으면 브라우저에게 해당 이미지를 언제 로드할 것인지 알려주어야 한다.
해당 이미지(placeholder 상태)가 뷰포트에 들어오자마자 로딩할 수 있도록 확인해야 한다.
- 모든 이미지에 레이지 로드를 적용하지 않기
A) 뷰포트에 있거나, 웹 페이지에서 시작되는 이미지들은 레이지 로딩을 하도록 하면 안된다. 페이지 상단 이미지나 배너, 로고 등과 같은 이미지는 페이지가 로딩 되자마자 유저에게 보여야 한다.
또한, 모바일과 데스크탑은 화면 크기가 다르기 때문에 초기에 화면에 보여자는 이미지의 수가 다르다.
따라서 어떤 리소스들을 미리 로딩할 것인지 결정하기 위해 디바이스 타입을 고려할 필요가 있다.
