WooCommerce 웹사이트 속도를 높이는 방법: 단계별 가이드

WooCommerce 웹 사이트 속도를 높이는 방법을 배우고 싶기 때문에 여기에 왔습니다. 어쩌면 당신은 당신의 가게가 너무 느리다는 것을 알았을 것입니다. 아마도 이것이 사용자 경험과 SEO에 중요하다는 말을 들어보셨을 것입니다. 이유가 무엇이든, 당신은 올바른 장소에 왔습니다.

이 게시물에서는 WooCommerce 온라인 상점의 사이트 속도를 향상시키는 방법에 대한 자세한 개요를 제공합니다. 속도가 중요한 이유에 대해 이야기하고 전자상거래 웹사이트의 성능을 향상시킬 수 있는 방법에 대한 실용적인 단계별 지침을 제공합니다.

마지막으로 실제 웹사이트에서 언급한 모든 내용의 효과를 확인할 수 있는 사례 연구도 제공합니다.

1 WooCommerce 속도 최적화가 중요한 이유

왜 이 주제에 관심을 가져야 하는지에 대한 질문부터 시작해 보겠습니다. 결국, WooCommerce 웹사이트가 작동한다면 얼마나 빨리 로드되는지가 무슨 상관이겠습니까? 사람들은 정말로 약간의 기다림을 꺼리나요?

실제로 그렇습니다.

웹 사이트 속도는 온라인 상점의 성공에서 가장 과소평가되는 요소 중 하나입니다. Google 연구에 따르면 모바일 사이트 로드 시간이 0.1초만 개선되어도 소매 사이트의 전환율이 8.4% 향상되었습니다.

동일한 연구에서는 구매자 여정의 거의 모든 단계에 긍정적인 영향을 미치는 것으로 나타났습니다.

또한, 검색 엔진 최적화를 위해서는 페이지 로딩 속도가 중요합니다. 최신 순위 요소 중 하나인 Core Web Vitals에서 큰 역할을 합니다. 따라서 느린 사이트 성능은 유기적 가시성에 영향을 미칠 수 있으며 이것이 WooCommerce SEO의 일부인 이유입니다.

WooCommerce 웹사이트를 더 빠르게 만드는 2가지 9가지 방법

이제 이 주제에 관심을 가져야 하는 이유를 알았으니 이를 실행에 옮기는 방법을 알아보겠습니다. 다음에서는 WooCommerce 상점 속도를 높일 수 있는 몇 가지 방법을 살펴보겠습니다.

2.1 올바른 호스팅 선택

호스팅은 웹사이트 성능에 큰 영향을 미칩니다. 온라인 상점의 애플리케이션이 상주하는 실제 시스템을 결정합니다. 느리거나 품질이 낮은 경우 웹사이트 로드 속도에 영향을 미칠 수 있습니다. 말할 것도 없이, 잘못된 호스팅은 가동 중지 시간의 위험을 증가시킵니다.

따라서 좋은 호스팅 제공업체를 선택하는 것이 좋습니다. 이를 위해 고려해야 할 요소는 다음과 같습니다.

• 호스팅 유형 – 공유, VPS, 클라우드, 전용 및 관리형 WordPress 호스팅 간의 차이점을 직접 알아보세요. 이렇게 하면 가장 적합한 것을 선택할 수 있습니다.
• 트래픽 기대 – 방금 시작한 경우 충족하지 못할 트래픽 마진에 대해 비용을 지불할 필요가 없습니다. 유치할 방문자 수에 대해 현실적으로 생각하십시오. 나중에 언제든지 업그레이드할 수 있습니다.
• 성능 특징 – 데이터 센터가 고객이 있는 곳에 있습니까? 호스팅 제공업체에서 CDN을 제공합니까? 다른 성능 최적화? 모든 중요한 고려 사항.
• 보안 조치 – 공급자가 SSL 인증서, 자동 백업 및 기타 중요한 보안 요소를 제공합니까?
• 기타 기능 - 스테이징 사이트 생성 기능, 충분한 대역폭 및 저장 공간, WooCommerce 자동 설치 기능 등을 모두 고려해야 합니다.
• 예산 – 예, 호스팅은 중요하지만 비용 때문에 비즈니스가 망가져서는 안 됩니다. 구매하기 전에 청구서를 지불할 수 있는지 확인하십시오.

