효율적인 캐시 정책으로 정적 자산 제공(3가지 방법)

게시 됨: 2022-04-12

효율적인 캐시 정책으로 정적 자산을 제공하면 사용자의 브라우저가 이러한 파일을 로컬에 저장하므로 페이지를 로드하는 데 필요한 시간이 줄어듭니다. 일반적으로 페이지가 로드되는 즉시 HTML, CSS, JavaScript 및 이미지와 같은 해당 페이지의 모든 리소스를 다운로드해야 합니다.

브라우저 캐싱을 사용하면 브라우저가 로컬 캐시에서 CSS, JavaScript 및 이미지와 같은 정적 자산을 검색할 수 있습니다. 결과적으로 페이지가 더 빨리 로드됩니다. 캐시된 콘텐츠는 페이지에 대한 후속 방문이 사용자의 첫 번째 방문보다 빠르지만 첫 번째 방문보다는 빠를 것임을 의미합니다.

목차

캐시란?

캐시는 해당 데이터에 대한 후속 요청이 데이터의 기본 저장 위치에 액세스하는 것보다 더 빠르게 처리될 수 있도록 본질적으로 종종 일시적인 데이터의 일부를 저장하는 컴퓨팅의 고속 데이터 저장 계층입니다. 캐싱을 사용하면 이전에 검색하거나 계산한 데이터를 빠르게 재사용할 수 있습니다.

캐싱은 실제로 어떻게 작동합니까?

캐시의 데이터는 일반적으로 RAM(랜덤 액세스 메모리)과 같은 빠른 액세스 하드웨어에 보관되지만 소프트웨어 구성 요소와 함께 사용할 수도 있습니다. 캐시의 기본 목표는 뒤에 있는 느린 스토리지 계층에 연결할 필요가 없도록 하여 데이터 검색 속도를 높이는 것입니다.

전체 데이터와 오래 지속되는 데이터를 저장하는 데이터베이스와 달리 캐시는 데이터의 일부를 일시적으로 저장하는 경우가 많습니다.

캐싱의 장점

캐싱의 몇 가지 장점을 살펴보겠습니다.

애플리케이션의 성능 향상

메모리가 디스크(자기 또는 SSD)(밀리초 미만)보다 훨씬 빠르기 때문에 메모리 내 캐시에서 데이터를 읽는 것은 매우 빠릅니다. 이렇게 훨씬 더 빠른 데이터 액세스는 애플리케이션의 전체 성능을 향상시킵니다.

백엔드 로드를 줄여야 합니다.

읽기 로드의 일부를 백엔드 데이터베이스에서 인메모리 계층으로 이동함으로써 캐싱은 데이터베이스에 대한 스트레스를 줄여서 과부하 시 성능 저하 또는 스파이크 발생 시 충돌을 방지합니다.

데이터베이스의 핫스팟을 제거해야 합니다.

많은 응용 프로그램은 나머지 데이터보다 더 자주 데이터 하위 집합을 검색하는 경향이 있습니다. 결과적으로 데이터베이스에 핫스팟이 발생할 수 있으며 가장 자주 사용하는 데이터에 대한 처리량 요구 사항에 따라 리소스를 과도하게 프로비저닝해야 할 수 있습니다. 자주 액세스하는 데이터의 경우 인메모리 캐시는 오버프로비저닝 요구 사항을 줄이는 동시에 빠르고 예측 가능한 성능을 제공합니다.

데이터베이스 비용 절감

IOPS(초당 입/출력 작업)는 단일 캐시 인스턴스에서 수행할 수 있으므로 여러 데이터베이스 인스턴스를 대체하고 비용을 크게 절감할 수 있습니다. 이는 기본 데이터베이스가 데이터 양에 따라 요금을 부과하는 경우 중요합니다. 특정 조건에서 큰 가격 차이가 있을 수 있습니다.

예측 가능한 성능

애플리케이션 사용률의 급증을 처리하는 것은 현대 시스템에서 만연한 문제입니다. 데이터베이스 로드가 증가하면 데이터 검색 시간이 길어져 전체 애플리케이션 성능을 예측할 수 없게 됩니다. 이 문제는 처리량이 많은 인메모리 캐시를 사용하여 해결할 수 있습니다.

읽는 사람 수 증가(IOPS)

인메모리 시스템은 대기 시간이 감소할 뿐만 아니라 유사한 디스크 기반 데이터베이스보다 훨씬 더 높은 요청 속도(IOPS)를 갖습니다. 분산 사이드 캐시로 활용하면 단일 인스턴스가 초당 수백 또는 수천 개의 요청을 처리할 수 있습니다.

자산 캐싱이란 무엇입니까?

