웹사이트가 느리다면? “Lazy Loading” 하나부터 확인해보세요

들어가며

웹사이트를 만들다 보면 어느 순간부터 페이지가 느려지는 것을 경험하게 됩니다.

처음에는 이미지 몇 개와 간단한 HTML만 있어서 페이지가 금방 열립니다. 그런데 기능이 하나둘 추가되고 이미지가 많아지고 JavaScript 파일도 늘어나면서 어느 순간부터 첫 화면이 늦게 나타나기 시작합니다.

특히 쇼핑몰처럼 상품 이미지가 많거나, 게시판에 이미지가 많이 들어가거나, 한 페이지에 데이터가 상당히 많은 서비스라면 이런 문제가 더 쉽게 발생합니다.

그렇다고 페이지에 필요한 모든 데이터를 처음부터 한꺼번에 불러오는 것이 항상 좋은 방법은 아닙니다.

사용자가 아직 보지도 않은 이미지까지 미리 다운로드하고, 당장 필요하지 않은 JavaScript까지 실행한다면 브라우저가 처리해야 할 일이 많아집니다.

이럴 때 사용할 수 있는 대표적인 방법이 바로 Lazy Loading(지연 로딩)입니다.

Lazy Loading(지연 로딩)이란?

Lazy Loading을 쉽게 표현하면 “필요할 때 불러오는 방식”입니다.

반대되는 개념으로는 페이지를 처음 열 때 필요한 리소스를 미리 불러오는 방식이 있습니다.

예를 들어 상품이 100개 있는 쇼핑몰 페이지를 생각해보겠습니다.

사용자가 처음 화면을 열었을 때 실제로 보는 상품은 10개 정도라고 가정하겠습니다.

그런데 상품 100개의 이미지를 전부 한꺼번에 다운로드한다면 사용자가 아직 보지도 않은 이미지까지 네트워크를 사용하게 됩니다.

Lazy Loading을 적용하면 처음에는 현재 화면에 필요한 이미지 위주로 불러오고, 사용자가 아래쪽으로 스크롤해서 이미지가 화면에 가까워졌을 때 해당 이미지를 로딩합니다.

쉽게 말하면,

“지금 필요한 것부터 처리하자.”

라는 방식입니다.

왜 Lazy Loading이 필요한가?

웹페이지를 구성하는 요소는 생각보다 많습니다.

이미지, JavaScript, CSS, 동영상, 외부 라이브러리, API 데이터 등 다양한 리소스가 존재합니다.

이것들을 페이지 진입 시점에 전부 가져오면 초기 로딩 시간이 길어질 수 있습니다.

예를 들어 다음과 같은 페이지가 있다고 해보겠습니다.

페이지 접속
   ↓
HTML 다운로드
   ↓
이미지 100개 다운로드
   ↓
JavaScript 다운로드
   ↓
API 호출
   ↓
화면 렌더링
   ↓
사용자 화면 표시

이렇게 모든 작업이 한꺼번에 몰리면 첫 화면이 나타나기까지 시간이 오래 걸릴 수 있습니다.

반면 Lazy Loading을 적절하게 적용하면,

페이지 접속
   ↓
HTML 다운로드
   ↓
현재 화면에 필요한 리소스 로딩
   ↓
첫 화면 표시
   ↓
스크롤
   ↓
필요한 리소스 추가 로딩

처럼 처음부터 모든 작업을 처리하지 않아도 됩니다.

결과적으로 초기 로딩 부담을 줄이는 데 도움을 줄 수 있습니다.

가장 흔하게 사용하는 곳은 이미지다

Lazy Loading을 가장 쉽게 적용할 수 있는 대상은 이미지입니다.

HTML에서는 비교적 간단하게 사용할 수 있습니다.

<img src="product.jpg"
     loading="lazy"
     alt="상품 이미지">

loading="lazy"를 사용하면 브라우저가 해당 이미지를 무조건 페이지 진입 순간에 바로 가져오는 대신 필요한 시점에 맞춰 로딩할 수 있습니다.

반대로 첫 화면에서 바로 보여줘야 하는 이미지까지 무조건 Lazy Loading을 적용하는 것은 좋지 않습니다.

예를 들어 웹사이트의 메인 화면에서 가장 중요한 대표 이미지라면 사용자가 페이지에 들어오자마자 보여야 합니다.

이런 이미지는 오히려 빠르게 로딩하는 것이 중요합니다.

따라서 Lazy Loading은 모든 이미지에 무조건 적용하는 기능이 아니라 이미지의 위치와 중요도를 보고 적용하는 것이 좋습니다.

화면 아래쪽에 있는 이미지에 특히 유용하다

