WP Rocket을 사용하여 WooCommerce에서 100 개의 Google Pagespeed 모바일 점수를 누르는 방법

WooCommerce 상점을 사용하여 Google의 Pagespeed Insights에서 완벽한 100을 얻는 것을 목표로하고 있습니까?

이 기사에서는 원래 Magento에서 실행 한 Beauty E-Shop 인 Femme-Fatale.gr로 어떻게 달성했는지 정확하게 보여 드리겠습니다. 당시 500 개의 제품 범주와 450 개의 제품 속성을 갖춘 35,000 개의 제품 카탈로그에도 불구하고 모바일 페이지로드는 5 초에서 15 초가 걸렸으며 사이트는 출혈 판매였습니다.

저는 옥스포드 메타 데이터의 창립자 인 Dimitris Vayenas입니다. 지난 30 년 동안, 나는 웹 성능의 밀리 초에 사로 잡혔습니다. 2022 년 초, 내 친구 Nikos Orfanos는 온라인 상점을 도와달라고 요청했고 우리는 일을 시작했습니다.

Woocommerce로 마이그레이션하고 WP 로켓을 비밀 무기로 사용하는 속도에 전적으로 집중 한 후, 우리는 99에서 100/100 점수 사이의 일관된 점수로 모바일 페이지 스피드 점수를 분쇄했습니다. 더 중요한 것은이 사이트가 정체에서 수익 기계로 갔다.

계속 읽으면 우리가 그러한 결과를 얻는 방법과 WP 로켓이 어떻게 95+ 점수에 도달하는 데 도움이되었는지, 그리고 우리를 완벽한 100으로 밀어 붙이는 마지막 조정을 알게 될 것입니다. 더 중요한 것은, 그 후에는 300 밀리 초 만에 사이트가로드되기 시작한 비즈니스 영향을 알게 될 것입니다.

성능, 특히 모바일에 중점을 두는 이유

Femme -fatale.gr에서는 구매의 90% 이상이 모바일에서 발생합니다. 그로 인해 첫날부터 모바일 성능을 최우선으로 만들었습니다.

모바일 장치는 모든 웹 사이트에 대한 최고의 스트레스 테스트입니다. 제한된 CPU, 메모리 및 불안정한 연결은 데스크탑보다 최대 10 배 느린 페이지를 최대로드 할 수 있습니다. 그렇기 때문에 모든 최적화가 중요합니다.

속도는 효율성을 의미합니다. 클리너 코드, 소규모 자산 및 Leaner DOM은 모든 방문객, 특히 모바일에서 더 부드러운 경험으로 해석됩니다.

“모바일 경험이 즉각적이지 않으면 추가 밀리 초마다 진정한 돈을 잃고 있습니다.”

전환점 : Magento에서 Woocommerce로 이주합니다

2021 년 12 월, Nikos는 분명한 도전으로 연락했습니다. "세션 당 € 0.81로 내 매장이 정점에 도달했습니다. 그런 다음 판매는 세션 당 € 0.15로 떨어졌습니다. 잠금 고등학교로 돌아갈 수 있습니까?"

우리는 첫 번째 단계가 플랫폼을 바꾸는 것임을 알았습니다.

우선, 우리는 민첩하고 현대적인 스택으로 Woocommerce를 선택했습니다. 그것은 성능이 가장 큰 웹 엔지니어 커뮤니티와 함께 ​​상상할 수있는 모든 기능을 다루는 플러그인과 테마 제작자의 생태계를 제공했습니다.

우리는 제품 데이터를 변경하거나 마케팅 지출을 증가시키지 않고 2022 년 3 월에 살았습니다. 유일한 차이점은 속도였습니다. 페이지로드를 5 초에서 10 초로 1 초에서 2 초로 줄입니다.

이것은 Magento에서 마이그레이션하기 전의 로딩 시간 결과를 보여주는 GTMetrix 스크린 샷입니다. 홈페이지의 경우 5.8 초, 카테고리의 경우 7.9 초, 여전히 새 웹 사이트를 개발하는 동안 캡처했습니다.

반면, 이것은 모든 핵심 웹 생명체가 녹색으로 된 현재 성능입니다.

Woocommerce의 진정한 속도 가치는 얼마입니까?

성과에 대한 비즈니스 영향은 무시할 수 없었으며 숫자는 명확하게 만들었습니다.

마이그레이션 전에 Femme -fatale.gr은 성능에 갇혀있었습니다. Magento에서 월간 회전율은 약 40,000 회의 세션으로 € 7,000 ~ € 10,000이며 세션 당 평균 € 0.15 ~ € 0.20입니다. 2020 년의 잠금 정점에서도 트래픽이 62,500 세션으로 급증했을 때도 최고의 성능은 세션 당 € 0.81로 올라갔습니다.

