WP Rocket 설치 설정법 10가지 과정을 통해서 내 사이트 속도 최적화 방법을 안내해 드리고자 합니다.
Speed Insight에서 정말 여러 가지 요인으로 인해 사이트 성능이 점점 떨어져 가고 있어서 저처럼 맘 고생을 하고 계신 분들 많으실 것이라 생각됩니다.
하나씩 해결 방법을 찾다가 도저히 개발자가 아니면 해결할 수 없는 영역에서 헤매고 있을 때,
이 모든 것을 대부분 해결해 줄 수 있는 플러그인 WP Rocket을 알게 되어 설정 방법을 공유하고자 합니다.
WP Rocket 설치 전 내 사이트 성능 확인
내 사이트 성능 확인은 코어 웹 바이털 내에서 보고서 열기를 통해 개선이 필요한 해당 URL을 클릭하시면 개발자 자료실에서 분석을 통해 내 사이트의 성능을 확인하실 수 있습니다.
모바일과 데스크톱의 수치를 각각 확인하실 수 있는데 90점 이하로 떨어지지 않도록 관리해 주시는 것이 중요합니다.
저의 경우 WP Rocket을 설치하기 전 비슷한 기능이 있으면서도 필요 없는 플러그인 몇 개를 삭제해 주는 것 만으로도 성능 점수가 60점이나 올랐습니다.
우연의 일치였는지 모르겠지만 그동안 마음고생한 것 치고는 너무 간단하게 해결되어 놀라웠고,
여기 저기서 좋다고 하는 플러그인을 무작정 설치한 결과라고 할 수 있으니 잡다한 플러그인 정리를 먼저 해보시는 것을 추천해 드립니다.
플러그인을 설치하실 때는 비슷한 기능이 있는 것은 충돌해 사이트에 문제를 줄 수 있으니 피하시는 것이 좋은데 꼭 설치하셔야 한다면 둘 중 한쪽의 겹치는 기능은 해제를 하시는 것이 좋다고 합니다.
저는 성능 점수가 13점에서 76점으로 단번에 오르긴 했지만 언제 또다시 점수가 내려가 곤욕을 치루게 될지 모르기 때문에 최적화 단계를 위한 설치를 시도해 볼까 합니다.
전문가도 아니고 개발 관련 지식이 없기 때문에 고수분들이 올려 놓은 과정을 따라 한다는 것이 아무래도 한계가 있어서
연간 비용으로 따지면 크게 부담되는 금액은 아닌 것 같아서 지불하고 WP Rocket 플러그인을 구입하여 설치해 보도록 하겠습니다.
WP Rocket 설치 전 꼭 알아두세요
WP Rocket은 내 사이트의 최적화를 도와주는 모든 기능이 탑재되어 있지만 설치 전 꼭 알아 두셔야 할 것이 있는데요.
그것은 바로 비슷한 캐싱 기능을 가진 플러그인이 있다면 충돌을 일으킬 수 있다는 것입니다.
충돌을 일으키는 플러그인은 W3 Total Cache, WP Super Cache, Autoptimize, WP Fastest Cache 등을 예로 들 수 있는데 충돌을 방지하시고자 하신다면
중복되는 기능을 해제하시거나 해당 캐싱 플러그인을 비활성화하시거나 삭제하시는 것이 좋습니다.
충돌이 일어난다면 웹사이트 성능이 오히려 저하 된다거나 작동에 문제가 생길 수도 있어서 설치 후 내 사이트가 제대로 작동하는지도 꼭 확인해 보시기 바랍니다.
WP Rocket 구입 및 설치 설정 활성화 가이드
먼저, WP Rocket 사이트에서 결제 후 구매를 하신 다음 zip 파일을 컴퓨터에 다운로드 해줍니다.
그다음, 본인의 워드프레스 사이트로 들어 가신 다음 플러그인에서 [새 플러그인 추가]-[플러그인 업로드]를 클릭해 주신 다음 zip 파일을 선택하시고 나서 지금 설치를 누르시면 됩니다.
그러면 압축파일이 풀리면서 성공적으로 설치되었다는 메시지가 뜨는데 플러그인 활성화 버튼을 클릭해 줍니다.
그다음 설정을 해 주셔야 하는데 설치한 WP Rocket 플러그인으로 가셔서 Settings를 클릭해 들어갑니다.
기본적으로 영문으로 나오기 때문에 한글로 보시기를 원하신다면 해당 화면에서 마우스 오른쪽 버튼을 눌러 이미지 번역을 눌러주시면 한글로 편하게 보실 수 있으실 것입니다.
캐시 최적화(CACHE)
여기서는 모바일 장치용 캐싱 사용에 체크하시고 캐시 수명은 12시간으로 하시는 분들도 계시고 10시간으로 하시는 분들도 계시니 적당한 시간을 선택 적용해 보세요.
파일 최적화 ( FILE OPTIMIZATION)
기본 설정은 모두 체크해 주시는데 읽어 보시면 ‘HTML 크기를 축소하고 공백과 주석을 제거한다’고 되어 있습니다.
그리고 ‘구글 글꼴 파일 결합으로 HTTP 요청 수를 줄이며 정적 리소스에서 쿼리 문자열을 제거한다’고 되어 있습니다.
CSS 파일
여기서는 CSS 파일 최소화와 CSS 제공 최적화 체크 박스에 체크를 해줍니다.
CSS 파일을 축소해 줄 뿐만 아니라 HTTP 요청 수도 줄이고 렌더링 차단 CSS를 제거해주기 때문에 속도가 빨라진다고 합니다.
Speed Insight에서 계속 오류로 나오던 렌더링 차단 관련 문제가 생각나는데 여기서 해결 가능한 거였네요.
자바스크립트 파일 (JavaScript Files)
자바스크립트 파일 최소화 체크박스에 체크를 해주시는데 참고로 맨 하단에 있는 자바스크립트 실행 지연(Delay JavaScript execution)을 클릭하시게 되면 파일 로딩을 지연시켜 주기 때문에
로딩속도가 엄청 빨라지지만 광고로딩도 지연시켜 수익하락으로 이어질 수 있다고 하니 신중히 선택하셔야 할 것 같습니다.
참고로 저는 이 항목은 선택하지 않았는데 민감한 수익하고 연관되어 있기 때문에 굳이 지금 할 필요는 없다고 생각해서 나중에 신중히 판단 후 추가해 볼 생각입니다.
미디어 (MEDIA)
여기에서 체크하실 사항은 이미지에 대해 활성화(Enable for images), iframe 및 비디오 사용(Enable for iframe and videos), 누락된 이미지 치수 추가 부분(Add missing image dimensions)에 체크해 주시고 변경 사항 저장(SAVE CHANGES)을 눌러주시면 됩니다.
프리로드 (PRELOAD)
여기서는 사전 로드 활성화(Activate Preloading)와 링크 사전 로드 사용(Enable link preloading)에 체크를 해주시고 변경 사항 저장을 눌러 주시면 됩니다.
미리 로드되면 아무래도 사용자가 페이지를 클릭했을 때 로딩이 빠르게 되도록 하기 때문에 사용자의 경험을 크게 향상시킨다는 장점이 있습니다.
고급 규칙 (ADVANCED RULES)
저는 이것을 설정하지는 않았는데 나중에 좀더 익숙해졌을 때 설정하는 것으로 하고 그냥 넘어가도록 하겠습니다.
데이터베이스 (DATABASE)
하트비트 (HEART BEAT)
이것은 체크박스에 체크를 해주고 그 아래 하트비트 활동 축소 또는 비활성화 항목에서는 모두 비활성화(Disable)로 체크를 해주었습니다.
추가 기능
이 항목은 로켓 성능과는 아무런 관련이 없다고 하길래 그냥 저도 설정을 하지는 않았습니다.
이미지 최적화
여기서는 Imegify를 사용하고 있다고 하는데 저는 개인적으로 사용하고 있는 이미지 최적화 방법이 있어서 Imegify는 사용하지 않아 설정법을 올리지는 못했습니다.
마치며
지금까지 WP Rocket 설치 설정법을 통해서 내 사이트 속도 최적화 과정을 알아보았는데요.
전문 개발지식이 없는데 사이트를 운영한다는 것이 여간 힘든 일이 아니라서 이 플러그인 하나로 최적화된 사이트를 운영할 수 있다는 점에 큰 점수를 주고 싶습니다.
물론 다른 플러그인과 안 맞는 부분이 있는 분들은 몇 가지 중복되는 기능을 해제하시거나 아니면 삭제 후 다른 플러그인을 찾으셔야 한다는 점이 불편하긴 합니다.
후기를 보면 속도가 엄청 빨라졌다는 분들도 계셨고 반대로 속도 변화가 미미했다는 분들도 계시더라구요.
어쨌든 조금의 도움이라도 되셨기를 바라며 함께 보시면 좋은 글들도 있으니 확인하시고 더 많은 도움 되셨으면 좋겠습니다.
▼▼함께 보시면 좋은 글들▼▼
♥워드프레스 보안 워드펜스(wordfence) 설치 과정 BEST5
♥구글 서치 콘솔 CLS 문제 개선 0.1초 초과 해결[티스토리]
♥크롬 메모리 최적화 속도 개선 및 성능 향상 위한 설정 6가지
♥구글 서치 콘솔에서 다른 4xx문제로 인해 차단됨 해결