개요
웹 페이지의 성능 최적화는 사용자 경험을 향상시키고 페이지 로딩 속도를 개선하는 데 중요한 역할을 합니다. 이미지는 웹 페이지에서 주요한 자산이지만, 그 크기와 로딩 방식에 따라 성능에 큰 영향을 줄 수 있습니다. 이 포스팅에서는 이미지 최적화와 Lazy Loading 기술을 활용하여 웹 성능을 향상시키는 방법을 자세히 알아보겠습니다
1. 이미지 최적화
웹 페이지에서 사용되는 이미지는 대부분 고해상도의 사진이나 그래픽 요소입니다. 이러한 이미지는 크기가 크고 다운로드에 시간이 걸리므로, 최적화된 이미지를 사용해야 합니다. 이미지 최적화를 위해 다음과 같은 접근 방법을 사용할 수 있습니다.
이미지 포맷 선택
JPEG, PNG, GIF, WebP 등 이미지 포맷의 특징과 사용 사례를 파악하여 최적의 포맷을 선택합니다.
이미지 압축
이미지 파일의 용량을 줄이기 위해 압축 도구나 온라인 서비스를 활용합니다. 압축 과정에서 이미지 품질을 유지하면서 파일 크기를 최소화해야 합니다. 특히, 구글에서 개발한 최신 이미지 포맷인 WebP는 압축률이 높고 품질도 좋아 많은 개발자들이 선호하는 포맷입니다.
레티나 디스플레이 대응: 고해상도 디스플레이를 지원하기 위해 2배 크기의 이미지를 사용하고 CSS나 JavaScript를 활용하여 레티나 디스플레이에서 적절한 이미지를 렌더링합니다.
2. Lazy Loading
Lazy Loading은 페이지 로딩 시점에 모든 이미지를 불러오는 것이 아니라, 사용자가 스크롤하여 해당 이미지가 보이는 시점에 동적으로 로딩하는 방식입니다. 이를 통해 초기 페이지 로딩 속도를 개선할 수 있으며 Lazy Loading을 구현하기 위해 다음과 같은 방법을 사용할 수 있습니다:
Intersection Observer API
Intersection Observer API를 활용하여 뷰포트에 들어오는 이미지를 감지하고, JavaScript로 해당 이미지를 동적으로 로딩합니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.
Image Placeholder
이미지 로딩 전에 플레이스홀더를 사용하여 사용자에게 로딩 상태를 시각적으로 표시할 수 있습니다. 이를 통해 사용자는 이미지 로딩이 진행 중임을 알 수 있고, 빈 공간을 피해 페이지 레이아웃이 무너지는 것을 방지할 수 있습니다.
2.1 Chrome의 자동 Lazy Loading 속성
최신 버전의 Chrome에서는 "img" 태그에 loading 속성을 추가함으로써 이미지의 Lazy Loading을 자동으로 처리할 수 있습니다. 이 속성을 사용하면 이미지가 사용자의 뷰포트에 진입하기 전까지는 이미지를 로딩하지 않고, 필요한 시점에 동적으로 로딩됩니다.
"img" 태그에 loading 속성을 추가하여 자동 Lazy Loading을 활성화할 수 있습니다.
<img src="image.jpg" loading="lazy" alt="image.png">위의 코드를 사용했을 경우의 장점은 다음과 같습니다.
-
쉬운 구현 : loading 속성을 추가함으로써 간단하게 Lazy Loading을 적용할 수 있습니다. 추가적인 JavaScript 코드나 라이브러리의 사용이 필요하지 않습니다.
-
자동 최적화 : Chrome은 자동 Lazy Loading을 통해 페이지의 성능을 최적화합니다. 사용자가 필요한 이미지만 로딩되므로 초기 페이지 로딩 속도가 개선되고 대역폭을 절약할 수 있습니다.
Chrome의 자동 Lazy Loading 기능을 활용할 때는 몇 가지 주의할 점이 있습니다.
- 호환성 확인 : loading 속성은 Chrome 76 버전부터 지원되며, 다른 브라우저에서는 호환되지 않을 수 있습니다. 따라서 기능을 사용하기 전에 해당 브라우저에서의 호환성을 확인해야 합니다.
- 이미지 크기 지정 : 이미지가 로딩되기 전에는 이미지의 크기가 알려지지 않아 페이지 레이아웃이 변경될 수 있습니다. 이를 방지하기 위해 CSS나 width 및 height 속성을 사용하여 이미지의 크기를 지정해주는 것이 좋습니다.
자동 Lazy Loading을 적용한 후에도 웹 페이지의 성능을 지속적으로 모니터링하고 최적화해야 합니다. 개발자 도구와 성능 모니터링 도구를 사용하여 페이지 로딩 속도, 이미지 로딩 상태 등을 확인 후 필요한 개선 사항을 식별하고, Lazy Loading을 포함한 기타 성능 최적화 기법을 활용하여 웹 페이지의 성능을 꾸준히 개선해 나가는 것이 필수적입니다.
3. 이미지 캐싱
이미지 캐싱은 이미지 리소스를 로컬 저장소에 저장하고, 이후에는 서버에서 이미지를 다시 요청하지 않고 캐시된 이미지를 사용하는 방식입니다.
- 브라우저 캐싱
브라우저 캐싱은 이미지, CSS 파일, JavaScript 파일 등의 리소스를 사용자의 로컬 컴퓨터에 저장하여 다운로드 시간과 대역폭을 절약하는 기술입니다. 브라우저는 서버로부터 리소스를 처음 요청할 때 해당 리소스를 캐싱하고, 이후에는 서버에 재요청하지 않고 캐시된 리소스를 사용합니다.
- 캐시 제어 : HTTP 헤더를 사용하여 브라우저 캐싱을 제어할 수 있습니다. Cache-Control 헤더를 설정하여 캐싱 정책을 지정하고, ETag 헤더를 사용하여 리소스의 버전을 관리할 수 있습니다.
- 파일 버전화 : 파일의 내용이 변경되었음을 알리기 위해 파일 버전화 기법을 사용할 수 있습니다. 파일 이름에 버전 번호나 해시 값을 추가하여 변경된 파일을 새로운 파일로 인식하도록 할 수 있습니다.
- CDN
CDN은 전 세계에 분산된 서버 네트워크로 구성된 플랫폼입니다. CDN을 활용하면 웹 페이지의 리소스를 가까운 서버에서 제공하여 사용자에게 더 빠른 속도와 낮은 대기 시간을 제공할 수 있습니다.
-
콘텐츠 캐싱 : CDN은 웹 페이지의 리소스를 전 세계 다양한 위치의 서버에 캐싱하여 빠른 전송을 가능하게 합니다. 사용자가 웹 페이지에 접속하면 가장 가까운 서버에서 콘텐츠를 제공하므로 로딩 속도가 개선됩니다.
-
부하 분산 : CDN은 전 세계에 분산된 서버 네트워크를 활용하여 부하를 분산시킵니다. 이를 통해 트래픽이 집중되지 않고 여러 서버에 고르게 분산되므로 웹 서버의 성능을 향상시킬 수 있습니다.
CDN에 관해선 서술할 내용이 많으므로 다른 포스팅에서 더욱 상세히 다루겠습니다.
브라우저 캐싱과 CDN을 사용했을 경우의 장점을 요악하자면 다음과 같습니다.
-
빠른 로딩 속도 : 브라우저 캐싱은 리소스를 로컬에 저장하므로 다운로드 시간을 단축시켜 웹 페이지의 로딩 속도를 향상시킵니다. CDN은 가까운 서버에서 콘텐츠를 제공하므로 대기 시간이 감소하여 사용자 경험을 향상시킵니다.
-
대역폭 절약 : 브라우저 캐싱과 CDN은 리소스 요청을 최소화하여 대역폭을 절약합니다. 캐시된 리소스를 재사용하거나 가까운 서버에서 제공함으로써 네트워크 트래픽을 줄일 수 있습니다.
앞선 설명과 같이, 브라우저 캐싱과 CDN을 활용하여 웹 성능을 최적화할 수 있습니다. 브라우저 캐싱을 통해 리소스를 로컬에 저장하고, CDN을 활용하여 콘텐츠를 가까운 서버에서 제공함으로써 사용자 경험을 향상시킬 수 있습니다. 업데이트와 캐싱 전략을 고려하고, 성능 모니터링과 최적화를 통해 지속적인 개선을 진행해야 합니다.
Image by rawpixel.com on Freepik