Lazy Loading의 장점은 페이지 아래쪽에 이미지가 많은 경우 더욱 잘 나타납니다.

예를 들어 블로그 글 하나에 이미지가 30개 있다고 생각해보겠습니다.

사용자가 처음 접속했을 때 실제로 보는 것은 제목과 본문 초반부 정도일 수 있습니다.

그런데 30개 이미지를 전부 동시에 다운로드할 필요가 있을까요?

꼭 그렇지는 않습니다.

사용자가 스크롤해서 해당 이미지가 필요해졌을 때 불러오면 됩니다.

[현재 화면]
이미지 1
이미지 2
이미지 3

----------------

[아직 보이지 않는 영역]
이미지 4
이미지 5
이미지 6
...
이미지 30

사용자가 아래로 이동하면서 필요한 이미지를 순차적으로 로딩하는 것입니다.

JavaScript에서도 Lazy Loading을 사용할 수 있다

Lazy Loading은 이미지에만 사용하는 개념은 아닙니다.

JavaScript 모듈이나 특정 기능을 필요한 순간에 불러오는 것도 지연 로딩이라고 볼 수 있습니다.

대표적인 방법이 동적 import입니다.

예를 들어 특정 기능을 사용했을 때만 JavaScript 모듈을 불러올 수 있습니다.

button.addEventListener("click", async () => {
    const module = await import("./heavy-feature.js");

    module.start();
});

페이지에 처음 들어왔을 때 heavy-feature.js를 바로 다운로드하는 대신 사용자가 버튼을 클릭했을 때 가져오는 방식입니다.

큰 기능을 여러 개 포함하고 있는 웹 애플리케이션에서는 이런 방식이 초기 JavaScript 부담을 줄이는 데 도움이 될 수 있습니다.

React 같은 프레임워크에서도 많이 사용한다

React를 사용하는 프로젝트라면 컴포넌트 단위로 Lazy Loading을 적용할 수도 있습니다.

예를 들어 관리자 페이지에서

대시보드
회원 관리
주문 관리
통계
설정

등 여러 화면이 있다고 해보겠습니다.

사용자가 처음부터 모든 화면을 사용할 필요는 없습니다.

처음에는 대시보드만 보여주고 다른 화면은 실제로 접근했을 때 로딩하도록 구성할 수 있습니다.

React에서는 다음과 같은 형태로 사용할 수 있습니다.

const Statistics = React.lazy(
    () => import("./Statistics")
);

그리고 필요한 시점에 해당 컴포넌트를 불러오도록 구성할 수 있습니다.

이렇게 하면 애플리케이션 전체 코드를 처음부터 모두 다운로드해야 하는 부담을 줄이는 데 도움이 됩니다.

Lazy Loading과 Code Splitting은 함께 생각하면 좋다

웹 개발을 하다 보면 Code Splitting이라는 용어도 함께 등장합니다.

둘은 비슷한 맥락에서 사용되지만 정확히 같은 개념은 아닙니다.

Code Splitting은 큰 JavaScript 코드를 여러 개의 작은 파일 또는 청크로 나누는 것입니다.

그리고 Lazy Loading은 그렇게 나뉜 코드를 필요한 순간에 로딩하는 방식으로 활용할 수 있습니다.

예를 들어,

전체 JavaScript
        ↓
 ┌──────┼──────┐
 ↓      ↓      ↓
메인   통계   관리자

처럼 코드를 나눠놓고 사용자가 통계 화면으로 이동했을 때 통계 관련 코드를 가져오는 방식입니다.

즉,

Code Splitting = 나누기

Lazy Loading = 필요한 시점에 불러오기

정도로 이해하면 처음 접하는 입장에서는 상당히 편합니다.

Lazy Loading을 무조건 많이 적용하면 좋을까?

그렇지는 않습니다.

이 부분이 실제 개발에서 꽤 중요합니다.

Lazy Loading을 너무 적극적으로 적용하면 사용자가 버튼을 클릭하거나 화면을 이동하는 순간 리소스를 기다려야 하는 상황이 발생할 수 있습니다.

예를 들어 사용자가 메뉴를 클릭했는데 그 순간 JavaScript 파일을 다운로드하기 시작한다면 화면 전환이 늦어질 수 있습니다.

이미지도 마찬가지입니다.

이미지가 화면에 나타나는 순간에야 다운로드를 시작하면 네트워크 상태에 따라 이미지가 늦게 나타날 수 있습니다.

따라서 무조건 늦게 가져오는 것이 좋은 것이 아니라 사용자가 필요로 하기 전에 적절한 타이밍에 준비하는 것이 중요합니다.

첫 화면에 보이는 콘텐츠는 특히 조심해야 한다

