WordPress에서 효율적인 캐시 정책으로 정적 자산을 제공하는 방법

사용자 친화적인 웹사이트의 특징 중 하나는 방문자가 로딩하는 동안 너무 오래 기다리지 않는다는 것입니다. 정적 자산을 캐싱하는 것은 사이트 성능을 개선하는 데 중요한 단계이지만 단순히 이를 설정하고 계속 진행하는 것은 그다지 도움이 되지 않습니다. 효율적인 WordPress 캐싱 정책이 없으면 빠른 로딩 시간을 제공하는 데 어려움을 겪을 수 있습니다.

다행히 WordPress에서 브라우저 캐싱을 활용하는 방법을 배우는 것은 생각보다 쉽습니다. 브라우저 캐싱을 수동으로 구성할 수 있으며 콘텐츠 관리 시스템(CMS)을 통해 이를 수행하는 도구를 사용할 수도 있습니다.

이 기사에서는 브라우저 캐싱의 작동 방식과 이점에 대해 설명합니다. 또한 사이트에서 캐싱이 활성화되어 있는지 확인하는 방법과 캐싱을 활성화하는 다양한 방법을 살펴봅니다.

브라우저 캐싱이란 무엇입니까?

브라우저 캐싱은 웹 사이트 요소의 복사본을 컴퓨터에 저장하는 프로세스입니다. 웹 사이트를 방문하면 브라우저에서 이미지 및 텍스트와 같은 다양한 콘텐츠를 다운로드합니다. 사이트를 방문할 때마다 이 콘텐츠를 다운로드하는 대신 브라우저는 나중에 필요할 경우를 대비하여 일부 콘텐츠를 "캐시"하거나 저장합니다.

다음에 사이트를 방문하면 브라우저가 로컬에 저장된 요소를 확인합니다. 그런 다음 사이트의 서버에서 요청하는 대신 캐시에서 이러한 요소를 로드합니다. 이렇게 하면 캐시에 저장된 자산의 수에 따라 페이지 로드 속도가 훨씬 빨라질 수 있습니다.

지금 당장 브라우저의 캐시를 확인해야 한다면 그 안에 수백 메가바이트의 파일이 있을 것입니다. 대부분의 최신 브라우저에서는 개인 정보 설정으로 이동하면 캐시된 파일의 개요를 볼 수 있습니다.

캐싱에 대한 문제는 브라우저가 자체적으로 캐싱을 결정할 수 없다는 것입니다. WordPress에서 브라우저 캐싱을 활용하려면 그렇게 하도록 웹 사이트 또는 서버를 구성해야 합니다. 이것은 귀하의 사이트가 브라우저가 캐시하는 자산과 기간을 제어한다는 것을 의미합니다.

정적 자산 캐싱의 이점은 무엇입니까?

브라우저 캐싱의 주요 이점은 방문자가 사이트로 돌아올 때 페이지를 더 빨리 로드할 수 있도록 도와준다는 것입니다. 웹 사이트의 모든 요소를 ​​캐시할 수 없기 때문에 "정적 자산"에 대해 이야기합니다.

동적 자산은 페이지를 로드할 때마다 변경되는 요소입니다. 예를 들어 Twitter 또는 Instagram과 같이 게시물 피드를 실시간으로 표시하는 앱에 로그인하면 해당 자산은 동적입니다.

동적 자산은 자주 변경될 수 있으므로 캐싱하는 데 아무 소용이 없을 수 있습니다. 결국, 다음에 Twitter나 Instagram에 로그인하면 완전히 새로운 게시물을 보게 될 것입니다.

캐싱은 정적 자산으로 제한될 때 최상의 결과를 제공합니다. WordPress에서 효율적인 캐시 정책으로 정적 자산을 제공하는 방법을 배우면 여러 가지 이점이 있습니다.

• 대역폭 사용량 줄이기. 캐시된 자산은 로컬 저장소에서 로드되기 때문에 서버와 방문자의 장치 간에 전송되는 데이터가 적습니다. 이를 통해 제한된 인터넷 요금제를 사용하는 방문자는 데이터 사용량을 절약할 수 있습니다.
• 서버의 부하를 줄입니다. 브라우저가 캐시된 자산을 사용하는 경우 서버는 해당 파일에 대한 요청을 적게 받습니다. 이렇게 하면 서버의 작업 부하가 줄어들고 트래픽이 많은 기간 동안 서버 과부하를 방지할 수 있습니다.
• 부분 오프라인 브라우징 활성화. 경우에 따라 정적 자산을 캐싱하면 방문자가 오프라인일 때도 웹 사이트의 특정 부분에 액세스할 수 있습니다. 브라우저가 이전에 필요한 파일을 캐시한 경우 활성 인터넷 연결 없이도 콘텐츠를 표시할 수 있습니다.

