[Web] Lazy Loading이란

08.08.2023

1. Lay Loading의 탄생배경

2011년-2019년 사이 웹의 사이즈가 커지면서 필요한 assets(특히 이미지들)이 많아졌습니다.

mdn web docs에 따르면 데스크탑의 경우 페이지의 평균 리소스 사이즈는 100KB~450KB에 위치하며, 그 중 이미지의 사이즈는 250KB~900KB에 해당하게 되었습니다.

이것을 해결하기위해 Lazy Loading이 등장하게 되었습니다.

2. Lazy Loading이란

Lazy Loading은 쉽게 말하면 화면에 보여지는 부분에 필요한 리소스들의 로딩을 하지 않고, 사용자가 현재 보는 부분에서 피룡한 리소스들만 로드하는 기술입니다.

더 자세히 말하자면, Critical Rerendering Path의 길이를 줄이는 것입니다.

Critical Rerendering Path란 웹 브라우저가 HTML, CSS, JAVASCRIPT를 스크린상의 픽셀로 바꾸는 시퀀스를 얘기합니다.

이것을 최적화하면 렌더링 퍼포먼스를 향상할 수 있죠.

예를 들어, 한 페이지에 들어갔을 때 홈페이지가 로드되겠죠. 그 곳에 dashboard 페이지로 가는 버튼이 있다고 칩시다.

Lazy Loading을 적용하면 그 버튼을 누르기 까지 dashboard에 필요한 리소스는 없습니다.

이것이 Lazy Loading입니다.

3. 구현 방법

3-1. Code Splitting

말 그대로 Javascript, CSS, HTML의 코드들을 작은 단위로 쪼개는 것입니다.

작은 단위로 쪼갬으로써 필요한 코드만 렌더링 하는 것이 가능해지며, 이로 인해 페이지 로딩타임이 적어들어 CSR의 단점인 초기 로딩타임에도 도움이 됩니다.

코드 스플리팅에도 두가지의 종류가 있습니다.

• Entry point splitting: 앱의 진입포인트separates code by entry point(s) in the app
• Dynamic splitting: dynamic import 키워드가 사용되는 코드들을 기준으로 분류

3-2. type="module"

HTML에서 JavaScript 파일들을 script 태그로 import할 때, attribute로 type="module"을 넣어주면 디폴트로 로딩이 미뤄집니다.

3-3. loading="lazy"

HTML에서 img 또는 iframe태그를 사용하고, 이러한 이미지들을 Lazy Loading 시키고 싶으면 loading="lazy" 태그를 사용할 수 있습니다.

3-4. IntersectionObserver

상위 엘리멘트 입장의 시선에서 타겟 엘리멘트들의 변화를 비동기적으로 주시하여 처리할 수 있도록 해주는 API 입니다.

타겟 엘리멘트들이 enters or exit 할 때를 관찰하여 Lazy Loading을 구현할 수 있습니다.

3-5. 그 외 기타 방법들

너무 많아서 적기가 힘들어 제가 참고한 링크를 업로드하겠습니다.

특히 이미지에 대한 Lazy Loading 구현 방법들이 다양하고 상세하게 설명되어 있습니다. 

자바스크립트 유저라면 꼭 한 번 읽어보시길 추천드립니다.

https://scarlett-dev.gitbook.io/all/it/lazy-loading

3. SEO와의 관계

Lazy Loading은 당연하게도 SEO에 부정적인 영향을 미칩니다.

이러한 솔루션으로는 Lazy Loading이 적용되는 콘텐츠에 link를 제공하는 것입니다.

링크를 제공하게 되면 실제로 이미지가 렌더링이 되는 것은 아니지만 웹 크롤러가 링크를 통해 이미지 리소스에 접근할 수 있습니다.

4. Eager Loading

추가적으로 Eager Loading에 대해서 다루고 싶네요. 요즘 인피니트 스크롤을 구현하는 중이라ㅎㅎ..

리소스 초기화를 딜레이시키는 Lazy Loading과는 다르게 Eager Loading은 코드가 실행되자마자 리소스를 초기화 또는 로딩하는 기법입니다.

프리로딩이 필요한 객체들로 레퍼런스된 객체들을 프리로딩하는 것을 가능하게 해주는 기법입니다.

주로 백그라운드에서 리소스가 로딩되어야 할 때 유용하죠.

예를 들면 앞서 언급한 인피니트 스크롤의 경우, Loading... 이라는 컴포넌트를 띄우고 뒤에서는 데이터를 페치하죠?

이런 경우가 Eager Loading이라고 볼 수 있겠습니다.

5. 결론

Lazy Loading에 대해 최대한 general하게 정리해보았지만 커버하지 못 한 부분이 있어 아쉽습니다. (CDN과의 관련성 등)

SEO가 중요한 지금 시점에서 Lazy Loading을 효율적으로 사용해 좋은 퍼포먼스를 낼 수 있도록 코딩하는 방법을 익히면 좋을 것 같습니다.