웹사이트 성능을 개선하려고 Lazy Loading을 적용하다 보면 첫 화면에 있는 이미지까지 지연시키는 경우가 있습니다.

하지만 사용자가 페이지에 들어오자마자 보는 이미지라면 이야기가 달라집니다.

예를 들어 쇼핑몰의 대표 상품 이미지나 블로그의 핵심 콘텐츠 이미지처럼 처음부터 화면에 보여야 하는 콘텐츠는 빠르게 로딩하는 편이 좋습니다.

따라서 다음처럼 생각하면 편합니다.

첫 화면에 바로 보임
→ 빠르게 로딩

화면 아래쪽에 있음
→ Lazy Loading 고려

사용자가 특정 기능을 실행해야 함
→ Lazy Loading 고려

사용자가 거의 사용하지 않는 기능
→ Lazy Loading 고려

이런 기준으로 접근하면 무작정 적용하는 실수를 줄일 수 있습니다.

Lazy Loading을 적용할 때 체크할 부분

실제 프로젝트에 적용할 때는 단순히 loading="lazy" 하나만 넣고 끝내기보다는 전체적인 사용자 경험을 확인하는 것이 좋습니다.

먼저 첫 화면이 얼마나 빨리 표시되는지 확인해야 합니다.

그리고 이미지가 필요한 순간에 정상적으로 나타나는지도 확인해야 합니다.

또한 너무 늦게 로딩되면서 빈 공간이 오래 남거나 레이아웃이 갑자기 움직이는 문제도 확인해야 합니다.

특히 이미지의 가로세로 크기를 미리 지정해두면 이미지가 로딩되면서 화면의 레이아웃이 크게 움직이는 현상을 줄이는 데 도움이 됩니다.

<img src="product.jpg"
     width="400"
     height="300"
     loading="lazy"
     alt="상품 이미지">

실제 서비스에서는 이미지 포맷, 이미지 크기, CDN, 캐시 정책 등도 함께 살펴보는 것이 좋습니다.

Lazy Loading은 속도를 빠르게 만드는 마법이 아니다

Lazy Loading을 처음 접하면 “적용하면 웹사이트가 무조건 빨라진다”고 생각하기 쉽습니다.

하지만 정확하게는 불필요한 초기 로딩을 줄여서 사용자가 처음 페이지를 이용하는 데 필요한 부담을 줄이는 기술이라고 보는 편이 좋습니다.

서버가 느린 문제를 해결해주는 것도 아니고, 이미지 파일 자체가 너무 큰 문제를 해결해주는 것도 아닙니다.

예를 들어 5MB짜리 이미지를 Lazy Loading으로 불러온다고 해서 이미지가 5MB보다 작아지는 것은 아닙니다.

필요한 시점에 5MB를 가져오는 것뿐입니다.

그래서 웹사이트 속도를 개선하려면 Lazy Loading과 함께 이미지 최적화, 캐싱, CDN, JavaScript 최적화, 코드 스플리팅 등을 종합적으로 확인해야 합니다.

직접 적용해보면 생각보다 간단하다

Lazy Loading은 이름만 보면 상당히 복잡한 기술처럼 느껴질 수 있습니다.

하지만 기본 개념은 어렵지 않습니다.

“사용자가 지금 필요하지 않은 리소스는 나중에 가져오자.”

이것이 핵심입니다.

이미지라면 화면에 가까워졌을 때 불러오고, JavaScript라면 특정 기능을 사용할 때 불러오고, 페이지라면 사용자가 해당 화면으로 이동했을 때 필요한 코드를 가져오는 식입니다.

결국 중요한 것은 무조건 늦게 로딩하는 것이 아닙니다.

필요한 것과 필요하지 않은 것을 구분하고, 사용자 경험을 해치지 않는 선에서 로딩 시점을 조절하는 것입니다.

웹사이트를 만들다 보면 기능을 추가하는 것에 집중하다가 성능 최적화를 나중으로 미루기 쉽습니다.

그런데 이미지가 많아지고 JavaScript가 커지기 시작하면 어느 순간 초기 로딩 속도가 눈에 띄게 느려집니다.

그때 무작정 서버부터 의심하기보다는 “지금 당장 필요하지 않은 것까지 전부 가져오고 있는 것은 아닌가?”를 먼저 확인해보는 것도 좋습니다.

Lazy Loading은 그 문제를 해결하기 위한 가장 기본적인 방법 중 하나입니다.

처음부터 적절하게 적용해두면 불필요한 리소스 로딩을 줄이고, 사용자가 실제로 필요한 콘텐츠를 중심으로 웹페이지를 구성하는 데 도움이 됩니다.