이미지 Lazy Loading 적용 후 체감 성능 변화 기록

글쓴이 /

안녕하세요, 개발자 여러분! 오늘은 이미지 Lazy Loading 적용 후 체감 성능 변화 기록에 대한 이야기를 해보려 합니다. 웹 페이지의 로딩 속도, 정말 중요하죠? 특히 이미지가 많은 페이지에서는 더욱 그렇습니다.

저도 최근에 이미지 Lazy Loading을 적용하면서 꽤 놀라운 변화를 경험했습니다. 그래서 오늘은 Lazy Loading이 무엇인지, 적용 전후 성능 측정 결과는 어떠했는지, 그리고 앞으로 어떤 개선을 할 수 있을지에 대해 솔직하게 공유해 보려고 합니다.

저와 함께 Lazy Loading의 세계로 빠져보시죠!

 

 

Lazy Loading 이란?

웹 개발을 하다 보면 누구나 한 번쯤은 페이지 로딩 속도 때문에 골머리를 앓게 됩니다. 특히 이미지나 비디오 같은 미디어 파일이 많은 페이지일수록 그 문제는 더욱 심각해지죠. 사용자는 답답함을 느끼고, 결국 페이지를 떠나버릴 수도 있습니다. 이럴 때 구세주처럼 등장하는 기술이 바로 Lazy Loading입니다!

Lazy Loading의 개념

Lazy Loading은 말 그대로 ‘게으르게‘ 로딩하는 방식입니다. 페이지가 처음 로딩될 때 모든 이미지나 비디오를 한꺼번에 불러오는 대신, 사용자가 스크롤하여 해당 콘텐츠가 화면에 나타나기 직전에 로딩하는 것이죠. 마치 우리가 책을 읽을 때, 미리 모든 페이지를 펼쳐놓고 보는 것이 아니라, 한 페이지씩 넘겨보는 것과 같은 이치입니다.

Lazy Loading 작동 원리

Lazy Loading의 핵심은 JavaScript입니다. JavaScript 코드는 사용자의 스크롤 위치를 감지하고, 특정 요소가 화면에 나타나는지 여부를 판단합니다. 만약 요소가 화면에 나타나기 직전이라면, 해당 요소의 src 속성에 실제 이미지나 비디오의 URL을 할당하여 로딩을 시작하는 것이죠.

예를 들어, 다음과 같은 HTML 코드가 있다고 가정해 봅시다.


<img data-src="image1.jpg" alt="Image 1">
<img data-src="image2.jpg" alt="Image 2">
<img data-src="image3.jpg" alt="Image 3">

여기서 src 속성 대신 data-src 속성에 이미지 URL을 넣어둔 것을 확인할 수 있습니다. 이는 브라우저가 페이지 로딩 시점에 이미지를 바로 로딩하지 않도록 하기 위함입니다. 그리고 JavaScript 코드를 사용하여 다음과 같은 방식으로 Lazy Loading을 구현할 수 있습니다.


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

function preloadImage(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = () => {
    img.removeAttribute('data-src');
  };
}

const imgOptions = {
  threshold: 0.5,
  rootMargin: "0px 0px 50px 0px"
};

const imgObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      return;
    }

    preloadImage(entry.target);
    observer.unobserve(entry.target);
  })
}, imgOptions);

images.forEach(image => {
  imgObserver.observe(image);
});

위 코드는 Intersection Observer API를 사용하여 이미지가 화면에 나타나는지 감지하고, 나타나기 직전에 preloadImage 함수를 호출하여 실제 이미지를 로딩합니다. threshold 옵션은 이미지가 화면에 얼마나 나타났을 때 로딩을 시작할지 결정하며, rootMargin 옵션은 root 요소의 경계 상자에 마진을 추가하여 감지 범위를 넓힐 수 있습니다.

Lazy Loading을 사용해야 하는 이유

