[Web] 이미지 프리로딩과 브라우저 캐시 저장 원칙

이미지 프리로딩의 장점

이미지를 미리 로딩하면, 필요한 시점 이전에 이미지를 미리 다운로드 받아 브라우저의 캐시에 저장할 수 있습니다. 이렇게 하면 실제로 이미지가 필요할 때는 이미 캐시된 이미지를 가져와서 다운로드 속도를 높일 수 있습니다. 이는 로딩 스피너와 CSS 효과를 통해 이미지 전환이 자연스러워 보이게 하는 것보다 실질적인 다운로드 속도를 줄이는 데 도움이 됩니다.

브라우저 캐시 저장의 기본적인 원칙

1. 브라우저의 기본 캐시 동작:
   • 대부분의 브라우저는 서버로부터 받은 리소스를 캐시하려고 합니다. 이는 페이지 로드 성능을 향상시키기 위함입니다.
   • 이미지 파일은 일반적으로 캐시 가능 리소스로 간주됩니다. 따라서 브라우저는 이미지 요청이 있을 때 이를 캐시에 저장하려고 합니다.
2. 캐시 제어가 없는 경우:
   • 명시적인 Cache-Control 또는 Expires 헤더가 없으면, 브라우저는 기본적인 캐시 정책을 적용합니다. 예를 들어, 브라우저는 리소스를 일정 기간 동안 캐시할 수 있습니다. 이 기간은 브라우저의 기본 설정에 따라 달라질 수 있습니다.
   • 하지만 명확한 캐시 만료 정책이 없으면, 브라우저는 서버에 리소스가 변경되었는지 확인하기 위해 조건부 요청(예: If-Modified-Since 또는 If-None-Match)을 보낼 수 있습니다.
3. 서버 응답이 캐시를 금지하는 경우:
   • 서버가 Cache-Control: no-store 또는 ****Cache-Control: no-cache***와 같은 헤더를 포함하여 리소스 캐시를 금지하거나 제한할 수 있습니다. 이러한 헤더가 포함되어 있지 않으면, 브라우저는 기본 캐시 정책을 따릅니다.
4. 캐시된 이미지 사용:
   • 사용자가 동일한 이미지를 여러 번 요청하는 경우, 브라우저는 캐시에 저장된 이미지를 사용하여 네트워크 요청을 줄이고 로딩 시간을 단축할 수 있습니다.