요구 사항을 좁힌 후에는 결정을 내리기 전에 후보자를 조사하십시오.

속도 비교, 가동 중지 시간 보고서, 사용 가능한 고객 지원 옵션을 확인하고 고객 리뷰를 읽어보세요.

독일에서 신뢰할 수 있는 호스팅 제공업체를 찾고 있다면, 좋은 시작은 dogado 호스팅입니다. 독일 이외의 지역에 대해서는 One.com을 확인하세요.

2.2 최적화된 WooCommerce 테마 선택

호스팅 외에도 WooCommerce 상점의 주요 구성 요소 중 하나는 테마입니다. 이는 사이트 디자인과 관련된 모든 것을 제어하므로 결과적으로 성능에도 큰 영향을 미칠 수 있습니다. 따라서 여기서도 약간의 조사를 수행하는 것이 좋습니다.

리뷰를 읽고, 준비 또는 개발 사이트를 설정하고 사용해 보는 것이 더 좋습니다. 테마 기능을 직접 확인하고 더미 콘텐츠로 채우고 속도 테스트를 실행해 보세요.

주의해야 할 병목 현상이 있는지 알려줍니다.

또 다른 고려 사항은 모바일 응답성입니다. 즉, 모든 장치의 화면 크기에 자동으로 적응하므로 휴대폰과 태블릿에서도 쉽게 사용할 수 있습니다.

요즘에는 누구도 응답하지 않는 WooCommerce 테마를 판매해서는 안 되지만 확인해 보는 것도 나쁘지 않습니다. 다시 한 번 데모 사이트를 설정하고 모바일 장치나 브라우저 개발자 도구를 사용하여 확인하세요.

후자를 수행하는 방법은 다음과 같습니다.

1. 선택한 브라우저에서 테스트 사이트를 엽니다.
2. 반응형 디자인 모드로 전환(Chrome 및 Firefox 모두에서 Cmd/Ctrl+Shift+M )
3. 상단의 설정을 사용하여 다양한 장치 크기와 연결 속도를 시뮬레이션하세요.
4. 평소처럼 탐색하고 사이트의 모든 기능을 사용해 보세요.

2.3 캐싱 플러그인 사용

WooCommerce 속도를 높이는 쉬운 방법은 캐싱 플러그인을 사용하는 것입니다. 캐싱에 익숙하지 않은 경우, 이는 방문자가 즉시 액세스할 수 있도록 상점 웹 페이지의 완성된 버전을 서버에 저장하는 것을 의미합니다.

일반적으로 WordPress/WooCommerce에서는 웹 페이지가 PHP 파일에서 동적으로 생성됩니다. 이는 브라우저가 표시할 수 있는 HTML 코드를 전달하기 위해 데이터베이스에서 가져온 콘텐츠로 서버에서 처리됩니다. 캐싱 플러그인은 서버가 HTML을 직접 보낼 수 있도록 모든 것을 미리 처리하여 여러 단계를 건너뜁니다.

WooCommerce의 가장 인기 있고 최고의 캐싱 플러그인 중 하나는 WP Rocket입니다.

모바일 장치용 옵션을 포함하여 활성화되는 순간 온라인 상점에 자동으로 캐싱을 추가합니다.

그 외에도 아래에서 볼 수 있듯이 WooCommerce 웹 사이트의 속도를 쉽게 높일 수 있는 훨씬 더 강력한 기능을 제공합니다.

2.4 코드 최적화

성능을 위한 또 다른 중요한 요소는 웹사이트의 코드를 개선하는 것입니다. 캐싱은 WooCommerce를 더 빠르게 만드는 핵심 기술이지만 보다 체계적인 성능 문제를 해결하기 위해 고려해야 할 다른 속도 최적화 조치가 있습니다.

그런 의미에서 웹 사이트 코드를 더욱 간소화하는 데 사용할 수 있는 세 가지 기술은 다음과 같습니다.

