Lazy Loading 이란?

일반적인 웹 페이지로 상용자가 접근하면 그 안에 있는 리소스가 모두 다운로드됩니다.

 

웹 페이지의 모든 내용을 사용자가 사용한다고 하면 리소스가 전부 다운로드되어도 무관하다.

하지만 일부 내용만 확인하고 가버리면 리소스 낭비가 발생하게 된다.

 

이런 리소스 낭비를 줄이기 위해서 lazy loading 기법이 탄생하게 되었다.

 

Lazy Loading

Lazy Loading은 페이지를 읽어 들이는 시점에 중요하지 않은, 현재 바로 사용되지 않는 리소스에 대한 로딩을 추후에 그 리소스가 필요해지면 로드되는 현상이다.

 

왜 Lazy Loading을 사용하는가

크게 2가지의 장점을 가지고 있다.

1. 성능 향상

웹 화면의 로딩 시간, 성능 관리 면에서 장점을 가진다.

페이지 초기 로딩 시 필요한 컴포넌트의 개수를 줄일 수 있다. 컴포넌트의 개수를 줄이게 되면 그만큼 다운로드 하아야 하는 리소스 감소하여 더욱 빠르게 처리되어 화면을 사용자가 더 빨리 이용할 수 있게 된다.

2. 비용 감소

통신 비용 관점에서도 장점을 가진다. 컴포넌트가 사용되지 않으면 절대 로딩하지 않으므로, 페이지 내에서 전달할 총 바이트 용량을 줄일 수 있다. 전달하는 리소스의 양이 줄어들기 때문에 네트워크로부터 전송되는 전송 비용도 함께 줄어든다.

 

Lazy Loading을 활용한 UI

Lazy Loading에 대한 개념을 모르고 있었지 프런트엔드 개발함에 있어서 실제로 내가 활용해본 사례가 있었다.

 

최근에 블로그 글로도 작성하기도 했던 무한 스크롤이 Lazy Loading을 사용한 UI이다.

Intersection Observer를 통한 무한 스크롤 구현

무한 스크롤의 가장 기본적인 개념은

초기 화면에는 일부 데이터만 보여주고, 사용자의 스크롤 이벤트에 반응해서 리스트의 다음 부분을 덧붙여서 보여주는 UI이다.

 

그 외에도 로드 되지않은 이미지에 대해서 저화질의 이미지를 부여해 놓거나, 단색 background 만을 남겨두어 Lazy Loading을 구현하기도 한다.

 

Lazy Loading은 컴포넌트뿐만 아니라 image가 많은 웹사이트에서도 필수적으로 사용되어야 하는 기술이 아닐까 싶다.

Lazy Loading 에 대한 방법은 아주 다양한다. 아래 레퍼런스에 그 방법에 대한 설명이 나와있어 참고해보면 좋을 것 같다.

 

저도 이후 게시판을 만들거나 image가 많이 포함된 화면에서 Lazy Loading을 구현해서 성능 향상을 체험해볼 예정이다.

 

## Reference

웹 성능 최적화를 위한 Image Lazy Loading 기법

 

[ 기술 스터디 ] Lazy-loading이란 무엇인가.