Cloudflare Cache Everything은 WordPress TTFB를 90% 향상시킵니다.

게시 됨: 2022-12-03

Cloudflare cache everything fast site load

사이트 속도가 블로그의 중요한 요소라는 것을 알고 있습니다. Cloudflare는 모든 것을 캐시하여 작업 속도를 높일 수 있습니다.

방문자는 떠나기 전에 웹 페이지가 로드될 때까지 몇 초 이상 기다리지 않습니다. Google은 응답 시간이 검색 순위에 중요한 요소임을 분명히 합니다. 예, 오늘날 귀하의 사이트에는 속도가 중요합니다.

WordPress를 사용하면 데스크탑에서 합리적인 페이지 로드 속도를 얻기가 상대적으로 쉽습니다. 그러나 모바일 속도는 그리 쉽지 않습니다.

하지만 Cloudflare 페이지 규칙으로 사이트 속도를 획기적으로 개선할 수 있는 방법이 있습니다.

이 기사에서 숨기기
Cloudflare를 사용하고 있습니까?
TTFB 줄이기
Cloudflare 캐시 모든 것을 적용하는 방법
로켓 로더 확인
한 가지 단점과 해결책
업데이트: 새롭고 훨씬 더 나은 솔루션
요약

Cloudflare를 사용하고 있습니까?

서버 측 응답 시간을 개선하기 위한 첫 번째 단계는 사이트를 CDN(Content Delivery Network)에서 실행하는 것입니다.

가장 인기 있는 서비스는 매우 효과적이고 안정적이며 무료이기 때문에 대부분의 블로거에게 Cloudflare입니다.

사이트를 Cloudflare에 추가해야 하는 경우 WP Beginner의 이 자습서를 시작하는 것이 좋습니다.

그러나 이미 사용하고 있다면 TTFB(Time To First Byte)의 성능을 획기적으로 향상시킬 수 있습니다.

사이트 로딩 속도에 가장 중요한 요소 중 하나입니다.

이전 기사에서 세 페이지 규칙을 사용하여 WordPress 관리 페이지의 속도를 개선하는 방법에 대해 썼습니다.

하지만 이 수정을 위해서는 Cloudflare의 모든 항목 캐시 규칙을 사용해야 합니다.

무료 Cloudflare 계정을 사용하는 경우 3개의 페이지 규칙만 받습니다.

따라서 기존 페이지 규칙을 변경해야 합니다.

그러나 노력할 가치가 있습니다.

TTFB 줄이기

다음은 이러한 변경 사항이 TTFB 속도에 미치는 영향에 대한 몇 가지 예입니다.

Chrome Deleveopers 도구를 사용한 아래의 두 이미지는 모바일 속도에 얼마나 많은 차이를 만들 수 있는지 보여줍니다.

첫 번째는 최적화되지 않았으며 TTFB는 1.55초입니다.

TTFB mobile

새 Cloudflare 규칙을 추가한 후 여기에서 개선 사항을 확인할 수 있습니다. 이제 TTFB는 33.25밀리초에 불과합니다.

Cloudflare Cache Everything TTFB mobile

내 Freshping 계정에서 내가 최적화한 세 사이트의 전체 응답 시간을 확인할 수 있습니다.

아직 완전히 캐시되지 않은 4개 사이트보다 90% 더 빠릅니다.

Cloudflare cache everything response times

Cloudflare 캐시 모든 것을 적용하는 방법

이러한 변경을 시작하기 전에 경고의 말씀을 전합니다.

이 방법은 자주 변경되지 않는 상당히 정적인 사이트에만 적합합니다.

위젯, Twitter 피드, 슬라이더 또는 정기적인 정보 업데이트 변경과 같은 동적 콘텐츠가 있는 경우 좋은 생각이 아닙니다.

Cloudflare에 모든 캐시를 추가하면 말 그대로 수행됩니다.

다음은 Cloudflare 대시보드에서 이 사이트 속도 향상을 추가하는 방법입니다.

시작하려면 새 규칙을 추가해야 합니다. 상단 메뉴에서 페이지 규칙 앱 버튼을 클릭합니다.

이미 세 개의 규칙이 있는 경우 하나를 삭제해야 합니다. 제 경우에는 *preview=true* 규칙을 삭제했습니다.

new page rule

이제 양쪽 끝에 와일드카드 별표가 있는 웹사이트 URL에 대한 새 페이지 규칙을 추가합니다.

그런 다음 이러한 규칙 설정을 추가합니다.

브라우저 캐시 TTL – 1시간
캐시 수준 – 모든 항목 캐시
에지 캐시 TTL – 7일

저장을 클릭하면 이제 캐시 제어 헤더에 대한 모든 것이 설정됩니다.

한 가지 중요한 참고 사항은 위의 이미지와 같이 규칙을 주문했는지 확인하고 확인하는 것입니다.

관리 페이지의 원본 캐시 제어를 보호하려면 사이트 캐시 규칙이 wp-login 및 wp-admin 규칙 뒤에 와야 합니다.

또한 Cloudflare 브라우저 캐시 설정을 확인하여 Respect Existing Headers를 선택했는지 확인해야 합니다.

브라우저 캐시 TTL

로켓 로더 확인