1. 축소 – 이는 코드를 더 읽기 쉽게 만들기 위해 웹 사이트 파일에서 주석, 들여쓰기 등 모든 형식을 제거하는 것을 의미합니다. 브라우저는 축소 없이 코드를 이해할 수 있으며 추가 형식으로 인해 파일이 더 커지고 다운로드 속도가 느려집니다.
2. 사용하지 않는 CSS 줄이기 – 웹 사이트에 로드되는 페이지에 아무 것도 기여하지 않는 코드가 있는 경우 속도가 느려질 뿐입니다.
3. JavaScript 지연 및 연기 – 지연 및 연기는 분석 스크립트와 같이 덜 중요한 JavaScript 파일을 무시하여 로드 프로세스에 필수적인 파일의 우선 순위를 지정할 수 있도록 브라우저에 지시하는 것을 의미합니다. 이는 렌더링을 차단하는 리소스를 제거하는 훌륭한 기술입니다.

WP Rocket은 파일 최적화 에서 위의 모든 항목에 대한 옵션을 제공합니다. 몇 가지 상자를 선택하여 JavaScript 및 CSS를 축소, 최적화 및 연기할 수 있습니다.

2.5 제품 이미지 최적화

온라인 상점을 운영하는 경우 제품을 더욱 매력적으로 만들기 위해 많은 이미지를 사용할 가능성이 있습니다. 좋은 생각이지만 이미지에는 텍스트 콘텐츠보다 훨씬 많은 데이터가 포함되어 있으므로 이미지를 더 빠르게 로드하는 방법을 알아야 합니다.

이를 위한 주요 기술은 다음과 같습니다.

• 이미지 압축 – 축소와 유사하게 불필요한 데이터를 제거하는 것을 의미합니다. 이렇게 하면 품질 저하 없이 이미지 크기를 줄일 수 있습니다.
• 이미지 크기 줄이기 – 이미지를 더 작고 더 빠르게 다운로드하는 또 다른 방법은 이미지가 나타나는 위치에 필요한 만큼만 이미지를 표시하는 것입니다. 그렇지 않으면 방문자가 불필요한 데이터를 다운로드하게 됩니다.
• 더 나은 이미지 형식 사용 – WebP 또는 Avif와 같은 형식은 JPG 또는 PNG보다 훨씬 적은 데이터를 사용합니다.

위의 내용을 자동으로 구현하는 옵션은 Imagify입니다. WP Rocket의 동반 플러그인이며 이미지를 대량으로 압축하여 WebP로 변환할 수 있습니다.

2.6 CDN 사용

CDN 또는 "콘텐츠 전송 네트워크"는 세계 여러 곳에 위치한 상호 연결된 서버 모음입니다. 여기에는 모두 귀하의 웹사이트 파일 사본이 포함되어 있으며, 그 목적은 지구상의 다양한 지역에 있는 방문자가 해당 파일에 액세스하는 데 걸리는 거리와 시간을 단축하는 것입니다. 이는 해외 고객을 위한 온라인 상점 속도를 높이는 좋은 방법입니다.

CDN 제공업체는 많습니다. 간단히 가입하여 사이트에 맞게 구성할 수 있습니다.

도움이 필요하다면 WP Rocket이 두 가지 인기 솔루션인 Sucuri 및 Cloudflare 전용 추가 기능을 제공합니다. 정말 빠르게 구성할 수 있습니다.

다른 옵션의 경우 CDN 에서 CDN 사용을 활성화한 다음 네트워크의 CNAME을 제공하고 아웃소싱할 파일을 구성하면 됩니다.

마지막으로 WP Rocket에는 RocketCDN이라는 자체 CDN도 함께 제공됩니다. 기존 WP Rocket 계정에 쉽게 추가하고 자동으로 구성할 수 있습니다.

2.7 HTTP/2 구현

HTTP 프로토콜은 인터넷 연결의 기본 구성 요소 중 하나입니다. 이것이 우리가 웹사이트 URL 앞에 http://를 쓰는 이유입니다.

시간이 지남에 따라 전송 속도에 중점을 두고 새롭고 향상된 HTTP 버전이 출시되었습니다. 예를 들어 HTTP/2는 HTTP보다 몇 배 더 빠릅니다. 여기에서 증거를 볼 수 있습니다.

온라인 상점이라면 이미 HTTP/2가 마련되어 있어야 합니다. 안전한 연결을 설정하고 신용카드 정보와 같은 민감한 결제 데이터를 처리하는 데 필요한 HTTPS의 기반입니다. 그렇지 않은 경우 최대한 빨리 변경하십시오. 또한 귀하의 사이트 속도를 향상시킬 것입니다.

