[온라인 쇼핑몰 속도 최적화] 효율적인 캐시 정책으로 정적 자산 제공

✍️ 목 차


1. 효율적인 캐시 정책이 페이지 성능에 미치는 영향
2. 효율적인 캐시 정책이란?
3. 효율적인 캐시정책으로 정적자산을 제공하는 방법
    3-1 Apache 서버 사용자
    3-2 NGINX에서 브라우저 캐싱 설정
    3-3 Microsoft IIS에서 브라우저 캐싱 설정
    3-4 워드프레스 또는 다른 CMS를 사용하는 경우

 

 

 

웹 페이지의 성능은 온라인 쇼핑몰의 성공에 핵심적인 역할을 합니다. 이에 효율적인 캐시 정책은 중요한 요소입니다. 캐시 정책을 통해 정적 자산(예: 이미지, 스타일 시트, 자바스크립트 파일 등)을 사용자의 브라우저에 저장하면, 이러한 자산들을 반복적으로 로드하는 시간이 줄어들어 쇼핑몰 속도를 크게 향상시킬 수 있습니다.

 

예를 들어, 브라우저는 웹 페이지를 로드할 때마다 해당 페이지의 모든 리소스(HTML, CSS, JavaScript, 이미지 등)를 서버에서 다운로드합니다. 이렇게 되면 첫 방문에서는 필요한 과정이지만, 이후 방문에서는 시간과 리소스가 비효율적으로 사용됩니다.

 

브라우저 캐싱은 이러한 문제를 해결하기 위한 메커니즘 중 하나로, 다음과 같은 원리로 작동합니다.

● 첫 번째 방문
사용자가 웹 페이지에 처음 방문하면 브라우저는 해당 페이지의 모든 리소스를 서버에서 다운로드합니다. 이때, 서버는 이러한 리소스에 캐시 가능 여부를 지정할 수 있습니다.
● 브라우저 캐싱
서버에서 캐시 가능한 리소스에 대한 정보를 제공하면, 브라우저는 이러한 리소스를 로컬 캐시에 저장합니다. 이 때, 리소스는 주로 파일의 URL 또는 버전에 기반하여 식별됩니다.
● 다음 방문
사용자가 동일한 웹 페이지를 다시 방문하면, 브라우저는 이전에 캐시된 리소스를 로컬에서 가져옵니다. 이로써 서버에서 리소스를 다시 다운로드하는 대신 로컬에서 로드하여 로딩 시간을 크게 단축시킵니다.
효율적인 캐시 정책을 사용하면 사용자의 첫 번째 방문은 더 빠르지 않을 수 있지만, 이후 방문에서는 캐시된 내용으로 인해 페이지 로드 시간이 개선됩니다. 이는 사용자 경험을 향상시키고 대역폭 소비를 줄이는 데 도움이 됩니다.

 

 

---

 

 

💡 효율적인 캐시 정책은 페이지 성능에 어떤 영향을 줍니까?

효율적인 캐시 정책은 웹 페이지의 성능에 다음과 같은 긍정적인 영향을 미칩니다.

1. 빠른 페이지 로딩
웹 페이지의 정적 자원(이미지, 스타일 시트, 자바스크립트 파일 등)이 브라우저 캐시에 저장되면, 사용자가 해당 페이지를 다시 방문할 때 브라우저는 이러한 자원을 로컬에서 불러오므로 페이지 로딩 시간이 크게 단축됩니다. 사용자는 더 빠른 페이지 로딩을 경험하게 됩니다.

2. 서버 부하 감소
효율적인 캐시 정책을 사용하면 브라우저는 자원을 캐시에 저장하고 필요한 경우에만 서버로부터 자원을 다시 가져옵니다. 이로 인해 서버의 부하가 감소하고, 웹사이트의 전반적인 성능이 향상됩니다.

3. 네트워크 트래픽 절약
캐시된 자원을 다시 다운로드하는 것보다 로컬에서 불러오는 것이 네트워크 트래픽을 절약하며, 대역폭을 효율적으로 활용할 수 있습니다. 이는 사용자의 데이터 비용을 절약하고 더 빠른 페이지 로딩을 제공합니다.

4. 사용자 경험 향상
사용자는 웹 페이지가 더 빠르게 로드되는 데서 오는 쾌적한 경험을 느끼게 됩니다. 느린 페이지 로딩은 사용자의 참여를 떨어뜨릴 수 있으므로 빠른 페이지 로딩은 사용자 만족도를 높입니다.