정적 자산을 캐싱하면 서버 리소스를 더 잘 활용하고 방문자의 경험을 개선할 수 있습니다. 이 모든 것은 서버가 브라우저에 캐싱하도록 지시해야 하는 자산에 대해 서버에 지시함으로써 작동합니다.

사이트에서 브라우저 캐싱이 활성화되어 있는지 확인하는 방법

웹사이트가 캐싱을 활용하는지 확인하는 가장 쉬운 방법은 Firefox 및 Google Chrome에서 찾을 수 있는 것과 같은 브라우저 개발자 도구를 사용하는 것입니다. 이 접근 방식을 사용하려면 일부 코드를 살펴봐야 하지만 코드를 이해하기 위해 개발자가 될 필요는 없습니다.

Google 크롬에서 이 작업을 수행하려면 확인하려는 웹사이트를 방문하고 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭한 다음 검사 옵션을 선택합니다. 그러면 브라우저 내에서 다음과 같은 개발자 도구 탭이 열립니다.

네트워크 탭을 클릭합니다. 빈 목록이 표시되면 개발자 도구 탭이 열린 상태에서 페이지를 새로고침해야 합니다. 네트워크 탭에는 페이지에 액세스하는 동안 브라우저가 로드하는 모든 요청과 자산이 표시됩니다.

관심 있는 요소가 목록의 첫 번째 항목이어야 합니다. 우리의 경우 Jetpack.com이고 페이지 헤더가 포함되어 있습니다. 해당 파일을 선택하면 오른쪽에 새 탭이 열리고 헤더 섹션으로 바로 이동합니다.

일부 헤더는 사이트에서 캐싱을 사용하는지 여부와 구현 방법을 알려줍니다. 이것들은:

• 캐시 제어. 이 헤더는 max-age(리소스가 신선한 것으로 간주되는 최대 시간) 또는 no-cache(캐시된 복사본을 릴리스하기 전에 유효성 검사를 위해 캐시가 원본 서버에 요청을 제출하도록 강제함)와 같은 캐싱 지시문을 지정합니다.
• 만료됩니다. 이 헤더는 리소스의 만료 날짜와 시간을 제공합니다. 그 후에는 리소스가 오래된 것으로 간주되어 브라우저에서 유효성을 다시 검사합니다.
• ETag. 이 헤더는 리소스의 특정 버전에 대한 식별자입니다. 리소스가 변경되면 ETag도 변경되어 브라우저가 캐시된 리소스가 여전히 유효한지 확인할 수 있습니다.
• 최종 수정. 이 헤더는 리소스의 마지막 수정 날짜를 나타냅니다. 브라우저는 이 정보를 사용하여 캐시된 버전이 최신 버전인지 확인할 수 있습니다.

파일에서 이러한 헤더를 찾을 수 있으면 웹 사이트에서 캐싱을 사용하는 것입니다. 특정 캐싱 구성은 사이트마다 다를 수 있습니다. 일부 사이트는 브라우저에 하루 동안 정적 파일을 저장하도록 지시하는 반면 다른 사이트는 몇 달 또는 그 이상 파일을 저장하도록 지시합니다.

플러그인으로 브라우저 캐싱을 활용하는 방법

WordPress 사이트에서 브라우저 캐싱을 활용하는 가장 쉬운 방법은 플러그인을 사용하는 것입니다. 사용할 수 있는 많은 캐싱 플러그인이 있습니다. 한 가지 좋은 옵션은 WP 슈퍼 캐시입니다.

사이트에 WP Super Cache를 설치하고 활성화하면 여러 접근 방식을 사용하여 캐싱을 구현할 수 있습니다. 가장 간단한 방법은 설정 → WP 슈퍼 캐시 로 이동하여 캐싱 옆에 있는 캐싱 켜기 옵션을 선택하는 것입니다.

플러그인의 기본 설정은 로그아웃한 방문자를 위한 캐싱을 활성화하고 저장된 자산의 수명을 30분으로 설정합니다. 이 설정을 변경하려면 고급 탭으로 이동해야 합니다.