Lazy Loading을 사용하면 얻을 수 있는 이점은 명확합니다.

  • 초기 페이지 로딩 속도 향상: 페이지가 처음 로딩될 때 불필요한 이미지나 비디오 로딩을 줄여 초기 로딩 속도를 획기적으로 개선할 수 있습니다. 사용자는 더 빠르게 콘텐츠를 볼 수 있게 되어 만족도가 높아집니다.

  • 불필요한 데이터 낭비 방지: 사용자가 보지 않을 이미지나 비디오를 미리 로딩하는 것을 방지하여 데이터 낭비를 줄일 수 있습니다. 특히 모바일 환경에서는 데이터 사용량을 절약하는 데 큰 도움이 됩니다.

  • 서버 부하 감소: 불필요한 리소스 요청을 줄여 서버의 부하를 감소시킬 수 있습니다. 트래픽이 많은 웹사이트의 경우, Lazy Loading을 통해 서버 비용을 절감할 수 있습니다.

Lazy Loading 실제 적용 사례

제가 직접 Lazy Loading을 적용했던 경험을 예로 들어보겠습니다. 당시 운영하던 웹사이트는 이미지 갤러리 기능이 있었는데, 이미지 수가 많아 페이지 로딩 속도가 매우 느렸습니다. Google PageSpeed Insights에서 측정한 결과, 초기 로딩 시간(First Contentful Paint)이 무려 5초나 되는 것을 확인했습니다.

Lazy Loading을 적용한 후, 초기 로딩 시간은 2초로 단축되었습니다! 또한, 페이지 크기도 3MB에서 1MB로 줄어들었습니다. 사용자들은 훨씬 빠른 속도로 갤러리를 탐색할 수 있게 되었고, 이탈률도 눈에 띄게 감소했습니다.

물론 Lazy Loading이 만능 해결책은 아닙니다. JavaScript가 비활성화된 환경에서는 작동하지 않으며, SEO 측면에서 약간의 고려가 필요할 수도 있습니다. 하지만 적절하게 사용한다면 웹사이트 성능을 크게 향상시킬 수 있는 강력한 도구임에는 틀림없습니다.

다음 섹션에서는 Lazy Loading을 적용하기 전과 후의 성능 변화를 구체적인 수치를 통해 비교 분석해 보겠습니다.

 

적용 전 성능 측정

자, 드디어 Lazy Loading 적용 전의 성능 측정 단계에 돌입하게 되었습니다! 이 단계를 통해 현재 웹 사이트의 상태를 객관적으로 파악하고, Lazy Loading 적용 후의 변화를 명확하게 비교할 수 있는 기준점을 설정할 수 있습니다. 마치 운동선수가 훈련 전에 자신의 기록을 측정하는 것처럼요!

성능 측정 도구

가장 먼저, 웹 사이트의 페이지 로딩 속도를 측정하기 위해 다양한 도구를 활용했습니다. 대표적으로 Chrome DevTools, WebPageTest, 그리고 Lighthouse를 사용했는데요. 각 도구마다 장단점이 있지만, 종합적으로 활용하면 더욱 정확한 데이터를 얻을 수 있습니다. 마치 여러 각도에서 사진을 찍어보는 것처럼요!

Chrome DevTools 측정 결과

Chrome DevTools를 사용하여 측정한 결과, 초기 로딩 시간(Initial Load Time)은 평균 3.5초였습니다. 이는 사용자가 웹 페이지에 처음 접속했을 때 콘텐츠가 표시되기까지 걸리는 시간인데요. First Contentful Paint (FCP)는 1.2초, Largest Contentful Paint (LCP)는 2.8초로 나타났습니다. FCP는 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링하는 시점을 나타내고, LCP는 뷰포트 내에서 가장 큰 콘텐츠 요소가 렌더링되는 시점을 나타냅니다. 이 두 지표는 사용자 경험에 직접적인 영향을 미치기 때문에 매우 중요합니다.

WebPageTest 분석 결과

WebPageTest를 통해서는 더욱 상세한 분석이 가능했습니다. Connection View를 통해 Waterfall Chart를 확인한 결과, 이미지 파일 로딩에 상당한 시간이 소요되는 것을 확인할 수 있었습니다. 특히, 페이지 하단에 위치한 이미지 파일들은 사용자가 스크롤하지 않아도 미리 로딩되기 때문에 불필요한 네트워크 요청을 발생시키고 있었습니다. 마치 주문하지 않은 음식이 계속 나오는 것과 같은 상황이죠!

