WP Rocket 및 Botiga로 WooCommerce 속도를 높이는 방법

WooCommerce의 속도를 높이고 빠르게 로드되는 스토어를 만드는 방법에 대해 고민하고 계십니까?

매장 로드 시간이 쇼핑객의 경험, SEO 순위, 매장 전환율에 영향을 미치기 때문에 신속한 매장을 확보하는 것이 중요합니다.

그러나 동시에 WooCommerce 스토어는 일반 WordPress 사이트보다 최적화하기가 더 어렵기 때문에 스토어의 로드 시간에 실망할 수 있습니다.

몇 가지 이유가 있지만 가장 큰 두 가지 이유는 WooCommerce 스토어가 일반 WordPress 사이트보다 데이터베이스 집약적이며 스토어의 모든 페이지를 캐시할 수 없기 때문입니다.

하지만 그렇다고 해서 더 빠른 저장소를 만들 수 있는 옵션이 없는 것은 아닙니다.

적절한 도구를 사용하면 특별한 기술 지식 없이도 매장 속도를 높일 수 있습니다.

이 튜토리얼에서는 WP Rocket 플러그인과 몇 가지 다른 도구 및 조정을 사용하여 내가 아는 가장 간단한 방법으로 WooCommerce 속도 최적화를 안내할 것입니다.

그 과정에서 각 조정이 스토어의 로딩 시간에 어떤 영향을 미치는지 확인할 수 있도록 실제 성능 테스트 데이터를 공유하겠습니다.

결국 훨씬 더 빠른 로딩 속도의 상점을 갖게 될 것이며 모든 것을 설정하는 데 컴퓨터 공학 학위가 필요 하지 않을 것 입니다.

좋은 소리? WooCommerce의 속도를 함께 합시다.

WP Rocket 이전의 두 가지 기본 WooCommerce 속도 최적화 전술

다음 섹션에서는 WP Rocket을 사용하여 WooCommerce 속도를 높이고 더 빠르게 로드되는 스토어를 얻는 방법에 대해 모두 알려 드리겠습니다.

그러나 빠르게 로딩되는 WooCommerce 스토어를 원한다면 여전히 강력한 성능 기반이 필요합니다. 그렇지 않으면 WP Rocket을 사용하는 것은 돼지에 립스틱을 바르는 것과 같습니다.

기본적으로 WP Rocket은 여전히 ​​상점을 더 빠르게 만듭니다. 그러나 기초가 너무 느려서 시작하지 못한다면 여전히 느린 상점을 갖게 될 것입니다. 그것은 단지 조금..."덜 느릴 것"입니다.

그렇다면 WooCommerce 성능을 위한 강력한 기반은 무엇입니까?

다음 두 가지 세부 사항을 확인해야 합니다.

1. 더 빠른 WooCommerce 테마 선택

상점의 테마는 얼마나 빨리 로드되는지에 큰 역할을 합니다. 크고 부풀려진 테마는 더 많은 리소스를 로드하므로 사이트 속도가 느려집니다.

반면에 빠른 WooCommerce 테마는 그 반대입니다. 보기에 좋고 쇼핑객에게 친숙한 상점을 만드는 데 필요한 최소한의 내용만 로드합니다.

가장 빠른 WooCommerce 테마를 찾기 위해 다양한 옵션을 테스트한 전용 게시물이 있습니다. 그러나 시간을 절약하려면 무료 Botiga 테마를 사용할 수 있습니다.

Botiga는 처음부터 성능을 위해 제작되었습니다. 기본 JavaScript(jQuery 종속성 없음)만 사용하고 코드를 자동으로 축소하며 기본적으로 44.3KB 미만입니다.

또한 모든 데모 사이트는 기본 블록 편집기로 구축되므로 사이트를 데모처럼 보이게 하기 위해 페이지 빌더 플러그인으로 상점의 무게를 줄일 필요가 없습니다.

동시에 Botiga는 다음을 비롯한 여러 가지 유용한 전자 상거래 기능을 제공합니다.

