WordPress에서 Cloudflare를 사용하여 브라우저 캐싱을 활성화하는 방법은 무엇입니까?

브라우저 캐싱은 브라우저에 일정 기간 동안 정적 파일을 저장하거나 "캐시"하도록 요청하여 웹사이트 속도를 높이는 기술이므로 이후 방문 시 다시 다운로드할 필요가 없습니다. 요컨대 그것이 전부입니다.

이 자습서에서는 기본적으로 브라우저에 정적 리소스를 캐시해야 하는 기간을 알려주는 만료 헤더를 Cloudflare에 추가하는 방법을 배웁니다.

브라우저 캐싱을 사용하려면 클라이언트 브라우저에서 로컬로 사진, CSS 및 Javascript 파일을 유지해야 하는 기간을 웹 브라우저에 알려야 합니다. 특정 표준 및 설정이 사용되는 경우 사용자의 브라우저는 웹사이트 페이지를 탐색할 때 더 적은 데이터를 사용합니다(더 적은 수의 파일을 다운로드해야 하기 때문에). WordPress에서 브라우저 캐싱을 사용하면 웹사이트 로딩 시간이 빨라집니다.

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

캐싱은 캐시에 데이터를 저장하는 프로세스입니다. 캐시는 데이터를 위한 임시 저장 공간일 뿐입니다.

웹 브라우저에서 콘텐츠를 일시적으로 저장하는 것을 브라우저 캐싱이라고 합니다. 방문자의 웹 브라우저는 다양한 웹 사이트 리소스를 로컬 드라이브에 다운로드하여 저장합니다. 이미지, HTML 파일 및 JavaScript 파일이 그 중 하나입니다. 웹 페이지는 빠르게 로드되고 사용자가 다음에 웹 사이트를 방문할 때 대역폭 소비가 낮아집니다.

캐싱의 장점

웹 페이지는 클라이언트, 프록시 및 서버에서 미리 가져오고 캐시할 수 있습니다. 온라인 캐싱에는 향상된 웹 성능을 포함하여 여러 가지 장점이 있습니다.

• 캐싱은 대역폭 소비를 줄이고 네트워크 트래픽을 줄이며 네트워크 정체를 줄입니다.
• 두 가지 이유로 캐싱은 액세스 지연 시간을 줄입니다.
  • a) 자주 방문하는 문서를 멀리 떨어진 데이터 서버가 아닌 로컬 프록시 캐시에서 검색하여 전송 지연을 줄입니다.
  • b) 캐싱은 네트워크 트래픽을 줄이기 때문에 경로를 따라 정체가 감소하고 서버 작업 부하가 낮기 때문에 캐싱되지 않은 문서가 없는 문서보다 훨씬 빠르게 검색할 수 있습니다.
• WAN을 통해 프록시 캐시 간에 데이터를 분산함으로써 캐싱은 원격 웹 서버의 작업 부하를 최소화합니다.
• 클라이언트는 충돌 또는 네트워크 분할로 인해 원격 서버를 사용할 수 없는 경우 프록시에서 캐시된 복사본을 얻을 수 있습니다. 그 결과 웹 서비스의 견고성이 향상됩니다.

브라우저 캐싱은 어떻게 작동합니까?

브라우저 캐싱 작동 방식에 대한 설명은 아래 그래픽에 나와 있습니다.

웹 서버는 웹 사이트에서 데이터를 수집하여 브라우저 창으로 보냅니다. 방문자가 최초 방문자인지, 이미 사이트를 방문한 적이 있는지에 따라 캐싱이 수행됩니다.

캐싱이 어떻게 작동하는지 보기 위해 이 두 가지 예를 살펴보겠습니다.

사례 1: 처음 사용자

아래 그림은 웹사이트를 처음 방문하는 상황을 나타냅니다.

