전자 상거래 스토어의 WooCommerce 스토어 성능 향상

게시 됨: 2022-05-20

WooCommerce 스토어 성능 향상

WooCommerce 스토어는 모든 인터넷 사용자가 어디에 있든 액세스할 수 있습니까? 상점 성능에 대한 질문은 상점 소유자와 인터넷에서 온라인 상점의 활동 및 가시성을 위한 WooCommerce 호스팅의 우선 순위의 핵심입니다.

WooCommerce 스토어 성능을 개선하는 이유는 무엇입니까?

사용자 경험을 최적화하려면:

고객 유지는 방문한 매장의 WooCommerce 매장 성능 향상에 크게 좌우됩니다. 사용자 경험과 관련하여 세 가지 요소가 두드러지며 모니터링해야 합니다.

1. 웹사이트의 페이지 표시 속도(방문자의 40%는 응답 시간이 3초를 초과하면 탐색을 포기함)
2. 페이지의 요소를 다운로드하는 데 필요한 시간
3. 페이지 요소를 처리하는 브라우저의 유동성

모바일/웹 성능을 개선하려면:

웹 성능 향상

모바일 기기(스마트폰 또는 태블릿)의 일반화로 사용자는 더 이상 데스크톱이나 노트북에 만족하지 않습니다. 이는 더 복잡한 운영 환경을 초래합니다. 모바일 웹 사용자는 점점 더 많은 기대를 갖고 있습니다. 85%는 PC에서처럼 빠른 로드 시간 개선을 기대합니다.

자연 참조를 최적화하려면:

자연 참조 최적화

호스팅 서버의 응답 시간은 검색 엔진이 측정하는 기준입니다. 이렇게 하면 새 웹 페이지의 인덱싱 속도가 빨라지고 더 많은 페이지를 심층적으로 인덱싱할 수 있습니다. Google은 웹 페이지를 표시하는 데 평균 1.5초를 권장합니다.

비용 관리 방법:

비용 관리

저장, 조작 및 활용해야 할 데이터가 점점 더 많아지고 있습니다. WooCommerce 스토어의 효과적인 성능 관리는 비용을 최적화합니다. 이것은 다음을 유도합니다:

리소스를 덜 사용하는 온라인 상점
피크 시간 동안 더 나은 가용성

WooCommerce 스토어의 테스트 로드 시간:

로드 타임 WooCommerce 스토어

첫 번째 단계는 분명히 귀하의 상점을 제공하는 성능을 아는 것입니다. 이를 위해 많은 강력한 도구가 존재하며 절대적으로 변경하거나 개선해야 하는 항목에 대한 지표를 제공합니다. 다음은 3가지 성능 평가 도구입니다.

Pingdom 도구
GTmetrix
Google PageSpeed ​​인사이트

학교에서와 마찬가지로 여기의 목표는 이러한 다양한 도구에서 최고의 확률을 얻는 것입니다. 이것은 먼저 향상된 사용자 경험을 통해 전환율을 최적화합니다. 또한 Google이 알고리즘에서 웹사이트 로드 속도를 고려했다고 발표했기 때문에 더 나은 참조의 이점을 얻을 수 있습니다.

그러나 원시 속도(코드 로딩)와 사용자가 실제로 인지하는 속도를 구별하는 방법을 알아야 합니다. 우리가 말하는 것은 후자이며 사용자가 직면하는 것입니다.

검색 엔진 포지셔닝 기준으로서 웹사이트 성능에 대해 점점 더 많이 듣게 됩니다. 이 요소에는 Google 알고리즘이 전자 상거래 상점이 빠른지 판단하고 이를 다른 요소와 연결하여 제품 페이지의 위치를 ​​결정할 수 있도록 하는 여러 지표가 포함됩니다.

여기에서 중요한 10가지를 다룰 것입니다.

1. WooCommerce 웹 호스팅
2. 이미지 최적화
3. 캐시 플러그인 설치
4. 워드프레스 CDN 통합
5. CSS 및 JS 파일 그룹화
6. CSS 스프라이트 활용하기
7. 페이지를 최대한 밝게
8. 데이터베이스 최적화
9. 자산의 하위 도메인
10. Gzip 압축 활성화

1. WooCommerce 웹 호스팅 :

WooCommerce 웹 호스팅

WooCommerce 호스팅을 선택하려면 가장 저렴한 것으로 바로 이동하여 "경제"를 자동으로 생각하지 마십시오. WooCommerce 스토어가 제대로 호스팅되지 않는 경우 가동 중지 시간과 불안정이 포함될 수 있습니다.

당신은 확실히 방문자 자신입니다! 상점에서 위협이 발견되면 분명히 경쟁업체에 갈 것입니다. 좋은 호스팅은 귀하의 필요에 맞게 조정되어야 합니다. 블로그, 트래픽이 적은 웹 사이트 또는 반대로 트래픽이 많은 웹 사이트에 대한 요구 사항이 다릅니다.

