24. Thymeleaf 성능 최적화 - 3

Lazy Loading 적용

Lazy Loading은 웹 애플리케이션에서 필요한 데이터 또는 리소스를 필요할 때까지 불러오지 않고, 필요한 시점에 동적으로 로드하는 기술입니다. 이를 통해 초기 로딩 시간을 최소화하고 페이지 응답 속도를 향상시킬 수 있습니다. 이번 챕터에서는 Lazy Loading의 개념, 적용 방법, 그리고 장단점에 대해 알아보겠습니다.

1. Lazy Loading이란?

Lazy Loading은 필요한 시점에만 데이터나 리소스를 로드하는 기술로, 초기 로딩 시간을 최적화하고 페이지의 응답 속도를 향상시킵니다. 주로 대용량의 데이터나 이미지, 동적으로 생성되는 컴포넌트들을 Lazy Loading으로 처리하여 사용자 경험을 개선합니다.

2. Lazy Loading의 적용 방법

이미지 Lazy Loading

<!-- Lazy Loading을 적용한 이미지 -->
<img src="placeholder.jpg" data-src="image.jpg" alt="Lazy Loaded Image" loading="lazy">

 

데이터 Lazy Loading (Ajax를 이용한 예시)

// 필요한 시점에 데이터를 비동기적으로 로드
function loadData() {
    $.ajax({
        url: 'data.json',
        method: 'GET',
        success: function(response) {
            // 데이터 로드 후 처리 로직
        },
        error: function(xhr, status, error) {
            console.error(error);
        }
    });
}

3. Lazy Loading의 장단점

장점

• 초기 로딩 시간 최적화: 필요한 데이터 또는 리소스만 로드하기 때문에 초기 로딩 시간이 줄어듭니다.
• 페이지 응답 속도 향상: 필요한 시점에만 로드되기 때문에 페이지의 응답 속도가 향상됩니다.
• 대용량 데이터 처리: 대용량 데이터를 효율적으로 처리할 수 있습니다.

단점

• 추가적인 HTTP 요청: Lazy Loading은 필요한 시점에 데이터를 로드하기 때문에 추가적인 HTTP 요청이 발생할 수 있습니다.
• 초기 로딩 시점에 필요한 데이터 누락 가능성: 초기 로딩 시점에 필요한 데이터가 누락되는 경우 사용자 경험에 영향을 줄 수 있습니다.

요약

Lazy Loading은 웹 애플리케이션의 초기 로딩 시간을 최적화하고 페이지 응답 속도를 향상시키는 중요한 기술입니다. 이미지나 데이터를 Lazy Loading으로 처리하여 사용자가 필요한 시점에만 로드되도록 하는 것이 좋습니다. 그러나 추가적인 HTTP 요청과 초기 로딩 시점에 필요한 데이터 누락 가능성을 고려하여 적절히 적용해야 합니다.