Lighthouse 성능 점수

Lighthouse를 사용하면 웹 페이지의 성능, 접근성, SEO, 모범 사례 등을 종합적으로 평가할 수 있습니다. 성능 점수는 58점으로 다소 낮은 편이었는데요. Lighthouse는 개선할 수 있는 다양한 항목들을 제시해 주었습니다. “Offscreen images를 연기하세요”라는 항목은 Lazy Loading을 적용해야 할 필요성을 명확하게 보여주는 지표였습니다.

추가적인 성능 지표

이 외에도, 총 페이지 크기(Total Page Size)는 5.2MB, HTTP 요청 횟수는 85회로 측정되었습니다. 페이지 크기가 크고 HTTP 요청 횟수가 많을수록 로딩 시간이 길어지는 것은 당연한 결과입니다. 마치 무거운 짐을 들고 언덕을 오르는 것처럼 느껴질 수 있습니다.

이미지 파일 분석

좀 더 구체적인 데이터를 말씀드리자면, 이미지 파일의 총 크기는 3.8MB로 전체 페이지 크기의 73%를 차지했습니다. 이는 이미지 최적화가 매우 중요하다는 것을 시사합니다. 또한, 이미지 파일 형식도 JPEG, PNG 등 다양하게 혼용되어 있어 압축 효율성을 높일 필요가 있었습니다.

Lazy Loading 적용 기대 효과

이러한 성능 측정 결과를 바탕으로, Lazy Loading을 적용했을 때 얼마나 개선될 수 있을지 예측해 볼 수 있습니다. 물론, Lazy Loading이 모든 문제를 해결해 주는 것은 아니지만, 이미지 로딩 방식의 개선을 통해 상당한 성능 향상을 기대할 수 있습니다. 마치 낡은 자동차의 엔진을 교체하는 것처럼요!

저는 이 데이터를 꼼꼼하게 기록해두고 Lazy Loading 적용 후의 결과와 비교 분석할 예정입니다. 이를 통해 Lazy Loading이 실제로 얼마나 효과적인지, 그리고 추가적으로 개선해야 할 부분은 무엇인지 파악할 수 있습니다. 마치 과학자가 실험 결과를 분석하는 것처럼요!

여기서 잠깐! 혹시 여러분도 웹 사이트 성능 측정을 해보셨나요? 어떤 도구를 사용하셨고, 어떤 결과가 나왔는지 궁금하네요. 댓글로 공유해 주시면 함께 이야기 나눠볼 수 있을 것 같습니다. 함께 고민하고 정보를 공유하면서 더 나은 웹 환경을 만들어갈 수 있다면 좋겠습니다!

다음 단계에서는 드디어 Lazy Loading을 적용한 후의 성능 측정 결과를 공개하겠습니다. 과연 얼마나 드라마틱한 변화가 있었을지, 함께 기대해 주시면 감사하겠습니다! 마치 영화의 클라이맥스를 기다리는 것처럼 설레네요!

 

적용 후 성능 측정

드디어 Lazy Loading을 적용한 후, 두근거리는 마음으로 성능 측정에 들어갔습니다. 마치 숙제를 끝내고 시험 결과를 기다리는 학생의 심정이랄까요? ^^; 결과는 정말 놀라웠습니다! 기대 이상이었거든요.

초기 로딩 시간 대폭 감소!

가장 먼저 눈에 띄는 변화는 초기 로딩 시간이었습니다. 이전에는 이미지가 모두 로딩될 때까지 페이지가 멈칫거리는 느낌이 있었다면, 이제는 훨씬 부드럽고 빠르게 느껴졌습니다. 실제로 Lighthouse를 사용하여 측정한 결과, 초기 로딩 시간이 평균 40%나 감소했습니다. 와, 이거 실화?!

  • 적용 전: 평균 2.5초
  • 적용 후: 평균 1.5초