5. 서버 및 네트워크 비용 절감
효율적인 캐시 정책을 통해 서버는 자원을 자주 다시 제공할 필요가 없어지므로 서버 및 네트워크 비용을 절감할 수 있습니다.
예를 들어, 로고 이미지나 페이지 폰트와 같이 거의 변경되지 않는 리소스에 긴 캐시 정책을 설정하면 사용자가 페이지를 방문할 때마다 서버에서 이러한 리소스를 다시 다운로드할 필요가 없으므로 페이지 로딩이 더욱 빠릅니다. 반면, 자주 변경되는 CSS와 JavaScript 파일에는 짧은 캐시 정책을 적용하여 사용자에게 항상 최신 버전의 코드를 제공할 수 있습니다.
캐시 정책이 짧은 리소스는 반복 방문 시 서버에서 다시 다운로드될 가능성이 높습니다.
　
캐싱은 기존 사용자들에게 빠르게 웹페이지가 로딩되도록 보장합니다.

브라우저 캐시를 통해 정적 자산을 제공하면, 반복해서 방문하는 사용자에게 웹페이지의 속도를 상당히 빠르게 할 수 있습니다.

 

 

자주 변경되는 콘텐츠에 대해 긴 캐시 정책을 설정하면, 실제 콘텐츠가 최근에 업데이트되었음에도 브라우저가 방문자에게 이전에 캐시된 오래된 콘텐츠를 제공할 수 있습니다. 이로 인해 사용자는 최신 정보를 제공받지 못하고 오래된 콘텐츠를 볼 수 있게 됩니다. 따라서 캐시 정책을 설정할 때 주의가 필요하며, 자주 업데이트되는 콘텐츠에는 짧은 캐시 기간을 설정하는 것이 바람직합니다.

 

 

 

💡 효율적인 캐시 정책이란 무엇입니까?

효율적인 캐시 정책은 웹 페이지의 성능을 향상시키는 데 중요한 역할을 하는 정책입니다. 이 정책은 캐시에 저장된 자원(예: 이미지, 스타일 시트, 자바스크립트 파일 등)의 유효 기간을 관리하며, 이를 통해 브라우저는 자원을 일정 시간 동안만 캐시에 보관하고, 유효 기간이 만료된 경우에는 서버에서 새로운 버전을 가져와 갱신합니다.

 

효율적인 캐시 정책의 주요 목표는 다음과 같습니다.

 

1. 사용자 경험 향상
사용자는 항상 최신 버전의 자원을 이용할 수 있으며, 이를 통해 웹 페이지의 로딩 속도가 빨라집니다.
2. 서버 부하 감소
자원이 캐시에 저장되어 있으면, 사용자의 요청에 대한 서버 응답이 줄어들어 서버 부하를 감소시킵니다.
3. 네트워크 트래픽 절약
캐시된 자원을 다시 다운로드하는 것보다 로컬에서 불러오는 것이 네트워크 트래픽을 절약합니다.

구글의 Lighthouse 팀은 캐시 히트(캐시에서 자원을 찾아 사용하는 비율)와 최대 유효 기간 간의 관계를 연구하여 적절한 캐시 정책을 제안합니다. 이를 통해 어떤 자원은 오랜 기간 동안(예: 6개월 또는 1년) 캐시에 보관할 수 있으며, 이를 통해 서버 요청과 대역폭 사용을 줄일 수 있습니다.
예를 들어, 전역 CSS 또는 JS 파일, 로고, 이미지와 같은 정적 파일은 자주 변경되지 않는 경우가 많으므로 6개월 또는 1년의 캐시 정책을 설정하는 것이 적절합니다. 그러나 파일이 자주 갱신되는 경우, 더 짧은 기간을 선택할 수 있습니다(예: 3개월).
웹 페이지의 성능을 향상시키고 서버 및 네트워크 리소스를 절약하려면 효율적인 캐시 정책이 필수적입니다. 이는 특히 온라인 쇼핑몰과 같이 다양한 이미지와 정보를 로드해야 하는 웹사이트에 중요합니다.

 

---

 

 

💡 효율적인 캐시 정책으로 정적 자산을 제공하는 방법은 무엇입니까?

정적 자산을 효율적으로 제공하기 위해서는 캐싱 헤더를 적절하게 설정해야 합니다. 캐싱 헤더는 서버로부터 받은 자원이 캐시에 저장될 수 있는지, 얼마나 오랫동안 저장될 수 있는지 등을 지정하는 역할을 합니다.
정적 자산을 효율적으로 제공하기 위해서는 또한 자원의 파일 크기를 최적화하고, 압축을 사용하여 전송 효율을 높이는 등의 방법도 고려해야 합니다. 이렇게 함으로써 사용자는 더 작은 파일 크기로 빠르게 자원을 다운로드할 수 있게 되며, 네트워크 대역폭을 효율적으로 사용할 수 있습니다.

 

효율적인 캐시 정책을 설정하기 위해, 다음 지침을 따르세요.

 

1. Apache 서버 사용자

Apache 웹 서버에서 정적 자산을 효율적으로 제공하기 위해 캐시 헤더를 설정하는 예시를 설명해 드리겠습니다.

