The RED : 프론트엔드 Back to the Basics 강의를 듣다가 html의 img 자체 속성에서 lazy loading이 있다는 것을 알게 되었다. 부끄럽게도 이 강의를 들으면서 HTML에도 lazy loading 기능이 있다는 것을 처음 알았다. 역시 HTML만으로도 참 많은 기능과 속성들을 갖고 있다는 것을 다시금 깨닫게 된 시간이었다.
이 강의에서 알게된 lazy loading을 써보고 싶어서 새로 간단한 프로젝트를 하나 만들까 하다가, 마침 영화 평점 웹서비스 사이트 프로젝트를 하면서 이미지를 여러개 써야 하는 상황이 있었어서 그곳에서 적용하기로 해보았다.
공식문서를 보면서 좀더 공부하려고 했는데 영어 문서밖에 없어서 직접 번역을 해보며 공부한 내용을 적어보려고 한다.
Lazy Load
MDN: Lazy Loading
아래글은 위의 영어 문서를 보면서 번역해 본 것입니다.
지연 로딩은 자원의 중요성을 식별하고 필요할 때만 로딩하는 전략입니다. 이는 중요한 렌더링 경로의 길이를 단축하여 페이지 로드 시간을 줄이는 결과로 이어질 수 있는 방법입니다.
지연 로딩은 애플리케이션의 다른 순간에 발생할 수 있지만 일반적으로 스크롤이나 탐색과 같은 몇몇 사용자 상호 작용에서 발생합니다.
개요
웹이 발전하면서 사용자에게 보내는 데이터(asset인데 자산보다는 데이터가 이해하기 쉬워서 이렇게 번역했습니다.)가 크게 증가했습니다. 2011년과 2019년 사이에 중앙 리소스 가중치는 데스크톱의 경우 최대 100KB에서 최대 400KB로, 모바일의 경우 최대 50KB에서 최대 350KB로 증가했습니다. 이미지 크기는 데스크톱에서 최대 250KB에서 최대 900KB로, 모바일에서 최대 100KB에서 최대 850KB로 증가했습니다.
이 문제(데이터가 증가한 것)를 해결하기 위해 사용할 수 있는 방법 중 하나는 첫 번째 렌더링이 발생할 때 중요하지 않은 리소스를 느리게 로드하여 중요 렌더링 경로 길이를 단축하는 것입니다. 이에 대한 예시로 사용자가 카트 페이지/섹션으로 연결되는 링크가 있는 전자 상거래 사이트의 홈 페이지에 왔다면 사용자가 해당 카트 페이지로 이동할 때만 모든 리소스(JS, CSS, 이미지 등)를 다운로드할 수 있는 경우를 들 수 있습니다.
전략
지연 로딩은 다양한 자원에 다양한 전략을 통해 적용할 수 있습니다.
font (글꼴)
기본적으로 글꼴 요청은 렌더 트리가 구성될 때까지 지연되며, 이로 인해 텍스트 렌더링이 지연될 수 있습니다.
<link rel="preload">, CSS 글꼴 표시 속성, 글꼴 로딩 API를 사용하여 기본 동작을 재정의하고 웹 글꼴 리소스를 프리로드할 수 있습니다.
이미지 및 iframe
웹페이지는 데이터 사용 및 페이지 로드 속도에 영향을 미치는 이미지가 많이 포함되어 있는 경우가 많습니다. 이러한 이미지의 대부분은 화면 밖에서 이루어지며(비중요), 이를 보려면 사용자 상호 작용(스크롤)이 필요합니다.
로딩 속성: <img> 요소의 로드 속성(또는 <ifframe>의 로드 속성)을 사용하여 사용자가 스크롤할 때까지 화면을 벗어난 이미지/iframe의 로드를 연기하도록 브라우저에 지시할 수 있습니다.
<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>요약
웹페이지를 열면 해당 페이지의 모든 파일과 자원들이 한꺼번에 다운된다. 이는 사용자에게 보이지 않는 영역까지 모조리 렌더링하기 때문에 초기 렌더링에 부담을 주며, 메모리 낭비가 발생한다.
Lazy Load란, 사용자가 보는 화면에 이미지같은 자원이 없을 때는 로딩하지 않고 있다가 화면을 스크롤해서 아래로 내리는 등 해당 자원에 도달하게 되면 로딩하는 것을 말한다.
제대로 쓴다면 사용자에게 더 좋은 사용자 경험을 줄 수 있으며, 나중에 자원을 추가로 로드하기 때문에 초기 로드 성능 향상에 도움이 된다고 한다.
Lazy Load는 다양한 전략과 다양한 곳에 사용할 수 있는데, font를 preload할수도 있고,
<img>태그나<iframe>태그에도 사용할 수 있다.
참고 MDN: Lazy Load
