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

GTMetrix 및 Google PageSpeed ​​Insights 와 같은 웹사이트는 웹사이트의 성능을 개선하는 방법에 대한 제안을 제공합니다. 이 글을 읽고 있다면 적어도 모든 웹사이트에는 수동 최적화 또는 10Web Booster와 같은 플러그인 사용을 통해 성능을 향상시킬 수 있는 기회가 있다는 것을 알고 계실 것입니다.

두 도구 모두에서효율적인 캐시 정책으로 정적 자산을 제공하라는 제안을 볼 수 있습니다 .이 제안은 파일을 로컬에 저장하여 사이트 반복 방문이 더 빠르도록 하는 것입니다. 이 권장 사항을 개선하는 단계는 초기 사이트 방문을 개선하지 않습니다(다른 개선 사항이 있음). 그래도 모든 후속 방문은 브라우저 캐시를 활용하는 이점이 있습니다.

효율적인 캐시 정책으로 정적 자산을 제공하는 제안은 WordPress의 브라우저 캐싱 또는 브라우저 캐싱 활용이라고도 합니다.

이 문서에서는 효율적인 캐시 정책으로 정적 자산을 제공하는 방법과 효율적인 캐시 정책이 웹 사이트 성능을 향상시키는 방법에 대해 설명합니다.

GTMetrix를 사용할 때 제안은 결과 페이지에서 아래 예와 같이 표시됩니다. 브라우저 캐싱을 구현하여 잠재적인 절감 효과를 강조합니다.

Google PageSpeed ​​Insights에서 제안은 유사하게 보이며 유사한 정보를 제공합니다.

GTMetrix와 PageSpeed ​​Insights는 웹페이지 분석 프레임워크에 Lighthouse 도구를 사용하기 때문에 제안 사항은 비슷합니다 . Lighthouse 는 사이트 성능 향상을 목표로 하는 오픈 소스 도구이며 다양한 형식으로 실행할 수 있습니다.

웹 사이트의 성능이 핵심 성능 지표 (Core Web Vitals) 중 가장 중요한 메트릭 모음으로 측정되는 방식을 상기하기 위해 잠시 시간을 내어 다시 생각해 보겠습니다 .

다음은 요약입니다.

• 가장 큰 콘텐츠가 포함된 페인트( LCP ) – 가장 큰 개체가 페이지의 뷰포트에 로드되는 데 걸리는 시간을 측정합니다.
• FID (First Input Delay ) – 웹사이트 응답성을 측정합니다. 사용자가 사이트를 클릭하거나 상호작용하는 시점과 사이트가 응답하는 시점 사이의 시간을 측정합니다.
• 누적 레이아웃 이동( CLS ) – 페이지 레이아웃이 예기치 않게 이동하는 정도를 측정합니다.

LCP와 FID 모두에 긍정적인 영향을 미치는 한 가지 방법은 효율적인 캐시 정책으로 정적 자산을 제공하는 것입니다. 즉, 브라우저가 특정 시간 동안 리소스를 로컬로 저장할 수 있음을 알립니다.

효율적인 캐시 정책은 인터넷 속도가 아무리 빠르더라도 로컬 캐시에서 로드하는 것이 더 빠르고 시간을 절약하기 때문에 더 빠른 로드 시간을 의미합니다.

몇 가지 구성 요소가 있으므로 더 자세히 설명하겠습니다.

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

효율적인 캐시 정책으로 정적 자산을 제공하는 방법을 이해하려면 먼저 정적 자산, 캐싱 및 캐싱 정책과 같은 다양한 측면을 이해해야 합니다. 여기에서 그것들을 분해합시다.

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

정적 자산은 파일입니다. 이 문서에서 정적 자산을 언급할 때 곧 또는 자주 변경되지 않을 것으로 예상되는 개별 파일을 참조합니다.

이미지, javascript, CSS 파일 및 글꼴과 같은 파일은 정적 자산으로 간주될 수 있는 파일입니다. WordPress와 관련하여 이러한 CSS, javascript, 이미지 및 글꼴 파일은 일반적으로 테마, 플러그인 또는 사용자 콘텐츠의 일부입니다.