그러나 현재 추가 속도 개선이 포함된 새로운 버전인 HTTP/3이 출시되었습니다. 웹 호스팅 제공업체가 이 프로토콜을 지원하는 경우 WooCommerce 사이트를 해당 프로토콜로 옮기는 것을 고려해 보세요. 이것은 우리가 Rank Math에서도 사용하는 것입니다.

2.8 데이터베이스 정리

아시다시피 WooCommerce 웹사이트는 파일 시스템과 데이터베이스라는 두 부분으로 구성됩니다.

데이터베이스는 페이지의 텍스트, 제품 설명, 메뉴 항목 이름 등과 같은 모든 콘텐츠가 저장되는 곳입니다. 이 정보는 모든 웹 페이지에서 사용되므로 데이터베이스가 느리면 전체 사이트에 문제가 발생합니다.

시간이 지남에 따라 데이터베이스는 임시 및 중복 데이터로 인해 정체될 수 있습니다. 또한 사이트가 계속해서 성장하면 더 많은 정보가 저장될수록 올바른 사이트에 액세스하는 데 더 오랜 시간이 걸릴 수 있습니다.

따라서 기름칠이 잘 된 기계처럼 실행되도록 하려면 데이터베이스를 정기적으로 최적화해야 합니다. PHPMyAdmin이나 WordPress 플러그인과 같은 데이터베이스 프로그램을 통해 수동으로 이 작업을 수행할 수 있습니다.

이미 WP Rocket을 사용하고 있다면 데이터베이스 최적화도 기능 세트의 일부입니다. 데이터베이스 아래에서는 개정판과 자동 초안, 스팸 댓글을 삭제하고 임시 데이터베이스 데이터인 임시 항목을 정리하고 테이블을 최적화하고 자동 정리를 예약할 수도 있습니다.

2.9 너무 많은 플러그인 피하기

WooCommerce 사이트 속도의 마지막 요소는 사용하는 플러그인 수입니다. WooCommerce 자체에는 수백 개의 확장 기능이 있으며 WordPress에서는 수만 개의 무료 플러그인도 제공합니다. 따라서 추가 기능을 위해 사이트에 더 많은 것을 설치하고 싶은 유혹이 항상 있습니다.

그러나 모든 플러그인에는 로드해야 하는 자체 코드와 파일이 포함되어 있어 사이트 속도가 느려질 수 있습니다. 특히 코드가 제대로 작성되지 않은 경우 불행하게도 이런 일이 종종 발생합니다.

그렇기 때문에 성능을 위해서는 숫자를 최소한으로 유지해야 합니다. 귀하가 적극적으로 사용하는 플러그인만 귀하의 사이트에 두십시오. 목적이 없는 것이 있으면 제거해야 할 때입니다. 또한 정기적으로 웹 사이트 속도 테스트를 수행하여 플러그인이 사이트 로딩 시간에 특히 큰 영향을 미치는지 확인해야 합니다.

3 WP Rocket으로 WooCommerce 속도 향상: 사례 연구

이 게시물의 마지막 부분에서는 캐싱 플러그인을 사용하여 WooCommerce 사이트 속도를 높이는 방법에 대한 실제 사례를 보여주는 사례 연구를 살펴보겠습니다.

3.1 테스트 설정 및 초기 판독값

Storefront 테마를 사용하여 간단한 WooCommerce 웹사이트를 설정했습니다. 샘플상품과 홈페이지 디자인이 자동으로 생성되었습니다.

또한 다양한 일반 플러그인과 WooCommerce 확장 기능도 설치했습니다.

PageSpeed ​​Insights를 통해 처음 사이트를 실행했을 때 결과는 다소 평범했습니다.

끔찍하지는 않지만 집에 쓸 것도 없습니다.

• 성능점수 : 64(모바일), 75(데스크톱)
• 콘텐츠가 포함된 최대 페인트 : 7.7초(모바일), 2.5초(데스크톱)
• 총 차단 시간 (아직 INP 데이터 없음): 60ms(모바일) 버전, 0ms(데스크톱)
• 누적 레이아웃 이동 : 0.007(모바일), 0(데스크톱)