• 다중 결제 및 장바구니 페이지 스타일
• 쇼핑객이 제품을 빠르게 찾을 수 있도록 도와주는 즉각적인 제품 검색
• 세련된 제품 추천
• 제품 변형 견본
• 여러 제품 갤러리 레이아웃
• 희망 목록
• 끈끈한 장바구니 담기 바

Botiga는 완전한 기능을 갖춘 무료 버전과 더 많은 기능을 추가하는 69달러 Pro 버전을 보유하고 있습니다.

이러한 이유로 매장 속도를 높이는 예로 Botiga를 사용합니다.

여기에서 Botiga를 다운로드하거나 데모를 찾아 몇 가지 예를 볼 수 있습니다.

2. 성능 최적화된 WooCommerce 호스팅 사용

빠른 테마를 사용하는 것 외에도 성능에 최적화된 WordPress 호스팅을 선택하고 싶을 것입니다.

가장 저렴한 호스팅을 선택하고 싶은 마음이 들 수 있지만 저렴한 공유 호스팅에는 일반적으로 WooCommerce를 처리할 리소스가 없으므로 무엇을 하든 로드 시간과 성능이 저하됩니다.

여기에서도 가장 빠른 WordPress 호스팅을 찾기 위해 여러 호스팅 제공업체를 테스트한 기사가 있습니다. 급한 경우 고려해야 할 몇 가지 좋은 옵션이 있습니다.

• Kinsta – 전체 Kinsta 리뷰 읽기
• WP 엔진 – 특히 Elasticsearch를 포함하는 전용 전자 상거래 호스팅 계획을 권장합니다(이는 매장의 제품 검색 성능을 크게 향상시킬 것입니다).
• Cloudways – 전체 Cloudways 리뷰 읽기

WP Rocket으로 WooCommerce 속도를 높이는 방법

이제 WP Rocket을 사용하여 부스터를 묶고 WooCommerce를 더 빠르게 로드할 때입니다.

우리는 견고한 호스팅과 빠른 Botiga 테마를 스토어에 사용하고 있기 때문에 이미 자체적으로 꽤 빠르게 로드됩니다. 다음은 홈페이지에서 시작하는 위치를 보여주는 WebPageTest의 성능 메트릭 스크린샷입니다.

그러나 WP Rocket을 사용하면 여전히 더 빠르게 로드할 수 있습니다. 훌륭한 WordPress 성능 최적화 플러그인이 많이 있는데 WooCommerce용 WP Rocket을 추천하는 이유는 무엇입니까?

글쎄, 당신은 내가 그것을 좋아하는 이유를 배우기 위해 내 전체 WP Rocket 리뷰를 읽을 수 있지만 여기에 주요 포인트에 대한 빠른 요약이 있습니다.

1. 즉시 사용 가능한 WooCommerce 호환성이 있습니다. WP Rocket은 사용자가 WooCommerce를 사용하고 있음을 확인하면 캐싱과 같은 기본 사항과 관련하여 최적의 방식으로 자동 구성됩니다. WooCommerce 스토어에서 캐싱을 부적절하게 구성하면 주요 기능이 손상될 수 있으므로 이는 큰 이점입니다.
2. 사용하기가 매우 쉽습니다 . 위의 요점 외에도 WP Rocket에는 일반적으로 간단한 인터페이스, 자세한 설명서 및 프리미엄 지원이 있습니다.
3. 그것은 당신의 사이트를 더 빠르게 만듭니다 . 나는 마지막을 위해 최선을 저장했습니다. WP Rocket은 평범하게 작동하며 WooCommerce 스토어(및 다른 WordPress 사이트도)를 더 빠르게 로드하는 훌륭한 작업을 수행합니다. 또한 사용하지 않는 CSS를 제거하고 JavaScript 실행을 지연시키는 기능과 같은 고유한 기능이 있습니다.

WP Rocket은 프리미엄 플러그인이지만 49달러를 지불하는 것은 더 빠른 WooCommerce 스토어에 지불하기에는 작은 가격입니다. 페이지 로드 시간과 전환율 사이에는 직접적인 관계가 있으므로 상점 속도를 높이면 전환율 증가의 형태로 쉽게 돈을 벌 수 있습니다.

시작하려면 WP Rocket을 구입하십시오. 그런 다음 WooCommerce를 설정하는 방법은 다음과 같습니다.