캐싱은 간단한 개념입니다. 브라우저는 자산을 다운로드할 때 서버의 정책을 사용하여 후속 방문 시 다시 다운로드해야 하는지 여부를 결정합니다. 서버가 정책을 제공하지 않으면 브라우저가 기본값으로 설정되며 이는 일반적으로 해당 세션에 대한 파일을 캐싱함을 의미합니다.

정적 자산 캐싱이란 무엇입니까?

브라우저가 리소스를 일시적으로 보유하거나 캐시해야 하는 기간을 지정합니다. 해당 리소스에 대한 모든 후속 요청은 네트워크가 아닌 브라우저의 로컬 복사본에서 제공됩니다.

사이트 방문자가 브라우저나 서버에 아직 캐시되지 않은 새 버전을 가져오게 할 때마다 비효율적인 캐시 정책을 사용하고 있는 것입니다. 실제로 캐시되고 바로 사용할 수 있는 저장된 콘텐츠를 제공할 수 있습니다.

또한 읽기: WordPress에서 깨진 영구 링크를 수정하는 방법

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

정적 파일이 변경되지 않는 경우(또는 허용 가능한 캐시 무효화 메커니즘이 있는 경우) 캐시 정책을 6개월 또는 1년으로 설정하는 것이 좋습니다.

글로벌 CSS/JS 파일, 로고, 그래픽 등과 같은 요소는 완성된 웹사이트에서 거의 변경되지 않으므로 6개월 또는 1년은 작업하기에 공정한 캐시 만료입니다.

물론 위의 정적 파일을 자주 변경하는 경우 3개월 이상이라면 더 짧은 캐시 만료 시간을 선택할 수 있습니다.

효율적인 캐시 정책으로 정적 자산 제공

효율적인 캐시 정책을 사용하여 정적 파일을 제공할 수 있는 여러 가지 방법이 있습니다. 3가지 방법에 대해 설명합니다.

  1. LiteSpeed ​​Enterprise 또는 Apache를 사용하는 경우 .htaccess 파일 사용
  2. LiteSpeed ​​캐시 사용
  3. W3 Total Cache 플러그인 사용

Apache 및 LiteSpeed ​​Enterprise에서 .htaccess 파일을 사용하여 정적 자산 제공

참고: OpenLiteSpeed ​​또는 NGINX를 사용하는 경우 이 방법이 작동하지 않습니다.

WordPress 대시보드에 로그인

플러그인 -> 왼쪽 메뉴에서 새로 추가를 클릭합니다.

"파일 관리자"를 검색합니다. 플러그인 설치 및 활성화

왼쪽 메뉴에서 "파일 관리자"를 클릭합니다.

public_html 폴더에서 .htaccess를 마우스 오른쪽 버튼으로 클릭하고 이름 바꾸기를 클릭합니다.

파일 이름 변경(.htaccess-error)

상단에서 "새 파일" 아이콘 클릭

파일 이름을 ".htacess"로 지정합니다.

다음 코드를 붙여넣고 저장하고 닫습니다.

 <IfModule mod_expires.c> ExpiresActive On # CSS, JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" # Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/webm "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # Others ExpiresByType application/pdf "access plus 1 year" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" </IfModule>

LiteSpeed ​​Cache를 사용하여 정적 자산 제공

LiteSpeed ​​Cache 플러그인을 설치하고 활성화해야 합니다. 일단 설치되면 아래 가이드를 따르세요.

  • WordPress 대시보드로 이동
효율적인 캐시 정책으로 정적 자산 제공
  • 왼쪽 메뉴에서 LiteSpeed ​​Cache -> Cache를 클릭합니다.
  • 상단에서 "브라우저" 탭을 클릭합니다.
  • "브라우저 캐시" 토글 켜기
  • "변경 사항 저장"을 클릭하십시오.

W3 Total Cache를 사용하여 정적 자산 제공

먼저 W3 Total Cache 플러그인을 설치 및 활성화한 후 아래 가이드를 따르세요.

  • WordPress 대시보드로 이동
  • 왼쪽 메뉴에서 성능 -> 브라우저 캐시를 클릭합니다.
  • "미디어 및 기타 파일"까지 아래로 스크롤합니다. "헤더 수명 만료"를 15552000초(180일) 이상으로 변경합니다.
  • "모든 설정 저장"을 클릭하십시오.

결론

효율적인 캐시 전략으로 정적 자산을 제공하면 사용자의 브라우저가 이러한 파일을 로컬에 저장하여 페이지를 로드하는 데 걸리는 시간을 줄입니다. HTML, CSS, JavaScript 및 그림과 같은 페이지의 모든 리소스는 로드되는 즉시 다운로드해야 합니다.