즉, 콘텐츠가 포함된 최대 페인트는 모바일과 데스크톱 모두에서 너무 높으며 전반적인 속도 점수는 더 좋을 수 있습니다. 다른 Core Web Vitals 수치는 괜찮았습니다.

진단 섹션을 살펴보면 개선의 여지가 많다는 것을 알 수 있습니다. 위에서 언급한 많은 수정 사항이 언급되어 있습니다.

WP Rocket이 어떻게 도움이 될 수 있는지 살펴보겠습니다.

3.2 속도 최적화

WP Rocket 플러그인을 설치하고 활성화하면 자동으로 여러 가지 개선 사항이 적용됩니다.

• 모바일 캐시를 포함한 캐싱을 활성화하고 수명을 10시간으로 설정합니다.
• 웹사이트 파일을 축소하고 다운로드 속도를 높이려면 Gzip 압축을 활성화하세요.
• WooCommerce 장바구니 로딩 시간 단축
• 캐시 사전 로드 및 링크 사전 로드 활성화

이는 이미 WooCommerce 속도를 높이는 효과적인 방법입니다. 하지만 그 외에도 우리가 할 수 있는 일이 많이 있습니다.

우선, 플러그인 설정의 파일 최적화 에서 CSS 및 JavaScript를 축소, 최적화 및 연기하는 옵션을 켰습니다.

또한 Media 아래에서 지연 로딩을 활성화했습니다.

그 후, 우리는 사전 로드가 활성화되었는지 확인하고 특히 속도 테스트에서 나타난 WooCommerce 플러그인에 포함된 글꼴 파일을 사전 로드하도록 WP Rocket에 지시했습니다.

WooCommerce 사이트에서 동일한 작업을 수행하려면 다음 경로를 복사하여 붙여넣으면 됩니다: /wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff

Image Optimization 아래에서 Imagify를 설치하고 대량 최적화 프로그램을 통해 사이트의 모든 이미지를 실행했습니다.

또한 이미지를 WebP 형식으로 표시하는 옵션도 켰습니다.

마지막으로 미디어 라이브러리로 가서 홈페이지에 표시되는 히어로 이미지의 모든 썸네일 크기를 구체적으로 최적화했습니다.

PageSpeed ​​Insights가 로딩을 방해하는 주요 요소 중 하나입니다. 또한 내장된 편집 도구를 사용하여 너비를 절반으로 줄였습니다.

3.3 최종 속도 결과

이러한 조정을 수행한 후 사이트를 다시 테스트했습니다. 이번에는 훨씬 나아진 것 같습니다.

우리가 달성한 변경 사항은 다음과 같습니다.

진단 섹션도 개선되었습니다. 이전 권장 사항의 대부분은 사라졌거나 이전보다 나아졌습니다.

가장 큰 문제는 여전히 가장 큰 콘텐츠 페인트 이미지입니다. 안타깝게도 WordPress 작동 방식으로 인해 모바일과 데스크톱에서 동일한 이미지를 사용하므로 현재로서는 이에 대해 수행할 수 있는 작업이 없습니다.

그러나 최적화를 구현하는 데 약 10분 밖에 걸리지 않았다는 점을 고려하면 결과는 꽤 좋습니다!

WooCommerce 속도 향상에 대한 4가지 최종 생각

웹 사이트 성능은 특히 로딩 속도가 판매, 전환 및 SEO에 직접적인 영향을 미치는 전자 상거래 사이트에서 중요한 주제입니다. 이를 무시한다는 것은 온라인 상점에 성공할 수 있는 최고의 기회를 제공하지 않는다는 것을 의미합니다.

위에서 우리는 WooCommerce 상점의 속도를 향상시키기 위한 여러 가지 효과적인 단계를 거쳤습니다. 올바른 호스팅 및 테마 선택, 캐싱 플러그인 사용, 코드 및 이미지 최적화, 데이터베이스 및 플러그인 정리 등은 취할 수 있는 조치 중 일부에 불과합니다.

더 기술적인 솔루션이 귀하의 기술 수준보다 높다고 생각되면 언제든지 WP Rocket의 도움을 받을 수 있습니다. 사례 연구에서 살펴본 것처럼, 적은 노력으로도 큰 영향을 미칠 수 있습니다.

이 게시물이 마음에 들면 @rankmathseo를 트윗하여 알려주세요.