1. 플러그인을 설치하여 기본 최적화 활성화

시작하려면 WooCommerce 스토어로 이동하고(아직 없는 경우 먼저 설정) WP Rocket을 설치하고 활성화합니다.

WP Rocket 플러그인을 활성화하면 상점 속도를 높이기 위해 다음 기능이 자동으로 활성화됩니다.

• 페이지 캐싱 – WP Rocket은 또한 가능한 한 많은 콘텐츠를 캐싱하면서 문제를 피하기 위해 주요 WooCommerce 콘텐츠를 자동으로 제외합니다. 예를 들어, 다른 호환성 조정 중에서 장바구니 및 결제 페이지를 제외합니다.
• 브라우저 캐싱
• GZIP 압축
• 웹 글꼴에 대한 Cross-Origin 지원
• Google 글꼴 파일 최적화

WooCommerce 스토어에서 WP Rocket은 get_refreshed_fragments AJAX 요청도 자동으로 최적화합니다. 이것은 WooCommerce가 구매자의 장바구니 내용을 동적으로 업데이트하는 데 사용합니다.

다시 말하지만, 이러한 최적화는 모두 자동으로 이루어지므로 WP Rocket을 활성화하는 즉시 상점이 더 빨리 로드되어야 합니다.

다음은 WP Rocket에서 단일 설정을 건드리지 않고 매장 홈페이지가 로드되는 방법입니다.

첫 번째 바이트까지의 시간이 약 450ms(0.509초에서 0.043초로) 감소한 것을 볼 수 있으며, 이는 LCP(Large Contentful Paint)를 비롯한 거의 모든 다른 메트릭에서 유사한 감소로 이어집니다. 가장 큰 콘텐츠가 포함된 페인트 시간이 ~1.1초에서 ~0.7초로 감소했습니다.

이 감소는 주로 WP Rocket이 구현하는 WooCommerce 친화적 페이지 캐싱의 결과이지만 다른 조정도 도움이 됩니다.

2. 파일 최적화 설정

WP Rocket은 기본적으로 많은 유용한 기능을 활성화하지만 수동으로 활성화해야 하는 몇 가지 중요한 기능도 있습니다.

시작하려면 WP Rocket 설정 영역( 설정 → WP Rocket )에서 파일 최적화 탭으로 이동하십시오.

여기에서 상점의 CSS 및 JavaScript 코드를 최적화할 수 있으며 이는 상점의 성능에 큰 차이를 만들 수 있습니다(특히 핵심 성능 향상 및 Lighthouse 성능 점수와 관련하여).

제가 추천하는 설정은 다음과 같습니다.

CSS 파일 :

• CSS 파일 축소 – Botiga 테마는 이미 기본적으로 코드를 축소하지만 사용 중인 플러그인에서 코드를 축소하는 데 도움이 될 수 있습니다.
• CSS 전달 최적화 → 사용하지 않는 CSS 제거 – 페이지별로 불필요한 CSS를 제거하여 각 페이지의 파일 크기를 줄입니다.

CSS 파일을 결합하는 것은 권장하지 않습니다 . 대부분의 고품질 호스트가 HTTP/2를 사용하기 때문에 이것이 실제로 도움이 되지 않기 때문입니다.

자바스크립트 파일 :

• JavaScript 파일 축소
• JS 로드 지연
• 자바스크립트 실행 지연

CSS와 마찬가지로 JavaScript 파일을 결합하는 것은 권장하지 않습니다.

상점의 기능을 보장하기 위해 지연 JavaScript 실행 설정에 일부 제외를 추가할 수 있습니다. 이는 사용자가 사이트와 상호작용(예: 클릭 또는 스크롤)할 때까지 기본적으로 모든 JavaScript 로드를 지연시킵니다.

이는 콘텐츠가 포함된 최대 페인트 시간을 개선하는 데 유용하지만 추적 스크립트(예: Google 애널리틱스 또는 Google 태그 관리자) 또는 사용 중인 일부 플러그인과 같이 즉시 로드하고 싶은 JavaScript가 있을 수 있습니다.