웹 브라우저는 웹 사이트에 처음 액세스할 때 웹 서버에서 데이터를 수집합니다. 이는 온라인 리소스가 아직 캐시되지 않았기 때문입니다. 그러면 인터넷 브라우저가 온라인 리소스를 캐시에 저장하여 다음에 웹사이트를 방문할 때 더 나은 경험을 할 수 있도록 합니다.

사례 2: 사용자가 이미 웹사이트를 방문한 적이 있습니다.

사용자가 동일한 컴퓨팅 장치에서 웹사이트를 두 번째로 방문하면 두 번째 방문이 첫 번째 방문보다 빠르게 로드됩니다. 이는 웹 브라우저가 캐시를 사용하여 이미지, CSS 및 JavaScript와 같은 정적 웹 리소스를 가져오기 때문입니다. HTML 페이지는 웹 브라우저를 통해 전달됩니다.

이 사례 시나리오는 아래 그래픽에 나와 있습니다.

위의 시각화는 정보가 최신 정보임을 의미합니다. "신선한 콘텐츠"라는 용어는 아직 만료되지 않았으며 캐시에서 검색할 수 있는 항목을 나타냅니다. 부실 자료는 캐시 만료 날짜가 지난 콘텐츠이며 웹 서버에서만 얻을 수 있습니다.

GTMetrix를 사용하여 사이트 분석

GTmetrix를 사용하여 사이트를 평가한 경우 "만료 헤더 추가" 오류를 발견했을 수 있습니다.

브라우저에서 캐싱 헤더를 확인하는 방법은 무엇입니까?

응답 헤더는 브라우저 캐싱에서 사용됩니다. 브라우저는 각 HTTP 요청과 함께 '요청 헤더'를 보내고 서버는 '응답 헤더'와 데이터로 응답합니다.

서버는 브라우저에 파일을 캐시할 양(초)을 알려주는 'cache-control'이라는 응답 헤더를 지정합니다.

크롬 브라우저 우측 상단의 점 3개(케밥 메뉴)를 클릭합니다.

추가 도구 -> 개발자 도구를 클릭합니다.

Network -> js 에서 필요한 폴더를 찾을 수 있습니다.

jquery 파일을 열고 헤더 를 클릭하여 캐시 제어 를 관찰합니다.

보시다시피 캐시 파일은 드라이브나 메모리(RAM)에서 즉시 로드됩니다.

브라우저 캐싱을 사용하면 다음을 수행할 수 있습니다.

• 서버 부하를 줄여야 합니다.
• 페이지를 로드하는 데 걸리는 시간을 줄입니다.
• 대역폭 비용을 절감하십시오.

Cloudflare(Cloudflare 만료 헤더 추가)를 사용하여 브라우저 캐싱을 활성화하는 방법은 무엇입니까?

Cloudflare를 사용하면 플러그인 없이 단 두 번의 클릭으로 각 요청에 만료 헤더를 쉽게 추가할 수 있습니다.

Cloudflare 대시보드로 이동

도메인 입력

왼쪽 메뉴에서 캐싱 -> 구성을 클릭합니다.

"브라우저 캐시 TTL"까지 아래로 스크롤하고 그에 따라 기간을 변경합니다.

기본적으로 4시간으로 설정됩니다. 두 달 이상 지속되는 것으로 바꾸면 끝입니다!

결론

브라우저 캐싱은 여러 번 방문할 때 다시 검색할 필요가 없도록 설정된 시간 동안 파일을 저장하거나 "캐시"하도록 브라우저에 지시하여 웹사이트를 개선하는 전략입니다. 요컨대, 그것이 전부입니다.

브라우저 캐싱을 사용하려면 이미지, CSS 및 Javascript 파일을 클라이언트 브라우저에 얼마나 오래 보관해야 하는지 웹 브라우저에 알려야 합니다. 특정 표준 및 설정이 적용되면 사용자의 브라우저는 웹사이트 페이지를 탐색할 때 더 적은 데이터를 소비합니다. WordPress에서 브라우저 캐싱을 사용하면 웹사이트가 로드되는 데 걸리는 시간이 줄어듭니다.