지금까지 사용하던 워드프레스 웹사이트의 성능 최적화를 위해 무료 플러그인만 사용하다가 원하는 퍼포먼스 향상을 얻을 수 없었습니다. 그래서 여러 사용자로부터 추천받은 WP Rocket 플러그인을 구매하고 설치했습니다.
WP Rocket은 워드프레스 웹사이트의 성능을 향상시키는 플러그인으로, 구매 및 설치 방법에 대한 자세한 정보는 해당 사이트에서 확인할 수 있습니다.
WP-ROCKET 플러그인 구입 및 설치방법이 궁금하다면 이곳 참고하세요.
그러면 이제, 이전에 성능 개선이 이루어지지 않았던 내 워드프레스 웹사이트가 WP Rocket 플러그인을 설치한 후에 어떻게 개선되었는지 살펴보겠습니다.
우선 워드프레스에서 WP Rocket 플러그인을 사용하면 웹사이트 캐싱, 리소스 최적화, 이미지 지연 로딩 및 기타 성능 향상 기능을 제공하여 웹사이트의 로딩 속도를 향상시키고 사용자 경험을 개선하는 데 도움이 될 것으로 기대됩니다.
| 특징 및 장점 | 설명 |
|---|---|
| 페이지 캐싱 (Page Caching) | 웹페이지의 캐시 버전을 생성하여 로딩 속도를 빠르게 합니다. |
| 브라우저 캐싱 (Browser Caching) | 브라우저에서 웹페이지 자원을 캐시하여 재방문 시 로딩 속도 향상 |
| GZIP 압축 (GZIP Compression) | 웹페이지 리소스를 압축하여 대역폭을 절약하고 로딩 속도 향상 |
| 이미지 최적화 (Image Optimization) | 이미지 파일을 자동으로 최적화하여 로딩 속도 향상과 서버 부하 감소 |
| CSS 및 JavaScript 최적화 | CSS 및 JavaScript 파일을 압축 및 병합하여 웹페이지 로딩 속도 최적화 |
| 미디어 지연 로딩 (Lazy Loading) | 이미지 및 동영상을 필요할 때 로딩하여 초기 페이지 로딩 속도 향상 |
| DNS 프리페치 (DNS Prefetch) | 외부 도메인의 DNS를 미리 로딩하여 로딩 지연 최소화 |
| 모바일 최적화 (Mobile Optimization) | 모바일 사용자를 위한 최적화 기능으로 모바일 로딩 속도 향상 |
| 특별한 기술 지원 (Rocket Add-ons) | WooCommerce, Cloudflare 등과 통합하여 특별한 기능 추가 지원 |
이로써, WP Rocket 플러그인을 통해 웹사이트의 성능을 최적화하고 향상시킬 수 있을 것입니다.
그전 과연 플러그인에 대한 설정부분이 무엇이 있는지 하나하나 캡쳐해봤으며 위 링크를 통해 WP-ROCKET을 구입하면 20% 할인쿠폰이 적용되어 저렴하게 구입할 수 있으니 참고하세요
- 단일 라이센스 의 경우 $47.20 ($59 대신)
- Plus 라이선스 의 경우 $95.20 ($119 대신)
- Infinite 라이선스 의 경우 $239.20 ($299 대신)
WP Rocket 플러그인 설정
플러그인을 설치한 모습입니다. 기본적으로 UI부분은 깔끔한데 영어로 보면 힘들기 때문에 한글로 번역해서 하나하나 보도록 하겠습니다.
대시보드 부분을 보면 현재 상태와 자주묻는 질문등을 볼수 있습니다.
우측에는 캐쉬파일을 간편하게 삭제할수 있고 이부분에선 크게 볼 부분은 없는거 같습니다.
로켓 테스터를 설정으로 프로그램 개선에 도움을 줄수도 있습니다.
모바일 캐시
제가 WP-Rocket 을 구입한 결정적인 이유가 바로 모바일캐시부분입니다.
다른 무료플러그인에서 찾기 힘든부분으로 요즘 구글 페이지 스피드에서는 모바일 속도를 중요시하기 때문에 AMP 속도를 개선을 할수 있습니다.
모바일장치용 캐싱과 캐시수명등을 설정을 합니다.
파일최적화
제일 핵심적인 부분으로 워드프레스의 파일을 최적화시켜줍니다.
기능으로는 html 축소,구글폰트 파일결합정적 리소스의 쿼리 문자열 제거등으로 불 필요한 용량 및 http 요청수를 줄일수 있습니다.
그리고 css파일을 축소하고 결합할 수 있습니다.
하단으로 내리면 css 전송을 최적화하여 렌더링 차단 css를 제거할 수 있는 부분이 마음에 듭니다.
자바스크립트 파일 축소 및 파일결합도 가능합니다.
해당긴으을 이용하면 공백에 대한 부분을 제거해주고 사이트의 인라인 js를 결합하여 http요청을 줄일수 있으나 http/2 를 사용하는경우에는 권장하지 않는다 합니다.
마지막으로 자바스크립의 렌더링 차단 js를 제거해 로딩속도를 향상시키고 제이쿼리 jQuery 를 문서 맨 위에 렌더링 차단 스크립트로 로드하여 테마 및 플러그인의 인라인 제이쿼리를 지원합니다.
저는 모든 기능에 체크했습니다.
미디어 이미지 최적화
이미지나 비디오등의 HTTP 요청수를 줄여 실제 로딩 시간을 향상시킬수 있습니다.
그 외에 이모지 사용안함으로 외부 HTTP 요청 수를 줄일 수 있으며 퍼가기를 제한할수 있습니다.
캐시 파일생성
캐시파일생성에서는 사전로드 활성화 및 사이트맵 기반의 캐시ㄹㄹ 사전로드활성화 설정이 가능합니다.
고급규칙
고급캐시부분에선 원하는 URL에 대해 캐시 사용을 제한할 수 있습니다.
URL 삭제를 하고 싶거나 캐시 쿼리 문자열에 대한 캐시를 사용하여 특정 매개 변수를 강제로 캐싱할 수 있습니다.
데이터베이스
데이터베이스에서는 지금까지 작성한 찌꺼기 데이터나 초안 리비전,휴지통 및 스팸 댓글,만료 예정인 데이터베이스등을 삭제해 워드프레스를 가볍게 할수 있습니다.
워드프레스를 오래 관리하다보면 데이터베이스 용량 DB가 커지고 느려지게 되는데 주기적으로 필요없는 DB는 삭제해서 테이블을 정리하느것이 속도를 개선하는데 도움이 되며 트래픽절약효과도 볼 수 있습니다.
나아가 잘못 만들어진 표가 있다면 이또한 수동 최적화 및 자동 정리예약이 가능합니다.
WP Rock CDN 통합
CDN기능은 정적인 파일인(CSS,JS,이미지)의 모든 URL은 사용자가 제공한 CNAME 다시 작성이 가능합니다.
그리고 CDN에 제외하고 싶은 파일은 아래에 수동으로 추가할 수 있습니다
2022년 기준 CND 은 유료로 한달에 7.99달러에 구입할 수 있으며 이를 통해 더욱 빠른 CDN을 활용할 수 있습니다..
- 무제한 대역폭 의 고성능 CDN(콘텐츠 전송 네트워크)
- 간편한 구성: 최상의 CDN 설정 이 자동으로 적용됩니다 .
- WP Rocket 통합: CDN 옵션은 플러그인에서 자동으로 구성 됩니다.
- 맞춤형 CDN 네트워크로 대기 시간, 왕복 시간(RTT)을 줄이고 대역폭 비용을 절감하세요. RocketCDN은 웹사이트를 더 빠르게 만들고 방문자를 만족시킬 수 있습니다.
- 정적 파일(CSS, JS, 이미지)의 모든 URL은 제공한 CNAME으로 다시 작성됩니다.
- Cloudflare 및 Sucuri와 같은 서비스에는 필요하지 않습니다. 사용 가능한 애드온을 참조하십시오 .
CDN 사용 트래픽 및 속도개선
CDN(Content Delivery Network)은 웹 콘텐츠를 전 세계적으로 분산된 서버 네트워크를 통해 전달하는 서비스입니다. 이를 통해 웹 사이트의 성능과 가용성을 향상시키고, 트래픽을 효과적으로 관리할 수 있습니다.
CDN을 사용하면 일반적으로 다음과 같은 이점이 있습니다:
- 속도 향상: CDN은 사용자와 가까운 지역에 위치한 서버를 사용하여 콘텐츠를 전송합니다. 이로 인해 사용자는 빠른 응답 시간과 빠른 다운로드 속도를 경험할 수 있습니다.
- 대역폭 절약: CDN은 콘텐츠를 원본 서버에서 가져와 사용자에게 전달하는 동안 캐싱을 수행합니다. 이는 원본 서버로의 요청 횟수를 줄여 대역폭 사용을 절약할 수 있습니다.
아래는 일반적인 예시를 통해 CDN 사용 시 속도 향상과 대역폭 절약의 정도를 보여주는 표입니다. 이는 일반적인 시나리오를 기반으로 하며, 실제 결과는 여러 요소에 따라 다를 수 있습니다.
| CDN을 사용하지 않을 때 | CDN을 사용할 때 | 성능 향상 (%) | 트래픽 감소 (%) | |
|---|---|---|---|---|
| 페이지 로드 시간 | 4초 | 2초 | 50% | N/A |
| 대역폭 | 100GB | 50GB | N/A | 50% |
위의 표에서 “페이지 로드 시간”은 일반적인 웹 페이지의 로딩 시간을 나타냅니다. “대역폭”은 일정 기간 동안의 트래픽 양을 의미합니다.
CDN을 사용하면 페이지 로드 시간이 약 50% 감소할 수 있으며, 대역폭은 약 50% 감소할 수 있습니다. 하지만 이는 일반적인 예시이며, 사이트의 특성, 콘텐츠의 크기, 사용자의 지리적 위치 등에 따라 실제 결과는 다를 수 있습니다.
Heartbeat API 제어
이 기능은 저도 처음 사용해보는 기능인데 하트비트 API를 이용하면 기본적으로 서버에 생기는 부하를 막을수 있느거 같습니다.
그러기 위해서 활동을 줄이고 싶은부분 (백엔드,편집기,프론트엔드)부분을 활동주기를 설정해 부하를 줄입니다.
WP Rock기능추가
그외 페이스북이나 구글애널리틱스를 통한 브라우저 캐싱 향상을 할 수 있습니다.
WP Rocket Imagify 이미지 최적화
저는 지금까지 이미지최적화는 Smush 플러그인을 주로 사용했는데 WP-Rocket 에서는 Imagify 이미지 최적화를 추천합니다.
이참에 기존의 이미지최적화 플러그인을 삭제후 설치를 해봅니다.
무료 api키를 발급받습니다.
발급방법은 매우 간단합니다.
발급받은 키를 입력해줍니다.
Imagify 플러그인을 사용하면 업로드시 자동으로 이미지를 최적화하고 원본이미지를 백업 및 이미지의 EXIF 데이터를 유지 or 삭제할 수 있습니다.
최적화 하고 싶은 크기당 픽셀을 설정합니다.
그 외 디스플레이 옵션입니다.
WP Rocket 최적화 설정표
| 설정 항목 | 추천 설정 | 설명 |
|---|---|---|
| 캐싱 (Caching) | 활성화 ✅ | 페이지 캐싱을 활성화하여 사이트 로딩 속도 개선 |
| 모바일 캐싱 (Mobile Cache) | 활성화 ✅ | 모바일 기기에서도 캐시 사용 |
| 사용자별 캐싱 (User Cache) | 비활성화 ❌ | 로그인한 사용자별 캐싱이 필요하지 않다면 비활성화 |
| 캐시 수명 (Cache Lifespan) | 10시간 | 캐시 파일 자동 삭제 주기 설정 (사이트 업데이트 빈도에 따라 조절 가능) |
| 파일 최적화 (File Optimization) | – | – |
| HTML 축소 (Minify HTML) | 활성화 ✅ | HTML 파일 크기를 줄여 로딩 속도 향상 |
| CSS 축소 (Minify CSS) | 활성화 ✅ | CSS 파일 크기 축소 |
| CSS 결합 (Combine CSS) | 비활성화 ❌ | HTTP/2 사용 시 권장하지 않음 |
| 렌더링 차단 CSS 제거 | 활성화 ✅ | 렌더링 차단 요소를 최소화하여 페이지 속도 향상 |
| JavaScript 축소 (Minify JS) | 활성화 ✅ | JavaScript 파일 크기 축소 |
| JavaScript 결합 (Combine JS) | 비활성화 ❌ | HTTP/2 사용 시 권장하지 않음 |
| JavaScript 지연 로딩 (Defer JS Loading) | 활성화 ✅ | JS 파일 로드를 지연하여 초기 로딩 속도 개선 |
| 미디어 최적화 (Media Optimization) | – | – |
| Lazy Load (이미지, 아이프레임, 동영상) | 활성화 ✅ | 화면에 나타날 때 로드하여 초기 페이지 로딩 속도 개선 |
| 이모지 사용 안 함 | 활성화 ✅ | 외부 이모지 요청 차단하여 성능 최적화 |
| Embeds 비활성화 | 활성화 ✅ | 다른 사이트의 콘텐츠 임베드 방지로 HTTP 요청 줄이기 |
| 데이터베이스 최적화 (Database Optimization) | – | – |
| 리비전 삭제 | 활성화 ✅ | 불필요한 포스트 리비전 삭제 |
| 자동 저장된 글 삭제 | 활성화 ✅ | 자동 임시 저장된 게시글 제거 |
| 휴지통 비우기 | 활성화 ✅ | 오래된 게시글 및 댓글 삭제 |
| 스팸 및 휴지통 댓글 삭제 | 활성화 ✅ | 불필요한 데이터베이스 용량 절감 |
| 트랜지언트 캐시 삭제 | 활성화 ✅ | 임시 저장된 데이터 정리 |
| CDN 설정 | 사용 가능 | Cloudflare 또는 RocketCDN 사용 시 설정 |
| DNS 프리페치 (DNS Prefetching) | 활성화 ✅ | 외부 도메인 DNS를 미리 로드하여 응답 속도 단축 |
| Heartbeat API 제어 | 활성화 ✅ | 백엔드 및 프론트엔드에서 하트비트 요청 빈도 줄여 서버 부하 방지 |
| 추가 기능 (Add-ons) | – | – |
| Cloudflare 통합 | 필요 시 활성화 | Cloudflare 사용 시 API 키 입력 후 최적화 적용 |
| WooCommerce 최적화 | 활성화 ✅ | WooCommerce 관련 페이지 캐싱 방지 및 최적화 |
| Google Analytics 로컬 호스팅 | 활성화 ✅ | GA 스크립트를 로컬에서 제공하여 속도 향상 |
WP Rocket 워드프레스 속도비교
과연 기존의 수많은 무료 플러그인으로 개선을 보지 못했던 부분이 과연 도움이 되엇을가 테스트를 해보았습니다.
기존의 사용전 모바일 속도의 경우 10점으로 매우 느린속도였습니다.
그러나 WP Rocket 플러그인을 설치한 후, 웹사이트의 성능이 상당히 개선되었습니다. 로딩 속도는 74까지 올라갔으며 데스크탑 환경에서도 이전보다 상당한 향상이 이루어졌습니다.
모바일 AMP 속도가 설정 변경으로 인해 약간 느려졌지만, 전반적인 결과는 만족스러운 것으로 평가됩니다. 웹사이트 최적화에 대한 복잡한 코딩 지식이 필요하지 않고, 해당 분야에 대한 경험이 부족한 사용자에게도 WP Rocket 플러그인은 큰 도움이 될 것으로 보입니다.
만약 마음에 들지 않는다면 환불을 요청하기로 생각했지만, 1년간 사용해보고 나서 결정해보겠다는 생각입니다. WP Rocket 플러그인을 계속 사용하면서 웹사이트의 성능과 사용자 경험을 더 개선할 수 있을 것입니다.
📌 WP Rocket 설정 시 주의할 점
Q1. WP Rocket을 사용하면 사이트 속도가 무조건 빨라지나요?
A. 대부분의 경우 속도가 빨라지지만, 테마 및 플러그인과의 충돌이 발생할 수 있습니다. 특히 JS/CSS 축소 및 결합 기능을 사용할 때 일부 사이트 요소가 깨질 가능성이 있으니, 설정 후 반드시 사이트를 테스트하세요.
Q2. CSS 및 JavaScript 파일을 결합하면 더 빠른가요?
A. HTTP/1.1 환경에서는 CSS/JS 결합이 유리하지만, HTTP/2를 사용하는 경우 결합하지 않는 것이 더 빠를 수 있습니다. 결합하면 개별 파일의 병렬 로딩이 제한될 수 있기 때문입니다. 따라서 HTTP/2 사용 여부를 확인한 후 설정하세요.
Q3. 캐싱 기능을 활성화하면 사이트가 최신 상태로 유지되나요?
A. 캐싱을 활성화하면 사이트의 정적인 버전이 저장되므로, 새로운 콘텐츠나 변경 사항이 즉시 반영되지 않을 수 있습니다. 이를 해결하려면 “캐시 삭제”를 수동으로 실행하거나, 자동 캐시 갱신 주기(예: 10시간)를 설정하세요.
Q4. Lazy Load(지연 로딩) 기능을 사용하면 이미지 SEO에 영향이 있을까요?
A. Lazy Load 기능은 페이지 속도를 높이는 데 유용하지만, 검색 엔진이 이미지 로딩을 인식하지 못할 수도 있습니다. 이를 방지하려면 img 태그에 alt 속성을 꼭 추가하고, noscript 태그 내에 이미지 태그를 삽입해 검색 엔진이 인식할 수 있도록 설정하세요.
Q5. CDN을 사용하면 속도가 무조건 빨라지나요?
A. 대부분의 경우 CDN을 사용하면 속도가 향상되지만, 잘못 설정하면 속도가 느려질 수도 있습니다. 예를 들어,
- 국내 웹사이트라면 해외 CDN보다는 국내 서버 기반의 CDN을 활용하는 것이 좋습니다.
- CDN 사용 시 특정 파일을 제외할 수 있도록 설정(예: 로그인 페이지, 관리자 대시보드 관련 파일).
Q6. WP Rocket을 WooCommerce 사이트에서 사용할 때 주의할 점은?
A. WooCommerce는 장바구니, 결제 페이지 등에서 실시간 데이터 처리가 필요하기 때문에 이 페이지들의 캐싱을 비활성화해야 합니다. WP Rocket의 “WooCommerce 최적화” 기능을 활성화하면 해당 페이지의 캐싱이 자동으로 제외됩니다.
WP Rocket 사용 시 주의사항 및 SEO TIP
📌 WP Rocket 설정 시 주의할 점
Q1. WP Rocket을 사용하면 사이트 속도가 무조건 빨라지나요?
A. 대부분의 경우 속도가 빨라지지만, 테마 및 플러그인과의 충돌이 발생할 수 있습니다. 특히 JS/CSS 축소 및 결합 기능을 사용할 때 일부 사이트 요소가 깨질 가능성이 있으니, 설정 후 반드시 사이트를 테스트하세요.
Q2. CSS 및 JavaScript 파일을 결합하면 더 빠른가요?
A. HTTP/1.1 환경에서는 CSS/JS 결합이 유리하지만, HTTP/2를 사용하는 경우 결합하지 않는 것이 더 빠를 수 있습니다. 결합하면 개별 파일의 병렬 로딩이 제한될 수 있기 때문입니다. 따라서 HTTP/2 사용 여부를 확인한 후 설정하세요.
Q3. 캐싱 기능을 활성화하면 사이트가 최신 상태로 유지되나요?
A. 캐싱을 활성화하면 사이트의 정적인 버전이 저장되므로, 새로운 콘텐츠나 변경 사항이 즉시 반영되지 않을 수 있습니다. 이를 해결하려면 “캐시 삭제”를 수동으로 실행하거나, 자동 캐시 갱신 주기(예: 10시간)를 설정하세요.
Q4. Lazy Load(지연 로딩) 기능을 사용하면 이미지 SEO에 영향이 있을까요?
A. Lazy Load 기능은 페이지 속도를 높이는 데 유용하지만, 검색 엔진이 이미지 로딩을 인식하지 못할 수도 있습니다. 이를 방지하려면 img 태그에 alt 속성을 꼭 추가하고, noscript 태그 내에 이미지 태그를 삽입해 검색 엔진이 인식할 수 있도록 설정하세요.
Q5. CDN을 사용하면 속도가 무조건 빨라지나요?
A. 대부분의 경우 CDN을 사용하면 속도가 향상되지만, 잘못 설정하면 속도가 느려질 수도 있습니다. 예를 들어,
- 국내 웹사이트라면 해외 CDN보다는 국내 서버 기반의 CDN을 활용하는 것이 좋습니다.
- CDN 사용 시 특정 파일을 제외할 수 있도록 설정(예: 로그인 페이지, 관리자 대시보드 관련 파일).
Q6. WP Rocket을 WooCommerce 사이트에서 사용할 때 주의할 점은?
A. WooCommerce는 장바구니, 결제 페이지 등에서 실시간 데이터 처리가 필요하기 때문에 이 페이지들의 캐싱을 비활성화해야 합니다. WP Rocket의 “WooCommerce 최적화” 기능을 활성화하면 해당 페이지의 캐싱이 자동으로 제외됩니다.
📌 WP Rocket을 활용한 SEO 최적화 TIP
Q7. WP Rocket이 SEO에 어떤 영향을 미치나요?
A. 사이트 속도는 Google Core Web Vitals 평가 요소 중 하나로, 빠른 로딩 속도는 SEO에 긍정적인 영향을 미칩니다. WP Rocket을 사용하면 LCP(최대 콘텐츠 페인트), FID(첫 입력 지연), CLS(누적 레이아웃 변경) 등의 지표를 개선할 수 있습니다.
Q8. SEO를 위해 WP Rocket에서 꼭 설정해야 하는 항목은?
A.
✅ HTML/CSS/JS 축소 및 최적화 → 페이지 로딩 속도 향상
✅ Lazy Load 활성화 → 불필요한 리소스 로딩 방지
✅ GZIP 압축 및 브라우저 캐싱 활성화 → 대역폭 절약 및 속도 개선
✅ 데이터베이스 최적화 → 불필요한 데이터 정리로 성능 유지
✅ DNS 프리페치 설정 → 외부 리소스 로딩 시간 단축
Q9. WP Rocket과 함께 사용하면 좋은 SEO 플러그인은?
A.
- Rank Math SEO 또는 Yoast SEO → 메타 태그, 사이트맵, 키워드 최적화 지원
- Imagify (WP Rocket 개발사 제공) → 이미지 압축 및 최적화
- ShortPixel → 이미지 SEO를 위한 자동 압축 기능 제공
Q10. WP Rocket을 사용하면 Google PageSpeed Insights 점수가 올라가나요?
A. 네, WP Rocket 설정을 올바르게 하면 점수가 상승합니다. 하지만 100점을 목표로 하지 말고, 실제 사용자 경험(UX)이 향상되는 것에 초점을 맞추세요.
점수보다 중요한 요소
- First Contentful Paint(FCP) → 첫 번째 콘텐츠가 나타나는 속도
- Largest Contentful Paint(LCP) → 가장 큰 요소가 렌더링되는 속도
- Cumulative Layout Shift(CLS) → 페이지가 갑자기 변하는 문제 방지
Q11. WP Rocket만으로 SEO 최적화가 충분한가요?
A. 아닙니다. WP Rocket은 속도 최적화를 위한 도구이며, SEO는 콘텐츠 최적화, 내부 링크 구조, 키워드 전략 등 다양한 요소가 결합되어야 합니다. 속도 최적화는 SEO의 한 부분일 뿐이므로, 다른 SEO 전략과 함께 적용하세요.