2022 년 2 월, 우리가 Woocommerce로 이주하기 직전에,이 사이트는 세션 당 0.29 유로로 약간 개선되었지만 여전히 그 잠재력과는 거리가 멀었습니다.

더 빠른 성능의 영향은 즉각적이었습니다. 2022 년 3 월, 이주 후 첫 한 달 내내 세션 당 매출은 0.58 유로로 두 배가되었으며, 봇은 캐시를 예열했지만 세션이 일시적으로 급증 했음에도 불구하고 € 0.58로 두 배가되었습니다.

이익은 거기서 멈추지 않았습니다. 2023 년 12 월까지, 우리는 세션 당 € 0.81의 잠금 피크와 일치했습니다. 오늘, 그 숫자는 훨씬 더 높아졌습니다. 웹 사이트는 이제 40,000 개의 월별 방문으로 세션 당 € 1.11을 얻습니다.

Femme -fatale.gr의 소유자 인 Nikos는 최선을 다합니다.

코비드 피크를 일치시키고 초과함으로써, 우리는 속도가 비즈니스에서 가장 큰 레버라는 것을 증명했습니다.

모든 WooCommerce 사이트에 필요한 성능 재단

WP Rocket이 전체 성능 잠재력을 제공하기 전에 견고한 기초가 있어야합니다. 이러한 초기 결정은 우리의 결과에 큰 영향을 미쳤으며, 이것은 또한 Woocommerce 매장을 운영하는 사람에게도 강력히 추천하는 것입니다.

1. 성능 - 첫 번째 테마를 선택하십시오 : 우리는 최상의 옵션을 해결하기 전에 수십 개의 테마를 테스트했습니다. Athemes의 Botiga (Gutenberg 기반)와 Ray Theme (Elementor 기반)은 공급 업체 데모에서 90+를 기록했습니다. 70 이하의 것이 있습니까? 우리는 그것을 피했습니다.

2. 런던, 프랑크푸르트, 암스테르담, 밀라노 및 스톡홀름과 같은 주요 유럽 지역에서 Linode, Vultr 및 Digitalocean이 뒷받침하는 Cloudways를 사용합니다 . 한 번의 클릭 PHP 및 데이터베이스 업그레이드, 내장 광택 및 Redis 및 원활한 모바일 장치 감지를 제공합니다. 이는 성분되지 않은 API 호출이 항상 최적화 된 컨텐츠에 도달 할 수 있도록합니다. 우리는 3 년 만에 다운 타임이 없었으며 지원 팀이 뛰어납니다.
   
   전자 상거래에서 고객과의 근접성은 회상 불가능합니다. 아테네 또는 그리스 섬의 쇼핑객과 로컬 노드가없는 클라우드 웨이와 함께 FastPath를 배치해야합니다. 그것은 모든 주요 그리스 이동 통신 사업자 및 CloudFlare와 직접 동료를 공급하여 50ms 이하 TTFBS와 진정한 지역 경험을 제공합니다.

3. 지원 공급 업체와 파트너 관계 : 우리는 신뢰할 수 있고 빠른 지원을 제공하여 질문에 답변하고 Athemes 및 Fibosearch , Welaunch , 귀하의 사이트 , Aioseo 및 WP Rocket 자체에 이르기까지 귀하의 질문에 답변하고 문제를 해결하기 위해 신뢰할 수 있고 빠른 지원 을 제공하는 공급 업체를 선택했습니다.

4. 컨텐츠 최적화 : 모든 이미지를 Webp로 변환하여 날짜 기반 폴더로 구성하여 각 폴더에 10,000 개 미만의 파일이 포함되어 있는지 확인했습니다. 글꼴의 경우 Woff2 파일을 자체 호스팅하고 청중에게 필요한 캐릭터 만 포함하도록 하위 설정합니다. 이는 글꼴 파일 크기를 70 ~ 80 % 줄였습니다. 로컬로 제공하고 조기에 예압하면 외부 조회를 제거하고 레이아웃 교대를 피했습니다.

5. 수술 플러그인로드 및 데이터베이스 위생을 유지 관리합니다. 플러그인 주최자 및 수동 필터를 사용하여 페이지 당 필요한 플러그인 만로드했습니다. 또한 대규모 WP_OPTIONS 항목을 위해 매주 과도 및 비활성화 된 자동로드를 청소했습니다.

Pagespeed에서 99/100으로 우리를 데려 간 WP 로켓 기능