여기에서 캐싱을 활성화할 방문자, 동적 캐싱 활성화 여부, 페이지를 업데이트할 때 플러그인이 캐시를 지워야 하는지 등을 결정할 수 있습니다. 플러그인은 가장 효과적인 옵션을 추천하여 도움을 줍니다.

캐싱에 대해 잘 알지 못하는 경우 기본 설정을 그대로 사용하는 것이 좋습니다. 작동 방식을 완전히 이해하지 않고 캐싱 설정을 구성하면 웹 사이트에 문제가 발생할 수 있습니다.

플러그인 없이 브라우저 캐싱을 활용하는 방법

플러그인을 사용하지 않으려면 웹사이트에서 수동으로 브라우저 캐싱을 활성화할 수 있습니다. 이 프로세스에는 선택한 구현 방법에 따라 서버 또는 사이트 수준에서 코드를 처리하는 작업이 포함될 수 있습니다.

1. NGINX에 "Cache-Control" 및 "Expires" 헤더 추가

NGINX에서 "Cache-Control" 및 "Expires" 헤더를 추가하려면 서버 구성 파일을 수정해야 합니다. 이 파일은 일반적으로 nginx.conf 라고 하며 기본 nginx 디렉토리에 있습니다.

사이트 서버에 연결하는 가장 쉬운 방법은 FTP(파일 전송 프로토콜) 클라이언트를 사용하는 것입니다. 그런 다음 nginx.conf 파일을 찾아야 합니다. 이 파일은 다음 중 하나에 있어야 합니다.

/etc/nginx/nginx.conf 또는 /etc/nginx/sites-available/default .  

텍스트 편집기를 사용하여 파일을 열고 nginx.conf 내에서 서버 코드 블록을 찾습니다. 여기에 서버가 브라우저에 캐시하도록 지시해야 하는 파일과 캐시가 만료되기 전에 캐시가 지속되는 기간을 지정하는 다음과 같은 새 코드 블록을 추가할 것입니다.

 location ~* \.(jpg|jpeg|png|gif)$ {    expires 30d;    add_header Cache-Control "public, no-transform"; }

이 코드에는 "Cache-Control" 및 "Expires" 헤더가 모두 포함됩니다. 만료 시간 범위 와 브라우저가 캐시해야 하는 파일 형식을 모두 수정할 수 있습니다.

캐시할 파일 유형을 결정할 수 없다면 WordPress 미디어 폴더에 무엇이 있는지 살펴보세요. 방문자가 정기적으로 액세스하는 모든 정적 파일은 캐시되어야 합니다. 만료 헤더의 경우 일반적으로 30일이 대부분의 웹사이트에 적합한 기간입니다.

코드를 추가한 후 변경 사항을 파일에 저장하고 편집기를 종료합니다. 변경 사항을 적용하려면 NGINX를 다시 시작해야 합니다.

2. Apache에서 "Cache-Control" 및 "Expires" 헤더 추가

Apache에서 "Cache-Control" 및 "Expires" 헤더를 사용하려면 해당 모듈을 활성화해야 합니다. 터미널을 열고 다음 명령을 실행하여 이러한 모듈을 활성화할 수 있습니다.

 sudo a2enmod expires sudo a2enmod headers sudo systemctl restart apache2

마지막 명령은 두 모듈이 모두 활성화된 상태에서 Apache를 다시 시작합니다. 다음으로 일반적으로 httpd.conf 또는 apache2.conf 라고 하는 Apache 구성 파일을 수정해야 합니다.

이 파일은 /etc/httpd/conf/httpd.conf , /etc/apache2/apache2.conf 또는

/etc/apache2/sites-available/000-default.conf , 서버 구성에 따라 다름.

그런 다음 Apache 구성 파일에서 <Directory> 블록을 찾고 그 안에 다음 코드를 추가합니다.

 <IfModule mod_expires.c>    ExpiresActive On    ExpiresDefault "access plus 1 month"    ExpiresByType image/jpg "access plus 1 month"    ExpiresByType image/jpeg "access plus 1 month"    ExpiresByType image/gif "access plus 1 month"    ExpiresByType image/png "access plus 1 month" </IfModule> <IfModule mod_headers.c>    <FilesMatch "\.(jpg|jpeg|png|gif)$">        Header set Cache-Control "public, no-transform"    </FilesMatch> </IfModule>