WP Rocket은 모든 잠재적 제외에 대한 자세한 페이지를 유지하므로 자신을 제외하기 위해 스크립트를 알아낼 필요가 없습니다. 이 WP Rocket 도움말 문서에서 간단히 복사하여 제외된 JavaScript 파일 필드에 붙여넣을 수 있습니다.

예를 들어 Google Analytics를 제외하려면 다음과 같이 구성합니다.

이러한 조정을 수행한 후에는 더 많은 개선 사항을 볼 수 있습니다. 우리 홈페이지의 페이지 크기는 약 80KB로 줄어들었고 가장 큰 콘텐츠가 포함된 페인트 시간은 0.7초에서 0.5초로 훨씬 더 단축되었습니다.

3. 미디어 최적화

이 시점에서 WP Rocket에서 대부분의 성능 값을 짜냈습니다. 그러나 추가 조정을 위해 탐색할 수 있는 몇 가지 다른 설정 영역이 있습니다.

미디어 탭에서 지연 로드 및 누락된 이미지 크기를 활성화하는 것이 좋습니다. 전자는 성능에 도움이 되고 후자는 CLS(누적 레이아웃 이동) 문제를 줄여 핵심 성능 향상 기능을 더욱 향상시킬 수 있습니다.

4. 콘텐츠 전송 네트워크 추가(글로벌 스토어용)

CDN(콘텐츠 전달 네트워크)을 사용하면 글로벌 서버 네트워크에서 이미지 및 스크립트와 같은 정적 자산을 캐싱하여 상점 로드 시간을 단축할 수 있습니다.

그러면 방문자는 물리적으로 가장 가까운 서버에서 정적 파일을 다운로드할 수 있으므로 다운로드 시간이 단축되고 스토어 속도가 빨라집니다.

상점이 특정 지역(예: 영국 내)의 쇼핑객만을 대상으로 하는 경우 CDN의 이점을 크게 느끼지 못할 것입니다.

그러나 영국 과 미국과 같이 전 세계의 쇼핑객을 대상으로 하는 경우 CDN은 WooCommerce의 속도를 높이는 또 다른 좋은 옵션입니다.

CDN 섹션에서 WP Rocket은 상점에 CDN을 추가하는 두 가지 옵션을 제공합니다.

1. 무제한 대역폭에 대해 월 $7.99의 비용으로 공식 RocketCDN 서비스를 사용할 수 있습니다. StackPath의 글로벌 네트워크를 기반으로 합니다. 이것은 자동 구성을 제공하기 때문에 가장 간단한 옵션입니다.
2. WP Rocket이 URL을 다시 작성하게 하여 타사 CDN과 통합할 수 있습니다. 인기 있는 옵션은 StackPath, KeyCDN, Bunny CDN, CloudFront 등입니다.

자신의 CDN을 설정하는 데 자신이 없다면 RocketCDN 서비스를 사용하는 것이 좋습니다. 고정 가격으로 무제한 대역폭을 얻을 수 있으므로 상당한 가치를 제공하기 때문입니다.

WooCommerce의 WP Rocket 문제 해결

위의 지침을 따르면 문제 없이 더 빠른 WooCommerce 스토어로 이어지지만 사소한 문제가 발생할 수 있는 드문 시나리오가 있습니다.

가장 일반적인 예는 사용자 위시리스트, 최근에 본 항목 또는 위치별 콘텐츠(예: 국가마다 다른 가격)와 같은 일부 유형의 동적 콘텐츠 문제입니다.

예를 들어 사용자가 위시리스트에 추가한 제품을 방문하는 경우 제품 페이지에 해당 제품을 표시할 수 있습니다. 그러나 어떤 경우에는 캐싱으로 인해 여기에서 이상한 동작이 발생할 수 있습니다.

그래서 - 이것을 어떻게 고칠 수 있습니까? 몇 가지 팁을 살펴보겠습니다.

먼저 캐시 호환 방식으로 코딩된 동적 콘텐츠 플러그인을 사용해 보세요. 본질적으로 이것은 플러그인이 PHP 대신 JavaScript 또는 AJAX를 사용하여 동적 콘텐츠를 생성한다는 것을 의미합니다.

