이미지, 동영상과 같은 시각적 자료들은 UX를 향상시키고, 콘텐츠의 가치를 더 높여주기도 합니다.
하지만 이미지와 동영상은 파일크기가 크고 다운로드 시간이 걸려서 자칫 웹페이지의 로딩속도를 느리게 만들 수도 있습니다.
이러한 문제를 해결하기 위해서 Lazy Loading 기법을 활용할 수 있습니다.
Lazy Loading은 웹 페이지에 필요한 콘텐츠를 지연해서 로드하는 방식으로, 사용자가 스크롤링하거나 필요한 시점에만 해당 콘텐츠를 로드하여 페이지 로딩 속도를 향상시키는 방법입니다.
이번 포스팅에서는 이미지와 동영상을 로드하는 속도를 향상시키기 위해 Lazy Loading을 효과적으로 활용하는 방법에 대해 알아보도록 하겠습니다.
1. 이미지 Lazy Loading:
-
Thumbnail 이미지: 이미지의 크기와 품질을 낮춘 Thumbnail 이미지를 먼저 로드하여 웹 페이지의 초기 로딩 속도를 향상시킬 수 있습니다. 이후 사용자가 Thumbnail 이미지를 클릭하면 원본 이미지를 Lazy Loading으로 로드하는 방식을 적용할 수 있습니다. -
Intersection Observer API: Intersection Observer API를 사용하여 이미지가 사용자의 시야에 들어올 때까지 로드를 지연시킬 수 있습니다. 사용자가 스크롤링하면서 이미지가 보이는 영역에 진입할 때 해당 이미지를 동적으로 로드합니다.
2. 동영상 Lazy Loading:
-
썸네일 이미지: 동영상 파일의 크기가 크기 때문에 로딩에 많은 시간이 소요됩니다. 동영상 썸네일 이미지를 로드하여 사용자에게 동영상의 미리보기를 제공하고, 사용자가 동영상을 클릭할 때 비로드를 하도록 합니다. -
비디오 태그 속성 활용: HTML5의 비디오 태그에 "preload" 속성을 "none"으로 설정하여 초기 로딩 시 동영상 파일을 로드하지 않도록 할 수 있습니다. 대신 JavaScript를 사용하여 사용자의 상호작용에 따라 동영상을 로드합니다.
3. 성능 최적화:
-
이미지 포맷 선택: 웹 페이지에서 사용되는 이미지의 포맷을 최적화하여 로딩 속도를 향상시킬 수 있습니다. 예를 들어, JPEG 포맷은 압축률이 높아 파일 크기를 줄일 수 있고, PNG 포맷은 투명도를 지원하여 이미지 품질을 유지할 수 있습니다. WebP나 AVIF와 같은 최신 이미지 포맷을 사용하는 것도 고려해볼만 합니다. -
캐싱 활용: 이미지와 동영상 파일을 캐싱하여 이전에 로드한 콘텐츠를 재사용할 수 있도록 합니다. 이는 사용자가 같은 페이지를 다시 방문할 때 로딩 시간을 크게 단축시켜줍니다. -
CDN 활용: 이미지와 동영상 파일을 전 세계에 분산된 CDN(Content Delivery Network)에 호스팅하여 사용자들에게 가까운 서버에서 콘텐츠를 로드할 수 있도록 합니다. 이는 네트워크 지연 시간을 최소화하여 로딩 속도를 향상시킬 수 있습니다.
4. 사용자 경험 개선:
-
로딩 스피너: 이미지와 동영상이 로드되는 동안 사용자에게 로딩 상태를 시각적으로 보여줄 수 있는 로딩 스피너를 활용합니다. 이로써 사용자는 로딩이 진행 중임을 인지하고 기다릴 수 있습니다. -
트리거 포인트 설정: 사용자가 스크롤링하는 동안 이미지와 동영상을 로드하는 것이 아니라, 사용자가 특정 요소를 클릭하거나 스크롤링하여 도달하는 등의 트리거 포인트를 설정합니다. 이는 사용자가 콘텐츠를 요청할 때까지 로딩을 지연시키는 데 도움이 됩니다.