재단이 마련되면 WP Rocket은 속도를 높이고 뛰어난 성능 결과를 빠르게 달성하는 데 도움이되었습니다. 이 기능은 모바일의 Google Pagespeed에서 95+ 점수를 얻는 데 중요한 역할을했습니다.

• 모바일 캐시 및 Siteemap Preload : WP 로켓은 자동으로 모바일 장치를 감지하고 전용 캐시를 구축합니다. 즉, 스마트 폰 사용자는 항상 사전로드 된 HTML 스냅 샷을받습니다. Sitemap 기반 Preloader는 캐시 퍼지 직후에 페이지를 크롤링하여 첫 방문에서 종종 발생하는 지연을 제거합니다.
  
• CSS 및 JS MINIFITE : WP 로켓은 공백을 벗어나 파일 크기를 축소하기 위해 댓글을 달성합니다. 또한 JavaScript 파일을 하나로 결합하여 HTTP 요청 수를 줄일 수 있습니다. 이는 느린 네트워크의 모바일 사용자에게 특히 중요합니다.  
  
• 사용하지 않는 CSS (RUCSS) 제거 : 간단한 미니 화와 달리 RUCSS는 페이지의 HTML을 분석하고 프론트 엔드에서 사용하지 않은 모든 CSS 규칙을 제거합니다. 이 선고자 스타일 시트는 종종 수십 개의 킬로 베이트를 자르므로 브라우저는 적은 바이트로 더 빨리 렌더링됩니다. 우리는 RUCS만으로도 홈페이지 페이로드에서 200kb를 면도하여 로딩 페이지가 더 빨라지는 것을 직접 보았습니다.
  
• 지연 JavaScript 실행 : 분석, 채팅 도구 또는 타사 위젯과 같은 스크립트는 일반적으로 바로 실행할 필요가 없습니다. WP 로켓은 사용자가 스크롤, 탭 또는 클릭 할 때까지 지연됩니다. 이를 통해 Pages를 대화식으로 빠르게 만들고 다음 페인트와의 상호 작용을 향상시킵니다.

이러한 기능을 활성화 한 후 99 개의 모바일 페이지 스피드 성능 점수를 얻었습니다.

보너스 : 특별한 경우 WP 로켓 애드온

때로는 상자 외부 설정은 약간의 향상이 필요합니다. 복잡한 스케줄러, 사용자 정의 글꼴 규칙 또는 비정상적인 장치 감지와 같은 선택 설정의 경우 WP Rocket Senior Engineers에 컨설팅 한 후 5 개의 무료 WP 로켓 애드온을 설치했습니다.

• RUCSS 매개 변수 변경 : WP 로켓이 사용하지 않는 CSS를 얼마나 자주 그리고 얼마나 깊이 조정했는지 조정했습니다. 이는 AuttomateWoo와 같은 플러그인과의 호환성에 필수적이며 작업 스케줄러에 과부하가 걸릴 수 있습니다.
• 비활성화 WooCommerce 카트 조각 : 데이터베이스가 이미 최적화되었으므로 WP Rocket의 카트 프레임 캐시를 비활성화하여 체크 아웃 통화 속도를 높이기 위해 비활성화했습니다.
• 중고 CSS 글꼴을 비활성화하여 예압 : 수동 예압 규칙과 함께 사용자 정의 자체 호스팅 WOFF2 글꼴을 사용했습니다. 이 애드온은 WP Rocket의 자동 글꼴 예압에 의해 이러한 규칙이 무시되지 않도록합니다.
• HTML 제거 규칙이 만료됩니다. CDN 및 서버는 이미 처리 된 캐시 헤더를 사용하여 WP Rocket의 기본 HTML이 충돌을 피하기 위해 규칙을 만료했습니다.
• 태블릿 설정 모바일 : 모바일 캐싱 및 반응 형 최적화로부터 혜택을 받도록 모바일 장치와 같은 태블릿을 처리했습니다. 이는 WP_IS_MOBILE () 점검에 의존하는 사용자 정의 기능에 중요했습니다.

태블릿 플러그인 외에도 이러한 애드온의 대부분은 복잡한 상점에서만 필요합니다. 전형적인 전자 상거래 설정의 경우 WP Rocket은 바로 상자에서 잘 작동합니다.

100/100 Secret : Perfecting Lazyloading 및 해당 LCP 이미지

Google의 Pagespeed Insights에서 99에 도달하는 것은 큰 이정표 였지만 우리는 만족하지 못했습니다. 한 점은 우리와 완벽 함 사이에 서있었습니다.

