[JavaScript] Lazy Loading기법으로 로딩 속도 개선하기

웹사이트의 로딩 속도는 사용자 경험에 큰 영향을 미쳐요.

특히 이미지나 동영상 같은 미디어 파일이 많을 경우, 페이지 로딩 시간이 길어질 수 있죠.

 

그래서 오늘은 Lazy Loading 기법에 대해 알아보려고 해요.

이 기법은 이미지나 동영상을 필요할 때만 로드하여 페이지의 초기 로딩 속도를 개선하는 방법이에요.

Lazy Loading 기법 소개

Lazy Loading은 웹 페이지에서 사용자가 실제로 볼 필요가 없는 이미지나 자원을 미리 로드하지 않고,

사용자가 해당 부분에 도달했을 때 로드하는 기법이에요.

이렇게 하면 초기 로딩 속도가 빨라지고, 사용자에게 더 나은 경험을 제공할 수 있죠.

Lazy Loading의 필요성

웹 페이지의 로딩 속도는 검색 엔진 최적화(SEO)와도 밀접한 관련이 있어요.

 

구글은 페이지 로딩 속도가 빠른 웹사이트를 선호하기 때문에,

Lazy Loading을 통해 로딩 속도를 개선하면 검색 엔진에서의 순위도 높아질 수 있어요.

 

또한, 모바일 기기에서의 데이터 사용량을 줄일 수 있어 사용자에게 경제적인 이점도 제공하죠.

Lazy Loading의 작동 원리

Lazy Loading은 사용자가 스크롤을 내릴 때, 해당 영역에 있는 이미지나 자원을 로드하는 방식으로 작동해요.

이때, 자바스크립트를 사용하여 사용자의 스크롤 위치를 감지하고, 필요한 자원만 로드하게 되죠.

예를 들어, 아래와 같은 코드로 Lazy Loading을 구현할 수 있어요.

 

const images = document.querySelectorAll('img[data-src]'); 
const options = );

 

위 코드는 Intersection Observer API를 사용하여 이미지가 뷰포트에 들어올 때만 로드하도록 설정한 예시예요.

Lazy Loading 구현 방법

Lazy Loading을 구현하는 방법은 여러 가지가 있어요.

가장 일반적인 방법은 자바스크립트를 사용하는 것이고, HTML의 loading 속성을 활용하는 방법도 있어요.

 

예를 들어, HTML5에서는 <img loading="lazy"> 속성을 사용하여 Lazy Loading을 쉽게 적용할 수 있죠.

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Lazy Loaded Image">

이렇게 하면 브라우저가 자동으로 Lazy Loading을 처리해줘요.

Lazy Loading의 장점

Lazy Loading의 가장 큰 장점은 페이지 로딩 속도를 개선할 수 있다는 점이에요.

사용자가 페이지를 처음 열었을 때, 필요한 자원만 로드되기 때문에 초기 로딩 시간이 단축되죠.

 

또한, 서버의 부하를 줄일 수 있어요.

사용자가 실제로 보지 않는 자원은 로드하지 않기 때문에, 서버의 트래픽을 줄일 수 있죠.

Lazy Loading의 단점

하지만 Lazy Loading에도 단점이 있어요.

사용자가 스크롤을 내릴 때마다 추가적인 요청이 발생하기 때문에, 네트워크가 불안정한 환경에서는 오히려 성능이 저하될 수 있어요.

 

또한, SEO 측면에서도 주의가 필요해요.

검색 엔진이 Lazy Loading된 자원을 제대로 인식하지 못할 수 있기 때문에, 이를 해결하기 위한 추가적인 작업이 필요할 수 있죠.

Lazy Loading을 적용한 사례

많은 웹사이트들이 Lazy Loading을 적용하여 성능을 개선하고 있어요.

예를 들어, 유명한 이미지 공유 사이트인 Unsplash는 Lazy Loading을 통해 페이지 로딩 속도를 크게 향상시켰어요.

사용자가 스크롤을 내릴 때마다 필요한 이미지만 로드되기 때문에, 사용자 경험이 개선되었죠.

 

Lazy Loading은 웹 성능을 최적화하는 데 매우 유용한 기법이에요.

초기 로딩 속도를 개선하고, 서버의 부하를 줄일 수 있는 장점이 있지만, 단점도 고려해야 해요.

Lazy Loading을 적용하고 싶다면, 위에서 소개한 방법들을 참고해보세요.