속지 않으려면 주저하지 말고 조언을 줄 수 있는 전문가에게 문의하십시오.

항상 빠르게 표시되는 WooCommerce 스토어를 가지려면 안정성, 전원, 가용성 및 보안을 보장하는 Cloudways와 같은 좋은 호스트가 있어야 합니다. 여기에는 비밀이 없습니다. 최소 예산을 넣어야 합니다.

최고의 WooCommerce 웹 호스팅

방정식은 서버(하드 디스크의 품질, 성능 등), 중복성(장애 문제를 극복하기 위한 서버 수의 곱셈), 서비스(신속한 개입 등)와 같은 많은 매개변수에 따라 달라집니다.

WooCommerce를 위한 웹 호스팅은 양질의 서비스를 보장하는 중요한 요소 중 하나입니다. 꼭 선택하세요!

킨스타 배너

Kinsta는 WooCommerce 사이트를 호스팅하기 위한 또 다른 훌륭한 옵션입니다. 매우 안전하고 속도에 집착하는 아키텍처를 통해 트래픽 급증을 쉽게 처리할 수 있습니다. Woocommerce 솔루션의 경우 자동 크기 조정, 일일 백업, WooCommerce 최적화 서버 환경 및 다양한 옵션 추가 기능을 제공합니다.

2. 이미지 최적화 :

최적화

이미지는 웹 사이트의 로딩 시간에 영향을 미치는 첫 번째 요소입니다. 많은 상점 소유자는 SEO의 이러한 필수 측면을 무시하고 최적화 없이 이미지를 삽입하는 데 만족합니다.

사람들이 자신의 디지털 카메라에서 자신의 웹 사이트로 직접 사진을 업로드하는 것을 보는 것은 드문 일이 아닙니다. 비록 무게가 몇 메가바이트라도 마찬가지입니다. 그러나 그것을 고칠 수 있는 간단한 팁이 있습니다!

이미지를 최적화할 수 있는 몇 가지 도구와 방법이 있습니다. 첫 번째 팁은 Photoshop으로 비주얼을 만들 때 "웹용 이미지를 저장하는 것"입니다.

이를 통해 웹에 자동으로 최적화되고 적용됩니다. TinyPNG 및 이미지 압축 플러그인과 같은 도구를 사용하여 이미지의 무게를 증가시키는 불필요한 데이터를 모두 삭제할 수도 있습니다.

3. 캐시 플러그인 설치:

캐시 플러그인 설치

클라이언트 측에서 제품 페이지의 정적 요소를 저장할 수 있는 옵션이 있습니다. 예를 들어 로고. 이렇게 하면 웹 페이지를 표시하기 위한 서버 요청 수가 줄어듭니다.

원리는 간단합니다. WooCommerce 스토어를 처음 방문하는 동안 정적 파일이 사용자의 브라우저에 저장됩니다. 다음 방문 시 서버에서 수행할 쿼리가 더 적기 때문에 페이지가 거의 즉시 표시됩니다. 로딩 시간을 최적화하는 강력한 방법입니다.

캐싱의 이점을 얻기 위해 캐시 시스템을 만드는 데 사용할 수 있는 몇 가지가 있습니다. Breeze — 예를 들어 무료 WordPress 캐시 플러그인.

4. WordPress CDN 통합:

워드프레스 CDN 통합

콘텐츠 전송 네트워크(CDN)는 WooCommerce 스토어에서 충분히 사용되지 않는 WooCommerce 스토어 성능을 개선하기 위한 또 다른 중요한 매개변수입니다. WordPress CDN의 작동은 다음과 같습니다. 단일 서버에서 페이지의 모든 요소를 ​​로드하는 대신 전 세계 여러 데이터 센터에 위치한 서버 네트워크를 통해 이동합니다.

왜요? 사용자가 서버에서 멀어질수록 로딩 시간이 길어집니다. 여러 서버를 통해 CDN은 각 방문자와 가장 가까운 서버에서 캐시된 페이지를 전달할 수 있습니다. 따라서 귀하의 정적 콘텐츠는 전 세계의 최대 위치에서 사용할 수 있습니다.

5. CSS 및 JS 파일 그룹화:

CSS JS 파일 그룹화

항상 최대한 매장을 가볍게 하기 위해 CSS 및 JS 파일을 압축할 것을 권장합니다(Breeze 캐시 플러그인으로 가능). 이제 웹사이트는 점점 더 많은 JavaScript 및 CSS 코드를 사용하여 작동하게 되므로 무게가 줄어듭니다.

이것은 몇 가지 긍정적인 결과로 이어지지만 또한 상점의 무게가 증가하여 속도가 느려집니다. 이미지에 대해 설명했듯이 코드를 그룹화하여 이러한 파일의 무게를 최대한 줄이는 것이 필요합니다.

6. CSS 스프라이트 활용하기:

CSS 스프라이트 사용