먼저, 우리는 요소 Bloat를 다루었습니다. 이는 페이지의 HTML 요소 수를 줄이는 것을 의미합니다. Google은 810 개가 넘는 DOM 요소가있는 페이지를 불이익하고 메뉴, 슬라이더 및 바닥 글만으로도 1,000 명을 넘어 섰습니다.

우리가 한 일은 다음과 같습니다.

• Lazy-Loaded 정적 콘텐츠 : 우리는 헤더 메뉴, 제품 카테고리 슬라이더, 브랜드 캐 러셀 및 바닥 글과 같은 비정규 요소를 연기했습니다.

• 불필요한 요소 제거 : 모바일에서 깊은 메뉴 수준과 비활성화 된 비활성 위젯 영역을 정리했습니다. 이를 통해 Google의 페널티 임계 값 이하의 총 DOM 수를 얻는 데 도움이되었습니다.

클리너 페이지가 있더라도 여전히 100을 깨뜨릴 수 없었습니다. 마지막 문제는 영웅 이미지였습니다.

원래 오버레이, 그림자 및 텍스트가있는 350 × 622 PX 이미지였습니다. 빠르게로드하기에는 너무 복잡했습니다. 우리는 350 × 350 PX Webp로 단순화하고 다음 코드를 사용하여 우선 순위가 높은 상태로 사전로드했습니다.

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

그리고 이것이 영웅 이미지를 단순화하고 사전로드함으로써 모바일에서 완벽한 100/100 psi 점수를 달성 한 방법입니다.

비즈니스 영향 : 성장 엔진으로서의 속도

내가 설명했듯이, 속도는 단지 우리의 페이지 스피드 점수를 향상시키는 것이 아닙니다. 그것은 우리의 수익을 직접 향상시켰다.

성능을 최적화하고 WP 로켓 기능을 활용 한 후 결과에서 측정 가능한 이익을 보았습니다.

• 전환율은 33%증가했습니다.

• 세션 당 매출은 € 0.20에서 € 1.11로 5 배 이상 증가했습니다 .

이 결과는 마이그레이션 후 처음 18 개월 동안 추가 € 384,000의 수입으로 전환되었습니다 .

이것들은 약간의 개선이 아니 었습니다. 그들은 우리의 피크 잠금 성능을 능가하고 결국 부지 속도가 성장의 핵심 레버임을 증명했습니다 .

내가 말하고 싶은대로 : "모든 밀리 초 쉐이브는 결론에 실제 유로를 추가했습니다."

비즈니스 소유자를위한 실용적인 팁

전자 상거래 상점을 운영하는 경우 기술적이든 아니든 몇 가지 추가 실용적인 팁을 공유하고 싶습니다. 기술적이든 아니든 성과를 최대한 활용할 수 있습니다.

1. 실제 사용자 추적 : 실제 사용자 모니터링 (Rum)을 사용하여 현장 데이터를 주시하십시오. 실험실 점수는 유용하지만 실제로 중요한 것은 실제 방문자를 위해 사이트의 수행 방식입니다. 왜곡 된 결과를 피하기 위해 PagesPeed Insights 테스트를 실행할 때 비활성화하십시오.
2. 원산지를 지리화하십시오 : 고객과 가까운 사이트를 호스팅하십시오. Origin 서버가 잠재 고객 근처에 있으면 제품 검색에서 체크 아웃에 이르기까지 모든 것이 더 빠르고 신뢰할 수 있습니다.
3. WP 로켓에 의지하십시오 : 기본 설정으로 시작하십시오. 대부분의 성능 문제를 자동으로 처리합니다. 기준선이 견고하면 CSS 및 JS 파일을 최적화하는 등 몇 가지 추가 기능을 활성화하여 미세 조정할 수 있습니다. 그리고 기술에 정통하지 않으면 : "더 빠른 사이트는 덜 좌절, 판매 및 더 행복한 고객을 의미합니다."

마무리

우리는 Magento에서 Woocommerce로 이사했고, 모바일 Pagespeed 점수를 55에서 완벽한 100으로 인상했으며, 세션 당 매출을 € 0.20에서 € 1.11로 증가 시켰습니다. 그 여정은 한 가지를 분명히 증명했습니다. 속도는 기술적 이정표 이상입니다. 비즈니스 성장의 진정한 동인입니다.

우리는 성능에 중점을두고 강력한 기술 기반을 구축했으며 WP 로켓을 사용하여 결과를 빠르게 잠금 해제했습니다. WooCommerce 상점이 느리거나 성능이 저하 된 경우 이제 조치를 취할 때입니다. 더 빠른 사이트는 방문자에게 더 부드러운 경험과 비즈니스에 대한 실제 이익을 의미합니다.