해당 코드의 첫 번째 부분은 캐시된 파일의 만료 설정을 관리합니다. 두 번째 부분은 브라우저가 캐시해야 하는 파일 형식을 나타냅니다. NGINX와 마찬가지로 브라우저에서 저장하려는 파일에 따라 이러한 설정을 수정할 수 있습니다.

완료되면 변경 사항을 Apache 구성 파일에 저장하고 닫습니다. 변경 사항을 적용하려면 Apache를 다시 시작해야 합니다.

3. 콘텐츠 전송 네트워크(CDN) 사용

콘텐츠 전송 네트워크(CDN)는 주요 지역에 웹 사이트의 캐시된 복사본을 저장하는 데 사용할 수 있는 서버 네트워크입니다. CDN은 유료 서비스인 경향이 있으며 방문자에게 지리적으로 가장 가까운 서버에서 사이트의 캐시된 복사본을 제공함으로써 도움을 줍니다.

이 접근 방식은 자체 서버의 부하를 줄입니다. 또한 CDN은 최상의 성능을 위해 최적화되는 경향이 있으며 일반적으로 전 세계에 배포되므로 각 방문자에게 가능한 최상의 위치에서 웹 사이트를 제공할 수 있습니다.

Jetpack CDN은 WordPress와 원활하게 통합되고 사용하기 쉽고 매우 효과적인 옵션입니다.

무엇보다도 웹 사이트의 이미지 및 기타 유형의 정적 자산을 저장하는 무료 CDN입니다. 설치하고 활성화하면 WordPress 대시보드의 Jetpack → 설정 으로 이동하여 CDN을 활성화할 수 있습니다.

그런 다음 성능 및 속도 설정을 찾아 사이트 가속기 활성화 옵션을 전환합니다.

4. 타사 스크립트 및 자산을 로컬로 호스팅(가능할 때마다)

타사 스크립트는 외부 사이트의 코드, 추적 픽셀, 글꼴 및 작업을 위해 로드해야 하는 기타 자산과 같은 요소입니다. 타사 소스에서 로드하는 스크립트와 자산이 많을수록 프로세스 시간이 길어져 사이트 속도가 느려질 수 있습니다.

이상적으로는 사용하지 않는 타사 스크립트 및 자산을 제거해야 합니다. 또는 로컬 서버에서 코드와 자산을 호스팅하여 로드 시간을 줄일 수 있습니다.

PageSpeed ​​Insights를 사용하여 사용하지 않는 JavaScript뿐만 아니라 타사 스크립트를 식별할 수 있습니다. 이 도구는 페이지에서 제거할 수 있는 사용하지 않는 코드 및 타사 스크립트 목록을 포함하여 사이트 성능을 개선할 수 있는 기회를 강조 표시합니다.

웹사이트에서 사용하지 않는 타사 스크립트를 안전하게 삭제할 수 있습니다. 중요한 스크립트의 경우 로컬에서 호스팅하는 옵션을 고려할 수 있습니다.

최종 단계: Core Web Vitals 개선을 위한 무료 플러그인 설치

WordPress에서 브라우저 캐싱을 활용하는 방법을 배우는 것은 사이트 성능을 개선하는 핵심 단계입니다. 다행스럽게도 사용자 경험을 개선하기 위해 할 수 있는 유일한 일은 아닙니다.

Google은 Core Web Vitals라는 메트릭 세트를 사용하여 사이트 사용자 경험의 품질을 측정합니다. 주요 성과 지표는 다음과 같습니다.

• 가장 큰 콘텐츠가 있는 페인트(LCP). 이 메트릭은 페이지에서 가장 큰 자산을 로드하는 데 걸리는 시간을 측정합니다. 일반적으로 페이지의 전체 로드 시간을 나타내는 좋은 지표입니다.
• 첫 번째 입력 지연(FID). 페이지를 로드하고 대화형이 되는 사이에 지연이 있습니다. 페이지 로드가 완료되었다고 생각할 수 있지만 양식이나 링크와 같은 요소와 상호 작용할 수 없다면 FID가 높을 수 있습니다.
• 누적 레이아웃 이동(CLS) . 페이지가 로드되는 동안 레이아웃이 이동하여 브라우저에서 요소를 이동할 수 있습니다. 움직이는 요소가 많을수록 CLS 점수가 높아집니다. 이상적으로는 0이어야 합니다.

