메뉴 닫기

워드프레스 초기 세팅 #9 로딩 속도 증가 WP Fastest Cache 플러그인

워드프레스 로딩속도를 위한 WP Fastest Cache 플러그인


머리말

비가 추적추적 내린다. 창밖으로 보이는 초등학교. 오늘 따라 왜 학교에 아이들이 안보이고 조용하지?

비가와서 모두 안에 들어가 있는 건가?? 어? 오늘 일요일이네~😑😑😤 정말 요즘은 날짜 개념 없이 사는 것 같다.

대충 정신 못차리고 있다는 글~ 😅

지난 포스팅에 이어 이번에도 로딩 속도 증가를 위한 플러그인인 WP Fastest Cache 를 소개 하려고 한다.


캐시(Cache) 란?

자주 사용하는 데이터나 리소스를 미리 저장해 두는 임시 장소이다

우리는 PC 를 이용해 인터넷을 하다보면 알게 모르게 이미 많은 곳에서 캐시라는 것을 많이 사용 하고 있다. 내 PC 내부에도 캐시 메모리 라는 것이 있으며 브라우저 같은 경우는 임시 인터넷 파일 이라는 것도 있다. 이런 것들의 목적은 결국 빠른 처리 속도를 위함인데 동작 방식은 다음과 같다.

브라우저 캐시 플로우

위의 이미지는 여러가지 캐시 중 로컬 캐시에 해당하는 브라우저 캐시에 해당하는 플로우 이다.

여러분이 이 블로그에 접속을 해서 이미 본적이 있는 컨텐츠가 있을 경우 해당하는 컨텐츠에 필요한 여러 소스들이 이미 여러분의 PC 에 다운받아져 담겨 있을 것이다. 이 부분이 캐시(Cache)이다.

만약 짧은 시간안에 또 같은 사이트에 접속해서 같은 컨텐츠를 보는데 페이지를 열때마다 매번 똑같은 소스를 다운받게 되면 여러분은 페이지가 느리다고 느끼게 될 것이고 서버는 서버대로 트래픽이 가중되고 불필요하게 서버 부하가 걸리게 될 것이다. 이는 매우 비효율적 이라고 할 수 있겠다.

그래서 나온 개념이 캐시(Cache) 라는 것인데 사이트에 접속할때 우선 캐시를 체크 하고 캐시에 없는 소스가 있을 경우에는 서버에서 내려 받고 이미 있는 동일한 소스의 경우는 캐시에서 파일 소스들을 불러오게 된다.

이렇게 생각하면 쉽다. 이미지가 많은 페이지에 처음 접속 할땐 이미지들을 다운받고 페이지가 열리기 때문에 약간 시간이 걸린다. 그런데 다 받고 나서 해당 페이지를 새로고침을 해보면 상당히 빨리 다시 열리는 것을 대부분 체감 했을 것이다. 이것에 브라우저 캐시를 이용하기 때문이다.

브라우저 캐시 뿐만 아니라 워드프레스 설치 가이드 를 따라서 그대로 워드프레스 설치를 진행 했다면 DNS 설정시 Cloudflare 를 이용해서 도메인 세팅을 했을텐데 여러분은 이미 이곳에서 캐시를 사용하고 있다.

캐시라는 것은 이렇게 사이트 하나 접속을 하는데도 상당히 다방면에서 사용 되어지고 있다.


캐시(Cache) 장단점

장점

  • 데이터나 리소스를 미리 저장해두고 사용하기 때문에 재사용시 페이지 로딩속도가 상당히 빠르다.
  • 재사용 소스(리소스)를 서버에 재요청 하지 않기 때문에, 서버에 불필요한 트래픽과 과부하를 줄일 수 있다.
  • 트래픽이 줄어들기 때문에 서버 운용시 비용절감이 된다.

단점

  • 캐시는 일정시간(만료시간)이 지나야 새로 서버에서 다운받는 시스템인데 같은 파일명으로 짧은 시간안에 파일 내용이 바뀔 경우 사용자들 페이지에서는 변경된 내용이 보이지 않고 변경 전 내용들이 보이게 된다.

단점에서 언급한 소스 갱신 해결법은 다양 하지만 간단하게 두가지 해결법을 제시하겠다.

  1. 이미지명.png 라는 파일명으로 업로드를 했는데 내용이 수정이 되었을 경우 기존 파일은 버리고 이미지명_1.png 과 같은 식으로 기존 파일명과 다르게 변경 후 새로 업로드를 한 후 컨텐츠에서도 변경 된 파일명으로 수정한다.
    (스토리지 관리를 위해서는 처음 올렸던 파일은 쓸모없으니 서버에서도 삭제 하는 것이 좋다)

    css, js 파일 같은 경우는 파일 링크로 불러 올텐데 이런 경우는 파일명 변경 없이 아무 변수값을 주면 된다.
    <link rel=”profile” href=”/기존파일명.css“> 에서 <link rel=”profile” href=”/기존파일명.css?t=123“>
  2. 서버에서 모든 캐시를 삭제 하면 된다.
    대신 이럴 경우 모든 사용자들이 다시 처음부터 모든 파일을 다운 받아야 하기 때문에 상당히 비추하는 방법이다. 어쩔 수 없는 경우에만 사용 하자.