확실하지 않은 경우 문제가 있는 플러그인 개발자에게 문의할 수 있습니다. 일부 플러그인에는 내장된 호환성 도구가 포함되어 있습니다. 예를 들어 YITH WooCommerce 위시리스트 플러그인에는 AJAX 로딩을 활성화하는 설정이 있어 캐싱 문제를 해결할 수 있습니다.

WP Rocket 팀은 또한 문제를 일으킬 수 있는 인기 있는 WooCommerce 플러그인에 대한 몇 가지 호환성 플러그인/도구를 만들었습니다.

• YITH WooCommerce 위시리스트 플러그인
• 네이티브 WooCommerce 최근 본 제품 위젯
• YITH WooCommerce 최근 본 제품 플러그인

위의 수정 사항이 옵션이 아닌 경우 또 다른 잠재적 수정 사항은 플러그인이 설정하는 쿠키를 대상으로 하는 캐시 제외 규칙을 추가하는 것입니다. 이것은 고급이지만 동적 콘텐츠를 보아야 하는 사용자를 위해 캐시를 우회할 수 있습니다.

플러그인 설명서에서 쿠키 정보를 찾거나 개발자를 고용하여 알아낼 수 있습니다. 그런 다음 WP Rocket의 고급 규칙 영역에서 쿠키 캐시 제외 규칙을 설정할 수 있습니다.

WP Rocket 이외의 유용한 WooCommerce 속도 최적화 플러그인

WP Rocket은 WooCommerce 성능 최적화에 필요한 거의 모든 작업을 수행할 수 있습니다. 그러나 한 가지 주요 예외가 있습니다.

이미지!

귀하의 상점에는 수많은 제품 이미지가 있을 것입니다. 그리고 주의하지 않으면 이러한 제품 이미지로 인해 상점(특히 제품 및 상점 페이지) 속도가 느려질 수 있습니다.

솔루션은 이미지를 압축하고 크기를 조정하여 사이트 이미지를 최적화하는 것입니다. 이미지 최적화 플러그인을 사용하여 이를 자동으로 달성할 수 있습니다.

최고의 WordPress 이미지 최적화 플러그인에 대한 전체 게시물이 있지만 다음은 몇 가지 주요 옵션입니다.

• Imagify – 이 플러그인은 WP Rocket과 동일한 개발자가 제공합니다.
• ShortPixel – 내 사이트에서 사용하는 플러그인입니다.
• WP 압축 – 또 다른 고품질 옵션 WP 압축 검토에서 자세히 알아보기

이미지 외에도 대형 매장에 유용한 또 다른 도구는 일종의 제품 검색 솔루션입니다.

제품이 많은 경우 제품 검색은 많은 양의 데이터베이스 쿼리를 발생시키므로 리소스 집약적일 수 있습니다.

Elasticsearch(ElasticPress 플러그인을 통해) 또는 Jetpack Search(또한 Elasticsearch를 기반으로 하지만 구현이 더 간단함)와 같은 오프서버 검색 솔루션을 사용하여 이 문제를 해결할 수 있습니다.

지금 WooCommerce 스토어 속도를 높이십시오

WooCommerce 스토어가 성공하기를 원한다면 빠르게 로드하는 것이 중요합니다.

성공적인 스토어를 설정하려면 먼저 강력한 기반을 설정하는 것이 중요합니다.

1. 무료 Botiga 테마와 같이 빠르게 로드되는 WooCommerce 테마를 선택하세요.
2. Kinsta 또는 WP Engine과 같은 성능 최적화된 WordPress 호스팅을 사용합니다.
3. 전자 상거래 사이트의 기반을 설정하십시오.

거기에서 WP Rocket은 WooCommerce 호환 캐싱, CSS 및 JavaScript 최적화 등을 비롯한 다양한 WooCommerce 성능 최적화를 구현하는 데 도움을 줄 수 있습니다.

또한 이미지 최적화 플러그인을 추가하여 제품 이미지를 최적화하는 경우 가볍고 빠른 WooCommerce 스토어를 제트기로 설정해야 합니다.

WP Rocket 및 Botiga로 WooCommerce 속도를 높이는 방법에 대해 여전히 질문이 있습니까? 댓글로 알려주세요!