Cloudflare의 Rocket Loader를 사용하고 있는지 확인할 수도 있습니다.

작동하면 매우 잘 작동하지만 사이트가 손상될 수도 있습니다. 나는 그것을 두 개의 사이트에서 실행하고 있으며 괜찮습니다.

그런데 다른 사이트에서는 문제가 생겨서 꺼버렸습니다.

모든 설정이 올바른지 확인한 후 사이트로 이동하여 모든 것이 예상대로 작동하는지 확인하십시오. 이제 거의 즉시 로드될 것입니다.

그런 다음 Google Page Speed ​​Insights, GTMetrix 또는 Pingdom으로 사이트 속도를 확인하여 개선 사항을 확인하십시오.

조준은 TTFB의 경우 200ms 미만, 완전 로드의 경우 2초 미만이어야 합니다.

다음은 GTMetrix의 내 사이트 중 하나에 대한 로드 시간의 스크린샷입니다. 단 0.6초 만에 풀로드되는 것을 확인할 수 있습니다.

page load time

한 가지 단점과 해결책

이제 사이트의 모든 항목이 캐시되므로 변경 사항은 캐시 주기가 지워질 때까지 적용되지 않습니다.

이 문제가 발생하는 데 시간이 오래 걸릴 수 있습니다.

따라서 새 게시물을 추가하거나 기존 게시물을 편집하면 변경 사항이 표시되지 않습니다. 사이트의 새 댓글에도 적용됩니다.

이 문제를 해결하는 유일한 방법은 Cloudflare 플러그인을 설치하는 것입니다.

저는 더 많은 플러그인을 추가하는 것을 좋아하지 않지만, 이것은 이 속도 수정에 필수적입니다.

추가했으면 자동 캐시 관리를 켜기로 변경합니다.

이제 생성하거나 편집한 개별 파일을 제거한 다음 원본 웹 서버에서 새 파일을 캐시합니다.

플러그인에서 전체 사이트를 제거할 수도 있습니다. 그러나이 조치는로드 시간을 증가시킵니다.

문제를 조사하기 위해 캐시 문제를 우회하려면 Cloudflare에서 웹사이트를 일시 중지하는 것이 좋습니다.

클릭하면 안 되는 버튼은 WordPress용 Cloudflare 최적화입니다.

그렇게 하면 바람직하지 않을 수 있는 많은 설정이 변경됩니다. 여기에는 HTML, 자바스크립트 및 CSS 축소와 기존 헤더 설정 변경이 포함됩니다.

업데이트: 새롭고 훨씬 더 나은 솔루션

이 기사를 작성한 이후 Cloudflare Cache Everything의 거의 모든 문제를 해결하는 새로운 무료 WordPress 플러그인을 사용할 수 있습니다.

Super Page Cache for Cloudflare

Cloudflare용 Super Page Cache는 설치가 쉽고 많은 제어 기능을 제공합니다.

이 플러그인은 정적 파일(예: CSS, JS, 이미지 등)뿐만 아니라 서버 디스크 수준과 글로벌 Cloudflare CDN 모두에서 WordPress에 의해 생성된 HTML 웹 페이지를 캐시하는 데 도움이 됩니다.

내 사이트 중 하나에 설치했는데 완벽하게 작동했습니다. TTFB는 거의 1초에서 0.2초 미만으로 떨어졌습니다.

speed results

무료 서비스가 아닌 Cloudflare APO와 비슷합니다.

그러나 무료 Cloudflare 계정을 사용하는 경우 이 무료 플러그인은 APO가 할 수 있는 거의 모든 작업을 수행합니다.

저는 Just Publishing Advice에서 이 캐싱 플러그인을 사용하고 있으며 이를 통해 훌륭한 Core Web Vitals 결과를 쉽게 얻을 수 있습니다.

Google Page experience mobile

PageSpeed ​​Insights 또는 GTMetrix로 이 사이트의 모든 페이지를 확인하여 모든 것이 얼마나 잘 캐시되는지 확인할 수 있습니다.

당신이 모든 녹색 결과를 얻지 못했다면 나는 놀랄 것입니다.

GTmetrix JPA site perfomance

로딩 속도와 Core Web Vitals를 개선하고 싶다면 한 번 살펴볼 가치가 있습니다.

요약

Cloudflare Cache Everything은 매우 잘 작동하며 사이트 속도를 엄청나게 높여줍니다. 모바일 사이트 속도 향상에 특히 효과적입니다.

그러나 모든 사이트에 적용되는 것은 아니며 테마, 기능 및 사이트 디자인에 따라 단점이 있을 수 있습니다.

이 캐싱 방법은 매우 공격적이므로 모든 것을 다시 확인하십시오.

이상적으로는 스테이징 또는 샌드박스 사이트에서 시도하여 사이트가 문제 없이 작동하는지 확인해야 합니다.

라이브 사이트에서 구현하고 문제가 발생하면 언제든지 페이지 규칙을 제거할 수 있습니다. 그런 다음 Cloudflare에서 사이트를 완전히 삭제하세요.

그런 다음 시작한 곳으로 돌아갑니다.

도움이 필요한 경우 정적 콘텐츠 캐시 및 모든 항목 캐시에 관한 Cloudflare 지원 항목이 많이 있습니다.