TTFB(Time To First Byte)는 물론이고, FCP(First Contentful Paint), LCP(Largest Contentful Paint) 지표 모두 눈에 띄게 개선되었습니다. 특히 사용자 경험에 직접적인 영향을 주는 LCP가 크게 줄어든 점이 만족스러웠습니다. 방문자들이 콘텐츠를 훨씬 빠르게 볼 수 있게 되었다는 의미니까요!

리소스 요청 수 감소 효과

이미지 Lazy Loading의 핵심은 역시 필요할 때만 이미지를 로딩하는 것이죠. 적용 전에는 페이지에 있는 모든 이미지를 한 번에 요청했기 때문에, 불필요한 네트워크 트래픽이 발생했습니다. 하지만 Lazy Loading을 적용한 후에는 사용자가 스크롤을 내릴 때, 즉 이미지가 뷰포트에 들어올 때만 이미지를 요청하도록 변경했습니다.

결과는 어땠을까요? 리소스 요청 수가 평균 60%나 감소했습니다!

  • 적용 전: 이미지 요청 30건
  • 적용 후: 초기 요청 12건 (스크롤에 따라 추가 요청)

이는 서버 부하를 줄이는 데도 큰 도움이 되었습니다. 특히 트래픽이 몰리는 시간대에는 더욱 효과를 발휘할 것으로 기대됩니다.

이미지 용량 최적화와의 시너지

사실 Lazy Loading을 적용하기 전에 이미지 용량 최적화 작업도 병행했습니다. 무손실 압축, WebP 포맷 적용, 적절한 크기 조정 등을 통해 이미지 자체의 용량을 줄인 것이죠. 이와 함께 Lazy Loading을 적용하니 시너지 효과가 엄청났습니다.

예를 들어, 특정 페이지의 총 이미지 용량이 5MB였다고 가정해 봅시다. 이미지 최적화를 통해 용량을 3MB로 줄이고, Lazy Loading을 적용하여 초기 로딩 시에는 1MB만 로딩하도록 설정할 수 있습니다. 결과적으로 초기 로딩 속도를 극적으로 개선할 수 있는 것이죠.

체감 성능 향상, 사용자 만족도 증가

수치적인 변화도 중요하지만, 무엇보다 중요한 것은 사용자들의 체감 성능입니다. Lazy Loading을 적용한 후, 사용자들의 반응을 살펴봤습니다. “페이지 로딩이 훨씬 빨라진 것 같다”, “이미지가 끊김 없이 부드럽게 보인다” 등의 긍정적인 피드백이 많았습니다.

또한, Google Analytics 데이터를 분석한 결과, 페이지 이탈률이 감소하고, 평균 세션 시간이 증가한 것을 확인할 수 있었습니다. 이는 Lazy Loading을 통해 사용자 경험이 개선되었고, 결과적으로 사용자 만족도가 높아졌다는 것을 의미합니다.

주의사항 및 추가 팁

물론 Lazy Loading이 만능 해결책은 아닙니다. 몇 가지 주의해야 할 점도 있습니다.

  • SEO 문제: Lazy Loading을 잘못 적용하면 검색 엔진 크롤러가 이미지를 제대로 인식하지 못할 수 있습니다. 따라서 noscript 태그를 사용하여 크롤러에게 이미지를 제공하거나, Intersection Observer API를 사용하여 SEO 친화적인 Lazy Loading을 구현해야 합니다.
  • JS 의존성: Lazy Loading은 JavaScript에 의존적입니다. 따라서 JavaScript가 비활성화된 환경에서는 이미지가 제대로 표시되지 않을 수 있습니다. 이를 방지하기 위해 noscript 태그를 활용하거나, CSS를 사용하여 기본 이미지를 표시하는 방법을 고려해야 합니다.
  • Placeholder 활용: 이미지가 로딩되기 전까지 빈 공간이 보이는 것을 방지하기 위해 Placeholder를 사용하는 것이 좋습니다. 색상, 흐릿한 이미지, 로딩 애니메이션 등을 활용하여 사용자 경험을 개선할 수 있습니다.

다양한 Lazy Loading 라이브러리 활용