동적으로 생성된 파일 및 페이지는 정적 자산으로 간주되지 않습니다. WordPress 내에서 이에 대한 예는 캐싱 플러그인에 의해 생성된 정적 페이지입니다. 이에 대해서는 다음 섹션에서 자세히 설명합니다.

캐싱이란 무엇입니까?

캐싱은 답변을 캐시에 저장하여 다음 번에 동일한 질문을 받았을 때 답변을 더 빨리 반환할 수 있도록 하는 프로세스입니다.

관련 기사

WordPress 캐시를 안전하고 효율적으로 지우는 방법?

Top 5 추천으로 최고의 WordPress 캐싱 플러그인 찾기

이전에 WordPress 캐싱 플러그인을 사용해 본 적이 있다면 전체 페이지 캐싱에 익숙할 것입니다. 페이지 캐싱은 정적 자산 캐싱과 다릅니다.

페이지 캐싱 대 정적 자산 캐싱

이 문서에서는 특히 정적 자산(파일) 캐싱을 살펴봅니다. 나중에 사용할 수 있도록 생성된 페이지를 저장하는 전체 페이지 캐싱과 혼동해서는 안 됩니다.

페이지 캐싱과 파일 캐싱은 모두 사이트의 성능을 향상시키는 데 도움이 됩니다. 정적 자산 캐싱을 논의할 때 javascript, CSS 및 이미지 파일과 같은 특정 자산을 참조합니다.

페이지 캐싱은 동적으로 생성된 WordPress의 결과를 저장하고 특정 시간 동안 해당 버전을 예약합니다. 페이지 캐시는 일반적으로 서버 또는 CDN과 같은 에지 네트워크에 저장되며 정적 자산은 사용자 시스템에 로컬로 저장됩니다.

효율적인 캐시 정책으로 정적 자산을 제공하는 방법에 관한 캐싱은 리소스를 다시 다운로드하기 전에 브라우저에 리소스를 로컬로 저장할 수 있는 기간을 브라우저에 알리는 것을 의미합니다.

정적 자산을 캐시 가능하게 만드는 것은 무엇입니까?

GTMetrix에 따르면 다음 요구 사항을 충족하는 경우 자산을 캐시할 수 있습니다.

• 글꼴, CSS, javascript 또는 미디어 파일입니다.
• 200, 203 또는 206 HTTP 상태 코드를 반환합니다.
• 명시적인 캐시 없음 정책이 없습니다.

캐싱 정책이란 무엇입니까?

정적 자산이 무엇인지, 자산을 캐시한다는 것이 무엇을 의미하는지 살펴보았습니다.

여기에서 신선도 및 부실이라는 용어를 사용하여 캐시된 파일의 상태를 설명할 수 있습니다. 파일을 캐시에서 가져올 수 있는 경우 파일을 fresh 라고 할 수 있습니다. 만료되면 stale 이라고 합니다.

정책은 파일이 신선한 것으로 간주되는 기간과 파일이 최신인지 확인하는 방법과 같은 질문에 답합니다. 정책에 따르면 특정 시간이 지난 후에만 서버에 확인해야 하거나 모든 요청에 ​​대해 서버에 확인하도록 알려주지만 파일이 변경된 경우에만 파일을 다시 다운로드해야 합니다.

더 진행하기 전에 이해하면 좋은 몇 가지 용어가 더 있습니다.

캐시 정책은 UX와 SEO에 어떤 영향을 줍니까?

사용자 경험(UX)과 검색 엔진 최적화(SEO)는 긴밀하게 연결되어 있습니다. Google에 따르면 연구에 따르면 사용자는 사이트 응답성에 관심이 있으므로 Google은 응답성이 높은 페이지의 순위를 더 높게 지정합니다.

정적 자산이 효과적으로 캐시되면 이러한 자산을 로드하는 데 걸리는 시간이 줄어들기 때문에 페이지가 더 빨리 렌더링됩니다. 시간 단축은 LCP 및 FID와 같은 핵심 웹 바이탈의 개선으로 이어지고 궁극적으로 더 높은 검색 엔진 순위로 이어집니다.