1) Cache-Control 헤더 설정
Cache-Control 헤더를 사용하여 캐시 동작을 제어할 수 있습니다. 예를 들어, 자주 변경되지 않는 정적 자산에 대해 "public" 지시어를 사용하여 브라우저와 중간 캐시에서 캐시할 수 있도록 설정할 수 있습니다. 이를 통해 페이지 로딩 속도를 향상시킬 수 있습니다.

위의 예시에서는 FilesMatch 디렉티브를 사용하여 특정 파일 확장자에 대한 캐시 헤더를 설정합니다. 이 설정은 파일이 1년 동안 캐시될 수 있음을 의미합니다.

 

2) Expires 헤더 설정
Expires 헤더를 사용하여 자원의 유효 기간을 설정할 수 있습니다. 아래 예시에서는 모든 이미지 파일에 대해 Expires 헤더를 설정하고, 자원이 1년 동안 캐시될 수 있도록 합니다.

이렇게 하면 브라우저는 자원을 1년 동안 캐시하고, 사용자는 해당 자원을 다운로드하지 않고 이전에 캐시된 버전을 사용할 수 있습니다.
이러한 설정을 Apache 서버의 .htaccess 파일에 추가하면 정적 자산의 캐싱 헤더를 효율적으로 설정할 수 있습니다. 이를 통해 웹 페이지의 로딩 속도를 향상시키고 대역폭을 절약할 수 있습니다.

2. NGINX에서 브라우저 캐싱 설정

 

NGINX 서버에서 정적 자산의 캐싱 헤더를 설정하는 방법은 다음과 같습니다.
1) NGINX 설정 파일 ("nginx.conf" 또는 사이트 구성 파일)을 엽니다.

2) "location" 블록 내에서 정적 자산을 제공하는 디렉티브를 찾습니다. 예를 들어, "location /static/" 또는 "location ~* .(jpg|jpeg|png|gif|ico|css|js)$"와 같은 디렉티브입니다.

3) 해당 "location" 블록 내에서 다음과 같이 "expires" 디렉티브를 추가합니다

위의 예시는 /static/ 경로에 있는 모든 정적 자산에 대해 1년 동안의 캐시 헤더를 설정합니다.

 

4) 설정을 저장하고 NGINX 서버를 다시 시작합니다.
이렇게 하면 NGINX 서버에서 브라우저 캐싱 헤더가 효율적으로 설정됩니다. 이는 사용자에게 더 빠른 웹 페이지 로딩 속도를 제공하고, 서버 부하를 감소시키며, 네트워크 트래픽을 절약하는 데 도움이 됩니다.
참고: NGINX 설정 파일의 경로와 디렉티브는 서버 환경에 따라 다를 수 있으므로, 해당 환경에 맞게 수정하여 적용하시기 바랍니다.

3. Microsoft IIS에서 브라우저 캐싱 설정

Microsoft IIS에서 브라우저 캐싱을 설정하려면 다음 단계를 따릅니다.

1)  IIS 관리자를 열고 해당 웹사이트를 선택합니다.
2) "HTTP 응답 헤더" 모듈을 더블 클릭합니다.
3) "표준 헤더 추가"를 클릭하고 다음 설정을 추가합니다.

이름: Cache-Control                                                                                                                                                              값: public, max-age=31536000

4) "추가" 버튼을 클릭하여 헤더를 추가하고, "확인"을 클릭하여 설정을 저장합니다.
이렇게 하면 Microsoft IIS에서 특정 파일 확장자에 대한 브라우저 캐싱을 설정할 수 있습니다.

4. 워드프레스 또는 다른 CMS를 사용하는 경우

WP Rocket은 워드프레스 웹사이트의 성능을 최적화하기 위한 강력한 플러그인으로, 캐싱 기능을 포함하고 있습니다. 아래는 WP Rocket을 사용하여 캐시 정책을 설정하는 간략한 예시입니다.

1) WP Rocket 플러그인 설치 및 활성화

워드프레스 대시보드에서 WP Rocket 플러그인을 설치하고 활성화합니다.

2) 기본 설정 확인

WP Rocket을 활성화하면 기본적인 캐시 설정이 자동으로 활성화됩니다. 대부분의 경우, 이러한 설정은 이미 원하는 대로 구성되어 있을 것입니다.

3) 고급 설정 구성

WP Rocket은 캐시 정책을 조정하고 사용자 지정할 수 있는 다양한 옵션을 제공합니다. 이러한 옵션을 사용하여 웹사이트의 요구 사항에 맞게 캐시 정책을 조정할 수 있습니다.

4) 캐시 플러시

웹사이트를 업데이트하거나 변경사항을 적용한 경우, WP Rocket은 필요한 경우 캐시를 플러시하여 최신 콘텐츠를 제공합니다.
이렇게 WP Rocket과 같은 캐싱 플러그인을 사용하면 워드프레스 웹사이트의 성능을 개선하고 캐시 정책을 손쉽게 설정할 수 있습니다.