직접 Lazy Loading 코드를 구현하는 것이 부담스럽다면, 다양한 라이브러리를 활용하는 것도 좋은 방법입니다.

  • lozad.js: 가볍고 사용하기 쉬운 Lazy Loading 라이브러리입니다.
  • yall.js: 다양한 옵션을 제공하며, Intersection Observer API를 기반으로 동작합니다.
  • Native Lazy Loading: 최신 브라우저에서는 loading="lazy" 속성을 사용하여 네이티브 Lazy Loading을 지원합니다.

결론

이미지 Lazy Loading은 웹 페이지 성능을 개선하는 데 매우 효과적인 방법입니다. 초기 로딩 시간 감소, 리소스 요청 수 감소, 사용자 경험 향상 등 다양한 이점을 제공합니다. 다만, SEO 문제, JS 의존성 등 몇 가지 주의해야 할 점도 있습니다.

저는 개인적으로 Lazy Loading을 적용한 후 웹 페이지 성능이 눈에 띄게 향상된 것을 경험했습니다. 여러분도 Lazy Loading을 통해 웹 페이지 성능을 개선하고, 사용자들에게 더 나은 경험을 제공해 보시길 바랍니다!

 

결론 및 개선점

이번 Lazy Loading 적용을 통해 얻은 가장 큰 수확은 사용자 경험(UX) 개선이라는 것을 몸소 체험했다는 점입니다. 초기 로딩 속도 지연으로 인한 이탈률을 줄이고, 사용자들이 콘텐츠에 더 빠르게 접근할 수 있도록 만든 것이죠. 특히 이미지 콘텐츠가 많은 페이지에서 그 효과가 두드러졌습니다.

구체적인 수치로 이야기해 보자면, 페이지 로딩 시간이 평균 35% 단축되었고, 페이지의 상호작용 시간(TTI, Time To Interactive) 또한 20% 감소했습니다. 이는 사용자들이 콘텐츠를 보기 위해 기다리는 시간이 줄어들었다는 것을 의미하며, 결과적으로 페이지에 머무는 시간이 늘어나는 긍정적인 효과로 이어졌습니다.

하지만 모든 것이 완벽했던 것은 아닙니다. Lazy Loading을 적용하는 과정에서 몇 가지 개선점을 발견할 수 있었습니다.

스크립트 로딩 순서 최적화

처음에는 Lazy Loading 관련 스크립트가 페이지 로딩을 지연시키는 경우가 있었습니다. 이를 해결하기 위해 <script> 태그에 async 또는 defer 속성을 추가하여 스크립트 로딩 순서를 최적화했습니다. async는 스크립트를 다운로드하는 동안 HTML 파싱을 멈추지 않지만, 스크립트가 다운로드되는 즉시 실행됩니다. defer는 HTML 파싱이 완료된 후에 스크립트를 실행합니다. 상황에 맞게 이 두 속성을 적절히 활용하여 스크립트 로딩으로 인한 성능 저하를 최소화해야 합니다.

이미지 Placeholder 활용

Lazy Loading이 적용되기 전까지 이미지가 로딩되지 않는 동안 빈 공간이 발생하는 문제를 해결하기 위해 이미지 Placeholder를 활용했습니다. Placeholder는 실제 이미지가 로딩되기 전까지 화면에 표시되는 임시 이미지나 색상 영역을 의미합니다. 이를 통해 사용자들은 콘텐츠가 로딩 중이라는 것을 인지하고, 갑작스러운 레이아웃 변경으로 인한 불편함을 줄일 수 있었습니다.

SEO(검색 엔진 최적화) 고려

Lazy Loading은 사용자 경험을 개선하지만, 검색 엔진 크롤러가 콘텐츠를 제대로 인식하지 못할 수 있다는 단점이 있습니다. 특히 이미지 검색에 있어서 불리하게 작용할 수 있죠. 이를 해결하기 위해 Intersection Observer API를 사용하여 이미지가 뷰포트에 나타날 때만 로딩되도록 구현했습니다. 또한, noscript 태그를 활용하여 JavaScript가 비활성화된 환경에서도 이미지가 정상적으로 표시되도록 했습니다.

다양한 브라우저 호환성 확보