여기에서 핵심 웹 바이탈이 페이지 순위에 미치는 영향에 대해 자세히 알아볼 수 있습니다.

효율적인 캐시 정책 문제로 정적 자산 제공을 수정하는 방법

수동으로 수정

효율적인 캐시 정책으로 정적 자산을 제공하는 것은 WordPress 관련 설정이 아닙니다. 웹 서버 구성 파일을 수정하여 수동으로 설정하거나 10Web Booster 호스팅과 같은 플러그인을 사용하여 사이트가 최적화된 캐싱 설정으로 구성되도록 할 수 있습니다.

이 섹션에서는 정적 자산을 제공할 때 응답에 HTTP 헤더를 적용하도록 서버에서 캐시 제어 및 만료 HTTP 헤더를 활성화하기 위해 웹 서버의 구성 파일을 직접 편집하는 방법을 다룹니다.

리소스가 요청되면 웹 서버는 리소스와 HTTP 헤더라고 하는 일부 추가 정보로 응답합니다. HTTP 헤더를 연결에 대한 메타데이터로 생각하십시오. 캐싱의 경우 HTTP 헤더Cache-Control및Expires는자산을 캐시하는 방법을 제어합니다.

캐시 제어 헤더에는 정적 자산을 캐시하는 경우 및/또는 방법에 대한 지침이 포함되어 있습니다. 캐시 제어를 위한 많은 지시어가 있으므로 가장 인기 있는 지시어를 이해해 봅시다.

다음은 캐시 제어 헤더의 모습에 대한 몇 가지 예입니다.

예: 자산을 7일 동안 캐시
Cache-Control: max-age=604800

예: 최대 7일 동안 공유 캐시에 저장할 수 있습니다.
Cache-Control: public, max-age=604800

예: 저장할 수 있지만 각 요청에서 재검증해야 합니다.
Cache-Control: no-cache

예: 캐시할 수 없음
Cache-Control: no-store

캐시 제어 헤더는 더 새롭고 더 많은 옵션이 있지만 캐시 제어가 지원되지 않는 경우 만료 HTTP 헤더는 동일한 헤더 작업을 수행하고 재검증이 필요하기 전에 자산이 유효한 기간을 지시합니다. (Cache-Control 헤더의 max-age 지시문이 Expires보다 우선합니다.)
Expires: Wed Feb 13 21:01:38 CST 2023

서버 구성 직접 수정

먼저 "어려운 방법"을 살펴보고 우리를 더 쉽게 만들어주는 다른 도구와 서비스를 사용할 때 어떤 일이 발생하는지 이해하겠습니다.

아파치

Apache HTTP 서버에서 다음 스니펫을 사이트 정의 또는 .htaccess 파일에 추가할 수 있습니다.

이 스니펫을 설명하면 확장자가 .ico 또는 .pdf 등과 일치하는 모든 자산에는 자산에 대한 Cache-Control 헤더가 설정됩니다.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

Apache를 사용하면 많은 호스팅 공급자가 .htaccess 파일에 지시문을 추가할 수 있는 옵션을 제공합니다. 이것은 서버의 구성에 추가하는 쉬운 방법이지만 .htaccess 파일을 사용하면 서버 수준에서 성능이 저하되는 것으로 알려져 있습니다.

엔진엑스

Nginx에서는 이 스니펫을 서버 블록에 추가할 수 있습니다.

이 스니펫을 설명하면 확장자가 .ico 또는 .pdf 등과 일치하는 모든 자산은 만료 및 캐시 제어 헤더 세트를 모두 갖게 됩니다.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Apache와 Nginx 모두에 대해 헤더를 수정/추가하는 방법을 보여줍니다. 캐싱에 사용하는 특정 헤더를 보여주고 있지만 이 방법은 다른 모든 형태의 캐싱에 사용할 수 있습니다.

WordPress 플러그인으로 수정