WooCommerce Store 성능 향상은 또한 소위 CSS Sprite 기술을 사용하는 것을 의미합니다. 비디오 게임(2D) 이전에 널리 사용되었던 이 방식을 통해 여러 개의 다른 이미지를 포함하는 단일 이미지를 사용할 수 있습니다. "background-position" 속성에 사용할 이미지를 선택하는 것은 웹 디자이너입니다.

더 구체적으로, 예를 들어 Twitter, Facebook, Instagram, Pinterest, RSS 및 YouTube가 있는 WooCommerce 스토어를 상상해 보십시오. 각 버튼에 대한 이미지가 있는 대신 이 6개의 이미지를 단일 파일로 수집할 수 있습니다. 그런 다음 위에서 언급한 모든 아이콘에 대해 단일 이미지 파일을 사용할 수 있습니다.

7. 페이지를 최대한 밝게

최대 페이지 밝게

속담처럼 중요한 것은 양이 아니라 질입니다. 너무 많은 비디오, 슬라이더, 이미지 또는 광고로 WooCommerce 스토어에 과부하가 걸리는 것을 피하는 것이 좋습니다. 이는 스토어 속도를 상당히 느리게 하기 때문입니다. 효율성은 웹 분야에서 더 많은 과부하를 의미하지 않습니다.

가볍고 간단한 페이지를 사용하면 가시성을 높일 뿐만 아니라 스토어 로딩 속도도 향상됩니다.

8. 데이터베이스 최적화 :

데이터베이스 최적화

데이터베이스는 제품 이미지, 블로그 게시물, 구성 등과 같은 콘텐츠를 저장합니다. 문제는 작동하면서 최적화할 수 있는 무거운 파일을 생성한다는 것입니다. 그렇기 때문에 WooCommerce 데이터베이스를 최적화하는 것이 가장 좋습니다. 또한 데이터베이스 서버를 구성해야 합니다.

따라서 테이블을 잘 구축하고 효율적이고 신뢰할 수 있는 작업을 수행하고(손으로 코딩하는 경우) 인터넷에서 찾을 수 있는 SQL 쿼리를 통해 때때로 자유롭게 최적화하십시오. 동일하게 구성에서 고객 비율과 다양한 전략적 지점을 설정하십시오.

WordPress 플러그인 디렉토리에서 사용할 수 있는 WP-DBManager 플러그인을 사용하여 최적화 WooCommerce 스토어를 사용할 수 있습니다.

9. 자산의 하위 도메인:

하위 도메인 자산

일반적으로 이미지 또는 미디어에 대한 또 다른 최적화: 자산 전용 하위 도메인 생성. 웹 페이지에 연결할 때 브라우저는 기본적으로 특정 수의 하위 도메인 연결(4, 6, 8 …)로 설정됩니다. 일종의 HTTP 요청 대기열입니다. 다른 요청을 시작할 수 있도록 요청이 완료될 때까지 기다려야 하기 때문에 제한이 있습니다.

그러나 예를 들어 이미지 및 비디오에 대해 여러 하위 도메인을 설정하면 여러 HTTP 연결 그룹을 동시에 시작할 수 있으므로 한 쪽에서 "표준" 쿼리를 관리하고 대기열을 생성할 수 있습니다.

그리고 다른 한편으로 요청에 대해 다른 대기열을 만들기 위해: "이미지/자산". 이를 통해 어떤 방식으로든 리소스를 공유할 수 있습니다.

10. Gzip 압축 활성화:

Gzip 압축 사용

사용자가 상점에 액세스하면 표시를 위해 요청된 데이터를 보내기 위해 서버에 호출이 이루어집니다. 데이터는 이미지, 스타일시트 또는 JavaScript 파일일 수 있습니다. 말할 필요도 없이 데이터 크기가 커질수록 브라우저에 데이터를 로드하는 데 시간이 더 오래 걸립니다.

다행히 Gzip 압축은 데이터 크기를 줄이는 데 도움이 됩니다. 서버에서 Gzip이 활성화된 경우 요청한 웹 페이지 또는 파일의 압축 버전이 브라우저에 로드됩니다.

그런 다음 브라우저는 수신된 데이터를 해석하기 전에 압축을 풉니다. 마지막으로 Gzip 압축은 전송되는 정보의 크기를 줄이는 데 도움이 되므로 로딩 시간이 크게 단축됩니다.

이 10가지 방법을 통해 WooCommerce의 WooCommerce 스토어 성능 향상을 최적화할 수 있습니다. 서버 캐시 등 최적화를 더 진행하기 위해 다른 기술을 배치할 수 있습니다. 그러나 이 기사에서 다룬 기술을 배치했다면 이미 대부분의 작업을 완료한 것입니다.

저자 소개:

Saud Razzak은 관리형 WooCommerce 호스팅 플랫폼인 Cloudways의 WordPress 커뮤니티 관리자입니다. Saud는 전 세계 커뮤니티에서 소문을 만들고 지식을 전파하며 사람들에게 WordPress에 대한 교육을 담당하고 있습니다. 여가 시간에는 크리켓을 하고 인터넷에서 새로운 것을 배우는 것을 좋아합니다.