🗣️ Lazy-Loading에 대해서 알고 계신가요?
-
의도: 성능 최적화 능력을 가지고 있는지 확인하는 질문
-
팁: 사용 사례를 언급한다.
-
나의 답안
Lazy-Loading은 웹 페이지나 애플리케이션에서 필요하지 않은 리소스를 미리 로드하지 않고, 사용자가 실제로 필요할 때 로드하는 기술입니다.
이미지, 비디오, 스크립트, 데이터 등과 같은 무거운 리소스에 대해 유용합니다.Lazy-Loading을 사용하면 모든 리소스를 한꺼번에 로드하는 것을 피함으로써 초기 페이지 로딩 시간을 단축할 수 있습니다.
이는 사용자가 더 빠르게 콘텐츠에 접근할 수 있게 해줍니다.
더불어, 사용자가 실제로 보지 않는 콘텐츠를 다운로드하지 않기 때문에 불필요한 데이터 전송을 줄일 수 있습니다.
이는 특히 모바일 사용자의 데이터 요금을 줄이는 데 도움이 됩니다.
Lazy-Loading을 사용하면 페이지가 빠르게 로드되고, 사용자가 필요한 콘텐츠를 스크롤할 때 즉시 제공되므로 사용자 경험이 향상됩니다.저는 Lazy-Loading의 한 형태인 무한 스크롤을 구현한 적이 있습니다.
무한 스크롤은 사용자가 페이지를 스크롤할 때마다 새로운 콘텐츠를 동적으로 로드하여 페이지 끝에 추가하는 방식입니다. 사용자가 스크롤을 계속하면 계속해서 새로운 데이터가 로드됩니다. -
제공된 답안 (모범 답안)
네, Lazy-Loading은 이름에서 알 수 있듯이 게으른 로딩입니다.
일을 하지 않는다는 얘기가 아니라, 쉬게 두었다가 필요할 때만 쓰는 개념입니다.예를 들어, 한 페이지에 이미지 카드가 길게 나열되어 있다고 합시다.
심지어는 보이지 않는 부분까지 이미지가 있다고 하면, 화면의 모든 이미지를 다운받아와서 보여주느라 성능이 저하될 것입니다.
이럴 때 화면에 보이는 부분만 이미지를 먼저 로딩할 수 있게 해주는 게 바로 Lazy-Loading입니다.저같은 경우에는 이 예시를 구현하기 위해 HTML의 data- 속성과 Intersection Observer API를 사용했습니다.
처음에는 이미지를 로드하지 않고 있다가 Intersection Observer API를 통해 해당 태그가 화면에 보여졌을 경우에 data- 속성에 넣어두었던 이미지의 src를 활성화 시키는 것으로 Lazy-Loading을 활용했던 경험이 있습니다.
📝 개념 정리
🌟 Lazy-Loading의 기본 개념
-
웹 페이지나 애플리케이션에서 필요하지 않은 리소스를 미리 로드하지 않고, 사용자가 실제로 필요로 할 때 로드하는 기술
-
이미지, 비디오, 스크립트, 데이터 등과 같은 무거운 리소스에 대해 유용하다.
🌟 Lazy-Loading의 중요성
-
성능 최적화
- 모든 리소스를 한꺼번에 로드하는 것을 피함으로써 초기 페이지 로딩 시간을 단축할 수 있다.
- 이는 사용자가 더 빠르게 콘텐츠에 접근할 수 있게 해준다.
-
데이터 절약
- 사용자가 실제로 보지 않는 콘텐츠를 다운로드하지 않기 때문에 불필요한 데이터 전송을 줄일 수 있다.
- 이는 특히 모바일 사용자의 데이터 요금을 줄이는 데 도움이 된다.
-
서버 부하 감소
- 한 번에 로드되는 리소스의 양을 줄여 서버 부하를 줄일 수 있다.
-
사용자 경험 향상
- 페이지가 빠르게 로드되고, 사용자가 필요한 콘텐츠를 스크롤할 때 즉시 제공되므로 사용자 경험이 향상된다.
🌟 Lazy-Loading 작동 방식
- Lazy-Loading은 주로 다음 두 가지 방식으로 구현된다.
-
이미지 및 미디어의 Lazy-Loading
-
이미지나 비디오와 같은 미디어 요소는 초기 로드 시에 빈 공간이나 저해상도 이미지로 표시된다.
-
사용자가 해당 요소가 보이는 위치까지 스크롤하면, 실제 리소스가 로드된다.
-
이는 Intersection Observer API나 JavaScript 이벤트 리스너를 통해 구현된다.
-
예를 들어, HTML의
<img>요소에loading="lazy"속성을 추가하면, 브라우저가 해당 이미지를 자동으로 Lazy-Load 한다.<img src="image.jpg" loading="lazy" alt="lazy loaded image" />
-
-
JavaScript 및 데이터의 Lazy-Loading
-
페이지 초기 로드 시에 모든 자바스크립트 파일이나 데이터를 다운로드하지 않고, 필요할 때 비동기적으로 로드할 수 있다.
-
예를 들어, 특정 페이지를 로드할 때만 필요한 자바스크립트 모듈을 동적으로 가져오거나, 사용자가 페이지의 특정 부분을 요청할 때만 데이터를 가져오는 방식이다.
-
🌟 Lazy-Loading 구현 방법
-
HTML 속성 사용
-
HTML5 표준에서는
<img>와<iframe>요소에loading="lazy"속성을 제공하여 간단하게 Lazy-Loading을 적용할 수 있다. -
이 속성을 사용하면 브라우저가 자체적으로 Lazy-Loading을 처리한다.
-
-
JavaScript 라이브러리
-
Intersection Observer API : 이 API는 특정 요소가 뷰포트에 들어올 때 트리거되는 이벤트를 감지하여 Lazy-Loading을 구현할 수 있게 한다.
-
서드파티 라이브러리 : lazysizes, lozad.js와 같은 라이브러리는 다양한 브라우저 환경에서의 호환성을 고려하여 Lazy-Loading을 쉽게 구현할 수 있게 도와준다.
-
-
프레임워크와 라이브러리
- Vue.js, React, Angular와 같은 프론트엔드 프레임워크에서도 Lazy-Loading을 지원하며, 이를 통해 컴포넌트나 모듈의 로딩을 최적화할 수 있다.
🌟 고려 사항
-
SEO
-
Lazy-Loading을 사용할 때 검색 엔진 크롤러가 모든 콘텐츠를 제대로 인덱싱할 수 있도록 주의해야 한다.
-
서버 사이드 렌더링(SSR)이나 프리렌더링(pre-rendering)을 고려할 수 있다.
-
-
사용자 인터페이스
- 사용자에게 콘텐츠가 로드되고 있음을 알리는 로딩 스피너나 placeholder를 제공하여 좋은 사용자 경험을 유지할 수 있다.