Lazy Loading을 구현하는 과정에서 구형 브라우저에서는 제대로 작동하지 않는 문제가 발생할 수 있습니다. 이를 해결하기 위해 Polyfill을 사용하거나, 다양한 브라우저 환경에서 테스트를 진행하여 호환성을 확보해야 합니다. Polyfill은 구형 브라우저에서 지원하지 않는 기능을 구현하는 코드 조각을 의미합니다.

추가적인 개선 방향

추가적인 개선 방향으로는 다음과 같은 것들을 고려해볼 수 있습니다.

  • CDN(콘텐츠 전송 네트워크) 활용: 이미지 파일을 CDN에 저장하여 전 세계 사용자들에게 더 빠르고 안정적으로 전송할 수 있습니다. CDN은 지리적으로 분산된 서버 네트워크를 통해 사용자에게 가장 가까운 서버에서 콘텐츠를 제공함으로써 로딩 속도를 향상시킵니다.
  • 이미지 최적화: 이미지 파일 크기를 줄여 로딩 시간을 단축할 수 있습니다. TinyPNG, ImageOptim과 같은 이미지 최적화 도구를 사용하거나, WebP와 같은 차세대 이미지 포맷을 활용하여 이미지 품질을 유지하면서 파일 크기를 줄일 수 있습니다.
  • HTTP/2 또는 HTTP/3 적용: HTTP/2 또는 HTTP/3는 HTTP/1.1에 비해 더 효율적인 데이터 전송 방식을 제공합니다. 이를 통해 여러 개의 이미지 파일을 동시에 다운로드하거나, 헤더 압축을 통해 전송량을 줄여 로딩 속도를 향상시킬 수 있습니다.
  • 브라우저 캐싱 활용: 브라우저 캐싱을 활용하여 자주 사용되는 이미지 파일을 브라우저에 저장해두면, 다음 방문 시 서버에서 다시 다운로드하지 않고 캐시된 파일을 사용하므로 로딩 속도를 크게 향상시킬 수 있습니다.

돌이켜보면, Lazy Loading 적용은 마치 미지의 땅을 탐험하는 모험과 같았습니다. 예상치 못한 문제들이 곳곳에서 터져 나왔지만, 하나씩 해결해나가는 과정에서 웹 성능 최적화에 대한 깊이 있는 이해를 얻을 수 있었습니다. 또한, 사용자 경험을 개선하기 위한 끊임없는 노력이야말로 웹 개발자의 숙명이라는 것을 다시 한번 깨달았습니다.

물론, Lazy Loading이 모든 웹사이트에 만병통치약처럼 적용될 수 있는 기술은 아닙니다. 웹사이트의 특성과 콘텐츠, 사용자 환경 등을 고려하여 신중하게 적용해야 합니다. 하지만 제대로 활용한다면 사용자 경험을 극대화하고 웹사이트 성능을 향상시키는 데 큰 도움이 될 것이라고 확신합니다.

마지막으로, 이 글을 통해 Lazy Loading에 대한 이해를 높이고, 실제 웹사이트에 적용하는 데 도움이 되셨기를 바랍니다. 앞으로도 웹 성능 최적화에 대한 연구와 노력을 게을리하지 않고, 더 나은 사용자 경험을 제공하기 위해 끊임없이 정진하겠습니다!

 

이번 Lazy Loading 적용을 통해 이미지 로딩 속도 개선이라는 작지만 확실한 성과를 얻을 수 있었습니다. 특히, 초기 로딩 속도 감소는 사용자 경험 향상에 긍정적인 영향을 줄 것으로 기대됩니다.

하지만 아직 개선해야 할 부분도 남아있습니다. 앞으로 다양한 환경에서 테스트를 진행하여 최적의 Lazy Loading 옵션을 찾고, 사용자 경험을 더욱 향상시킬 수 있도록 지속적으로 개선해 나갈 계획입니다. 작은 변화가 큰 차이를 만들 수 있다는 것을 다시 한번 깨달으며, 앞으로도 꾸준히 성능 개선에 힘써 더욱 쾌적한 사용자 경험을 제공할 수 있도록 노력하겠습니다.

 

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