WordPress에서 Core Web Vitals를 개선하는 방법에는 여러 가지가 있습니다. 가장 쉬운 방법은 이러한 지표 뒤에 있는 모든 변수를 최적화하는 플러그인을 사용하는 것입니다.

Jetpack Boost는 Core Web Vitals를 개선하기 위한 여러 전략을 구현하는 데 도움이 됩니다. CSS 전달을 최적화하고, 필수적이지 않은 JavaScript를 연기하고, 지연 로딩을 활성화할 수 있습니다.

일반적으로 이러한 구성을 구현하거나 수동으로 구현하려면 여러 플러그인을 사용해야 합니다. Jetpack Boost를 설치하고 활성화한 후 Jetpack → Boost 로 이동하고 해당 옵션을 전환하여 모든 설정을 활성화할 수 있습니다.

WordPress 브라우저 캐싱에 대해 자주 묻는 질문

WordPress에서 브라우저 캐싱의 필수 요소를 다루었지만 여전히 프로세스에 대해 몇 가지 질문이 있을 수 있습니다. 가장 일반적인 몇 가지를 살펴보겠습니다.

브라우저 캐싱은 안전합니까?

브라우저 캐싱은 매우 안전합니다. 방문하는 대부분의 웹 사이트는 방문자의 성능을 향상시키기 위해 일종의 캐싱 정책을 사용합니다. 방문자는 웹사이트의 헤더를 파헤치거나 캐시를 지워야 하는 경우가 아니면 이를 알아채지 못할 것입니다.

브라우저 캐싱이 안전하지 않을 수 있는 유일한 방법은 잘못된 구현을 통해서입니다. 제대로 구성되지 않으면 브라우저가 자산을 올바른 방식으로 저장할 수 없거나 페이지가 로드되지 않을 수 있습니다(매우 드문 경우임).

브라우저 캐싱과 서버 캐싱: 어떻게 다릅니까?

브라우저와 서버 캐싱은 매우 유사하게 작동합니다. 유일한 차이점은 한 방법은 파일을 로컬에 저장하는 반면 다른 방법은 서버 측에서 파일을 저장한다는 것입니다.

작동 중인 서버 캐싱의 가장 좋은 예는 CDN입니다. CDN을 사용하면 타사 서버(또는 해당 클러스터)에 사이트의 캐시된 복사본을 저장할 수 있습니다. 방문자가 웹 사이트에 액세스하려고 하면 CDN이 해당 연결을 가로채 사이트의 저장된 복사본을 제공합니다.

이 시나리오에서 방문자는 여전히 브라우저를 통해 정적 콘텐츠를 캐시할 수 있습니다. CDN이 종종 기존 서버보다 훨씬 더 나은 로딩 시간을 제공한다는 점을 제외하면 최종 사용자의 경험은 어떤 식으로든 바뀌어서는 안 됩니다.

내 사이트의 성능을 개선하기 위해 무엇을 더 할 수 있습니까?

브라우저 캐싱을 활용하는 것 외에 사이트 성능을 개선하기 위해 할 수 있는 일이 많이 있습니다. 다른 변경 사항에는 렌더링 차단 리소스 제거, CSS 축소, CDN 사용, HTTP 요청 감소, TTFB 및 서버 응답 시간 감소 등이 있습니다.

사이트 성능과 관련하여 일부 변경 사항은 다른 변경 사항보다 더 효과적입니다. 로딩 시간의 개선은 사용자 경험에 상당한 영향을 미칠 수 있으며, 이는 비즈니스의 전환율을 높일 수 있습니다.

WordPress 사이트에서 정적 자산 제공 시작

WordPress에서 브라우저 캐싱을 활용하는 것은 로딩 시간을 개선하는 가장 효과적인 방법 중 하나입니다. 효율적인 전략은 정적 파일에 초점을 맞추고 주기적으로 다시 로드하도록 구성하는 것입니다. 이렇게 하면 방문자가 오래된 요소에 얽매이지 않습니다.

WordPress에서 브라우저 캐싱을 구현하는 가장 쉬운 방법은 WP Super Cache와 같은 플러그인을 사용하는 것입니다. 이 플러그인을 사용하면 기본 구성 집합을 사용하여 브라우저 캐싱을 활용하거나 모든 설정을 수동으로 제어할 수 있습니다. 또한 무료로 사용할 수 있습니다.

또한 Jetpack Boost를 설치하면 사이트 성능을 더욱 향상시킬 수 있습니다. 자세한 내용은 플러그인을 확인하세요!