WP Fastest Cache 플러그인

이 플러그인은 이름만 봐도 매우빠른 캐시 라고 표현 하고 있다.

이 플러그인은 위에서 설명한 내 PC 에서 사용하는 Local Cache 가 아니라 여러 Cache Server 에 접근하여 사용하는 Global Cache 이다. 일명 CDN (Contents Delivery Network) 이라는 서비스 인데 이번 편에서 이것 까지 다루기엔 내용이 좀 많으니 CDN 이라는 용어 정도만 익히고 넘어가자.


WP Fastest Cache 설치

대시보드 > 플러그인 > 새로 추가

WP Fastest Cache 플러그인 설치


WP Fastest Cache 플러그인 설치 완료

WP Fastest Cache 플러그인 설정

처음 설치하면 아무것도 체크가 되어 있지 않을 것이다. 위의 스크린샷을 보고 그대로 설정 후 저장하자


WP Fastest Cache 캐시 삭제


캐시 탭에서 서버상의 캐시를 삭제 할 수 있다. 위에서 말한 가장 추천하지 않는 방법이지만 간혹 어쩔 수 없을 때는 사용해야 하니 사용법은 알아두자.


Cloudflare API 연결

DNS 도메인 설정클라우드플레어 에서 한 사람의 경우는 추가 설정을 해줘야 하는데 위에서 잠시 언급 한 것 처럼 클라우드플레어에서 역시 캐시 기능을 제공 해주고 있는 상태이다.

클라우드플레어 캐싱

그렇다면 여기서 생각을 해보자 우리는 WP Fastest Cache 플러그인을 설치를 해서 캐싱 을 하도록 설정 해놨는데 어떤 이유로 인해서 WP Fastest Cache 에서 캐시 삭제를 했다면 뭔가 데이터 변경 된 파일이 사용자에게 바뀐 내용으로 보여져야 할텐데 현재로썬 그렇게 되지 않을 것이다.
클라우드플레어에서 역시 캐싱 서비스가 운용되고 있기 때문이다.

이를 해결 하기 위해서 WP Fastest Cache 플러그인과 클라우드플레어 API 연결을 시켜줘서 이 문제를 해결 해준다.

클라우드플레어 API 생성 Step 1


클라우드플레어 API 생성 Step 2


클라우드플레어 API 생성 Step 3


클라우드플레어 API 생성 Step 4


클라우드플레어 API 생성 Step 5


클라우드플레어 API 생성 Step 6


WP Fastest Cache 와 클라우드플레어 API 연결 Step 1


WP Fastest Cache 와 클라우드플레어 API 연결 Step 2


WP Fastest Cache 와 클라우드플레어 API 연결 Step 3


WP Fastest Cache 와 클라우드플레어 API 연결 Step 4


WP Fastest Cache 와 클라우드플레어 API 연결 Step 5


WP Fastest Cache 와 클라우드플레어 API 연결 Step 6


WP Fastest Cache 와 클라우드플레어 API 연결 Step 7


WP Fastest Cache 와 클라우드플레어 API 연결 Step 8

클라우드플레어 API 키 가 제대로 입력이 되었다면 위와 같이 푸른색 체크박스가 생겼을 것이다. 그럼 모든 설정이 완료 되었다.

이제부터는 WP Fastest Cache 에서 캐시를 삭제 하게 되면 클라우드플레어 에서도 동일 컨텐츠의 캐시가 자동으로 삭제 가 될 것이다.


마치며

워드프레스를 설치하고 난 이후 초기에 설정 할 것들이나 설치해야 할 플러그인 등 내부적으로 해야 할 필수적인 것들은 이번 편에서 마친다.

관리의 편의성이던 시각적인 부분이던 아니면 더 좋은 플러그인 들도 많겠지만 그런 것들은 필수라기 보단 선택적인고 취향차이라고 판단이 되는 부분이다.

지금까지 워드프레스 초기 세팅 에서 가이드 했던 것들은 최소한 이런 것들은 꼭 해야 한다 라는 목적으로 알려드렸던 내용이니 부족하다 싶은 분들은 스스로 연구하고 검색해서 나의 취향에 맞는 플러그인을 찾아서 관리를 하도록 하자.

물론 앞으로도 추천 드릴만한 플러그인이 있다면 계속 소개하는 포스팅을 하겠지만 이는 초기 세팅에 필수적으로 해야 하는 것들은 아닐 것이다. 말 그대로 소개만 하는 포스팅이 될 것이다.

다음 편에서는 외부에서 해야할 초기 세팅에 대해서 다뤄보도록 하겠다.


이전 편: 워드프레스 초기 세팅 #8 로딩 속도 증가 TinyPNG 플러그인

다음 편: 워드프레스 초기 세팅 #10 검색엔진 등록


Posted in 워드프레스

관련 글

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다