위의 내용이 많이 느껴진다면 그렇기 때문입니다. 서버 구성을 수정하고 수동 변경 사항을 최신 상태로 유지하는 것은 시간이 많이 걸리고 오류가 발생하기 쉽습니다.

10Web Booster 무료 플랜은 정적 자산에 대한 헤더를 추가하도록 Apache를 구성할 수 있으며 캐시된 웹 페이지에 대한 헤더도 추가합니다. 아직 10Web 호스팅을 사용하고 있지 않고 호스트에서 Apache를 사용하는 경우 효율적인 캐시 정책 구현을 시작할 수 있는 좋은 방법입니다.

HTTP 헤더에 대한 더 많은 옵션이나 제어가 필요한 경우 10Web Booster Pro를 사용할 수 있습니다. 10Web Booster Pro는 Cloudflare를 활용합니다. Cloudflare를 사용하면 정적 자산과 캐시된 페이지에 캐시 제어 헤더가 추가됩니다. 방문자가 Cloudflare에서 직접 파일을 제공받기 때문에 서버 구성이나 제한을 우회합니다.

여기서 10Web Booster 플러그인을 최고의 선택으로 만드는 이유는 이 모든 작업을 자동으로 수행하기 때문입니다. 서버 구성 또는 .htaccess 파일을 관리할 필요가 없습니다.

또는 10Web Hosting을 사용하는 경우 자동으로 캐싱을 구현하므로 정적 자산에 대한 헤더 추가에 대해 걱정할 필요가 없습니다.

여전히 문제를 해결할 수 없습니까? 이 두 가지 팁을 시도하십시오

위의 단계를 구현했지만 여전히 효율적인 캐시 정책이 있는 서비스 정적 자산이 여전히 보고서에 표시되는 경우 시도할 수 있는 몇 가지 추가 작업이 있습니다.

파일이 캐시되었는지 확인

GTMetrix 및 PageSpeed에서 여전히 캐시 정책과 함께 정적 자산을 제공해야 한다고 보고하는 경우 구현이 실제로 예상한 변경을 수행했는지 확인하는 것이 좋습니다.

대부분의 브라우저에는 파일이 캐시에서 오는지 여부를 쉽게 확인할 수 있는 방법이 있습니다.

Chrome의 보기 및 개발자에서 개발자 도구를 선택합니다.

네트워크 탭에서 (디스크 캐시) 또는 (메모리 캐시)에서 오는 파일을 식별할 수 있습니다. 디스크와 메모리 캐시의 차이점은 브라우저를 닫으면 메모리가 사라지고 브라우저를 닫으면 디스크가 유지된다는 것입니다.

캐시 시간 늘리기

Lighthouse의 통계에 따르면 효율적인 캐시 정책은 캐시 히트 대 미스 비율이 높은 정책입니다. 즉, 대부분의 정적 자산에 최대 사용 기간 또는 만료가 설정되어 있습니다. 프로덕션 중이거나 자주 변경되지 않는 사이트의 경우 최대 3개월에서 1년까지의 기간을 권장합니다.

그들은 약 3개월(약 7890000초)의 정책을 시작할 것을 권장합니다. 이미 설정한 경우 사이트가 활성화된 경우 최대 수명을 1년 이상으로 늘릴 가치가 있습니다.

결론

효율적인 캐시 정책으로 정적 자산을 제공할 수 있으면 웹 사이트 성능이 향상됩니다.

이 기사에서는 정적 자산이 무엇인지, HTTP 헤더가 무엇인지, 캐싱 헤더를 활성화하고 확인하는 방법을 살펴보았습니다.

우리는 서버 구성을 수정하여 헤더를 수동으로 활성화하는 방법과 10Web Booster와 같은 WordPress 플러그인을 사용하고 10Web과 Cloudflare의 통합을 활용하여 캐시 제어 HTTP 헤더를 설정하는 액세스 권한을 갖는 방법을 살펴보았습니다.

10Web Booster는 단순한 캐싱 플러그인 그 이상입니다. 이 10Web Booster 기사 에서 많은 캐싱 및 속도 최적화 기능에 대해 자세히 읽을 수 있습니다 .

자주하는 질문