DE{CODE}: 빠른 전자 상거래 웹사이트 구축을 위한 6가지 WooCommerce 개발 요령

판매 다음으로 사이트 속도는 전자상거래 웹사이트에서 가장 중요한 지표일 것입니다.왜 그럴까요? 빠른 전자 상거래 웹사이트는 더 많은 트래픽을 얻고, 전환율이 높고, 이탈률이 낮고, 더 많은 재방문자를 생성합니다. 이 세션에서는 WP Engine 수석 제품 관리자 Jeremy Benoit와 엔지니어링 관리자 Catherine Kelly가 개발자 요령, WP Engine 기능 및 WooCommerce 스토어를 더욱 빠르게 만드는 기타 도구에 대해 알아봅니다.

세션 슬라이드

전체 텍스트 성적 증명서

JEREMY BENOIT : 안녕하세요 여러분. DE{CODE} 2022에 오신 것을 환영합니다. 전자상거래 트랙입니다. 저는 WP Engine의 선임 제품 관리자인 Jeremy Benoit이며 WooCommerce 성능을 개선하기 위한 6가지 팁에 대해 이야기하고자 합니다. 오늘 제 동료인 캐서린 켈리가 저와 함께 할 것입니다. 시작하겠습니다.

먼저 우리 소프트웨어 엔지니어 중 한 명인 Chris Weigman의 인용문을 공유하는 것으로 시작하겠습니다. 그리고 그가 말했듯이 Google에 따르면 페이지 로드 속도가 3초 이상 걸리면 사용자의 53%가 사이트를 떠납니다. 즉, 정확히 3초 안에 해당 제품 페이지의 모든 데이터, 귀하가 보낸 모든 이미지, 그에 대한 모든 정보, 모든 작은 위젯 및 광고를 얻을 수 있습니다. 쇼핑객 경험의 속도가 중요하기 때문에 오늘날 속도에 대해 다시 이야기합니다.

페이지 속도는 단일 페이지가 로드되는 시간이며 다양한 방법으로 측정할 수 있습니다. 두 가지 중요한 방법은 Google PageSpeed ​​Insights에서 사용하는 Time To First Byte, 또는 종종 쇼핑객의 경험을 반영하는 Time To Full Page Load 또는 Last Byte입니다. 페이지 속도는 쇼핑 사이트의 전환율에도 영향을 미치며 전자상거래 사이트의 SEO에도 영향을 미칩니다.

속도의 중요한 요소 중 하나는 쇼핑객 경험의 품질을 위한 탁월한 호스팅입니다. WP Engine의 컴퓨팅 최적화 플랫폼에서는 모든 쇼핑 콘텐츠(정적 또는 동적)에서 향상된 성능을 위해 향상된 전자 상거래 경험을 제공합니다. 6가지 팁과 요령을 시작하면서 잠시 후에 이 두 가지 콘텐츠 유형에 대해 이야기하겠습니다. 이제 동료인 캐서린에게 넘겨줄게요.

캐서린 켈리 : 건배. 고마워, 제레미. 오늘 우리는 WooCommerce, 구성 및 전자 상거래 상점 설정과 관련하여 6가지 팁을 다룰 것입니다. 노련한 개발자 중 일부에게는 이러한 팁과 조언이 상당히 친숙할 수 있지만 일부 새로운 개발자에게는 유용한 통찰력을 얻을 수 있습니다.

그래서 오늘 우리는 WooCommerce 및 캐싱, 미디어 최적화, 검색 최적화, Ajax 카트 조각, 주문형 주문 테이블 및 헤드리스 속도를 다룰 것입니다. 따라서 첫 번째로 다룰 내용은 WooCommerce 및 캐싱입니다. 이에 대해 알아보기 전에 캐싱과 관련하여 다양한 옵션이 무엇인지 이해하고 캐싱을 개선할 방법에 접근할 수 있습니다.

따라서 캐싱은 성능 문제와 관련하여 성배라는 인상을 줄 수 있습니다. 사실, 캐싱은 원래 성능과 관련하여 만들어진 것이 아니라 컴퓨터가 매번 다시 계산하지 않고 동일한 요청에 대해 반복해서 자동 응답하도록 하기 위한 것이었습니다. 캐싱은 요청에 대한 응답을 임시로 저장한 다음 나중에 동일한 리소스에 대한 동일한 요청에 대한 동일한 응답을 전달하는 데 사용되는 기술입니다.

그래서 그것은 성가신 아이들 중 하나와 약간 비슷합니다. 왜, 왜, 왜와 같은 질문을 계속해서 반복해서 묻는 성가신 아이입니다. 그리고 이것은 정말 잘 작동할 수 있으며 정적 사이트에 대한 정적 정보를 제공할 때 항상 동일한 응답을 제공합니다. 그러나이 접근 방식은 전자 상거래와 관련하여 잘 작동하지 않습니다. 매번 서버에 제출되는 요청이 항상 동일하지 않을 수 있기 때문에 작업에 스패너를 던지기 때문입니다. 카트와 관련하여 다른 사용자의 다른 요청을 동시에 처리하고 제어합니다.

또한 고객과 관련된 이전 거래, 카트에 있는 항목, 매장에서 더 이상 사용할 수 없는 항목을 기억하여 카트가 해당 사용자에게 제공되는 항목을 정확하게 반영할 수 있도록 해야 합니다. 또한 캐싱과 관련하여 고객 A와 관련된 카트를 고객 B에게 제공하지 않고 실제로 다른 사람이 실제로 주문하는 것을 볼 수 있고 기본적으로 원하지 않는 정보 유출을 확인할 수 있습니다. . 캐싱과 관련하여 가질 수 있는 유한한 균형이 있습니다. 고객이 사이트에 계속 참여하도록 고객에게 개인적인 접촉을 제공하려고 할 때 제공하기가 매우 까다롭습니다. 따라서 다양한 수준과 유형의 캐시인 서버 캐시가 있습니다.

그리고 서버 캐시는 일반적으로 다른 캐시와 같습니다. 기본적으로 페이지를 빌드하고 특정 요청에 대해 서비스를 제공할 때 서버에 있는 캐시입니다. 해당 서버 바로 옆에 서서 요청을 하면 즉각적으로 응답할 수 있습니다. 그러나 전자 상거래 개인 또는 사용자와 같이 1,000km 떨어져 있는 경우 응답하는 데 많은 시간이 걸릴 수 있습니다.

그러면 애플리케이션 캐시가 생깁니다. WordPress 및 WooCommerce의 애플리케이션 캐시는 플러그인을 사용하여 관리할 수 있습니다. W3 Total Cache, WP Rocket과 같은 플러그인에는 모두 인앱 캐시 관리 옵션이 있으며 이러한 플러그인은 기본적으로 요청된 페이지의 임시 버전과 파일을 서버에 저장합니다. 그러나 이것은 매우 비효율적인 캐싱 방법이 될 수 있으며 서버 자체나 가속화된 도메인 또는 Cloudflare와 같은 서비스에서 캐싱할 수 있는 기능이 있는 경우 사용해서는 안 됩니다.

그런 다음 브라우저 캐시가 있습니다. 그리고 브라우저 캐시는 기본적으로 최종 사용자의 캐시입니다. 예를 들어 사이트를 업데이트했는데 사이트를 개발하고 검토할 때 프런트 엔드에 자동으로 표시되지 않는 것을 경험한 적이 있습니까? 이는 실제 브라우저에 캐시되었기 때문입니다. 기본적으로 컴퓨터나 휴대폰의 사용자 브라우저에 저장된 해당 페이지 또는 자산의 임시 버전입니다.

거기에 있으므로 해당 페이지의 표시 속도를 높이기 위해 동일한 페이지나 자산을 여러 번 다운로드할 필요가 없습니다. 이는 정적 사이트가 있는 경우에도 잘 작동합니다. 그러나 전자 상거래 사이트와 같은 동적 사이트가 있는 경우 우리는 항상 제품, 설명 및 정보를 제공하려고 노력합니다. 그것은 당신이 원하는 만큼 효과적이지 않을 수 있습니다.

그러면 프록시 CDN 캐시로 알려진 것이 있습니다. 프록시 CDN 캐시는 원본 서버(첫 번째 원본 페이지를 개발하고 표시하는 서버)와 실제 사용자의 브라우저 사이에 있는 캐시입니다. 가속화된 도메인이고 Cloudflare는 일종의 프록시 CDN입니다. 그리고 모든 요청과 응답은 원래 서버에 도달하기 전에 해당 도메인을 통과합니다.

기본적으로 사용자를 위한 정적 콘텐츠 전달을 가속화하기 위해 전 세계에 전략적으로 배치된 서버 그룹입니다. 따라서 1,000마일 떨어져 있을 때 원래 서빙 서버 바로 옆에 서 있는 것과 거의 같습니다. 따라서 해당 페이지의 게재 속도가 빨라집니다. 정적 자산이 특정 위치에 있는 모든 에지 서버에 캐시되면 정적 정보에 대한 모든 후속 방문자 및 요청이 원래 서버가 아닌 에지 서버에서 전달되므로 부하가 줄어들고 성능이 빨라집니다. , 확장성 향상.

따라서 이것은 언급한 정적 사이트와 관련하여 일반적으로 매우 잘 작동합니다. 그러나 전자 상거래 캐시는 작업에 스패너를 넣습니다. 그리고 전자 상거래 – 작업에 스패너가 있는 이유는 항상 동적으로 업데이트되는 로그인 페이지, 카트, 결제, 위시리스트와 관련이 있습니다. 따라서 블로깅 사이트와 같은 일반 사이트에서 요구하는 것처럼 정적이지 않습니다.

일반적으로 GET 요청을 캐시할 수 있습니다. 그리고 GET 요청을 사용하거나 이름에서 알 수 있듯이 일부 리소스를 요청합니다. 언급한 것처럼 GET 요청이 캐싱하기에 안전한 경우가 많지만 로그인한 페이지, 카트 및 체크아웃을 다시 캐싱하고 싶지는 않습니다. 가능한 한 신선하고 새로운 것을 고객에게 제공하여 최신 정보를 정확하게 제공해야 합니다.

따라서 카트에서 무언가를 전달하고 쓰지 않고 싶지는 않습니다. 캐시로 쓰지 마십시오. 일반적으로 장바구니에 무언가가 있으면 대부분의 서버는 캐시를 완전히 우회합니다. 따라서 CDN이 아닌 원래 서버에서 제공하는 문제로 돌아갑니다. 그래서 여러분이 해야 할 일은 그것에 대해 영리하게 파악하고 알아내는 것입니다. 좋습니다. CDN 공급자의 정적 요소를 제공하면서 항상 실제 원본 서버의 동적 요소를 적용하여 모든 것이 최신 상태이고 정확하도록 하려면 어떻게 해야 합니까?

그래서 주의할 점은 서버 캐시의 경우 서버가 웹 페이지를 생성하기 때문에 서버 캐싱을 통해 페이지 전체에서 매번 처음부터 생성되지 않는 페이지의 일부를 기억할 수 있습니다. 그리고 브라우저 캐싱을 사용하면 브라우저가 웹 페이지의 모양을 기억할 수 있으므로 서버와 데이터를 교환하는 데 시간을 소비할 필요가 없습니다. 그리고 이것은 정적 파일이 있을 수 있기 때문에 여러 페이지에 액세스하는 방문자에게 유용합니다. 예를 들어 styleSheets, JavaScript 파일은 모두 브라우저에 저장할 수 있습니다.

따라서 캐싱과 관련된 모범 사례를 위해 항상 HTML을 선택적으로 캐싱하십시오. 기본적으로 첫 번째 수준으로 정적 익명 콘텐츠의 경우 정적 익명처럼 작동하도록 모든 것을 캐시합니다. 그런 다음 쿠키에서 캐시를 우회하고 캐시의 특정 요소를 우회하기 위해 쿠키를 사용하여 장바구니에 있는 모든 항목을 위시리스트에 캐시합니다. 그런 다음 항상 Cloudflare 구성과 관련하여 수명 캐시, TTL(Time to Live)을 설정하세요. 이렇게 하면 캐시가 항상 최신 상태로 유지되고 원래 원본과 일치합니다.

그래서 우리가 전자 상거래 고객과 이야기하면서 이해한 것 중 하나는 이것이 일반적으로 개발자가 직접 가서 해결해야 하는 문제라는 것입니다. 따라서 WP 엔진 개발의 일환으로 우리는 실제로 기본적으로 이러한 모든 캐싱 규칙이 기본적으로 설정된 WooCommerce의 공급 및 설치를 허용하는 전자 상거래 전용 솔루션을 작업하고 있습니다. 따라서 우리는 모든 정적 항목을 캐시한 다음 모든 동적 항목을 캐시하지 않으므로 항상 신선합니다. 항상 지속적으로 새로 고쳐집니다. 따라서 사용자를 위한 장바구니 조각화와 같은 충돌이 없습니다.

미디어 최적화 – 서버에서 전자 상거래 사이트에 있는 최종 사용자에게 콘텐츠를 전달하는 것과 관련하여 중요한 또 다른 사항은 미디어 최적화입니다. 가장 먼저 생각해야 할 것은 미디어 최적화란 무엇입니까? 우리는 그것에 대해 무엇을 할 수 있습니까? 그리고 고객이 사이트를 탐색하고 사용할 때 빠르고 효과적이며 동적인 경험을 제공하려면 어떻게 해야 할까요?

따라서 이미지 및 비디오와 관련하여 고객이 실제로 사용하는 장치를 기반으로 최적의 경험을 제공하려면 다양한 유형의 최적화가 필요합니다. 따라서 미디어 최적화는 전자 상거래 사이트의 성능을 제공하기 위해 항상 실험을 원하기 때문에 최고의 도구, 고급 전략 및 실험을 사용하는 프로세스입니다. 자산 최적화를 원합니다. 효율성과 신뢰성 사이의 균형을 찾으려고 합니다.

따라서 사이트 성능에 해를 끼치지 않는 가능한 가장 빠른 방법으로 항상 고객에게 콘텐츠를 제공하기를 원할 것입니다. 노트북, PC 또는 모바일 장치와 같이 미디어가 소비될 수 있는 다양한 플랫폼과 자산을 고려하여 최단 시간 내에 가장 보기 좋은 콘텐츠를 제공하고자 합니다. 헤드리스, TV 화면, iPad 등과 같은 다양한 유형의 장치의 세계로 이동하여 전자 상거래 상점에서 콘텐츠를 제공하고 소비할 수 있습니다.

따라서 생각하고 싶은 것은 이미지 최적화를 개선하여 웹을 개선하는 것입니다. 즉, 더 많은 트래픽을 유도하고, 전환을 늘리고, 매장 소유자, 브랜드 또는 판매자의 수익을 늘리기 위한 사이트의 성능입니다. 그리고 웹사이트 최적화의 가장 중요한 측면 중 하나는 검색 및 최적화에 영향을 미칩니다. 따라서 이미지와 동영상이 빠르고 빠르다면 실제로 검색 엔진 최적화와 관련하여 더 나은 평가를 받습니다.

자산 최적화는 자산을 만들 뿐만 아니라 귀하의 제품을 잠재 고객에게 더 매력적으로 보이게 하고 검색 엔진 최적화에서 더 자주 나타나게 합니다. 기억해야 할 핵심 사항은 이미지와 동영상의 지연 로딩을 살펴보는 것입니다. 지연 로딩은 기본적으로 차단되지 않거나 중요하지 않은 리소스를 식별하고 필요할 때만 로드하는 전략입니다. 따라서 기본적으로 접힌 부분 위에 있는 콘텐츠가 로드되어 사용자에게 우선 순위로 표시되고 이 화면 아래의 모든 항목에 대한 나머지 렌더링을 모두 지연시켜 사용자가 아래로 스크롤할 수 있도록 합니다.

이 최적화 기술을 사용하면 사용자가 보게 될 첫 번째 이미지와 콘텐츠를 먼저 표시할 수 있습니다. 그리고 우리는 그들이 실제로 보고 아직 보지 않을 자료를 다운로드하는 데 리소스를 낭비하지 않습니다. Google 자체는 지연 로딩을 권장하며 기본적으로 지연된 오프스크린 이미지라고 합니다. 그런 다음 귀찮게로드하지 말라고 말하고 싶습니다.

원하는 경우 개발자로서 수동으로 각 이미지에 태그를 지정하거나 비디오를 지연 로드로 태그할 수 있습니다. 그러나 전자 상거래 사이트에 대해 상상할 수 있듯이 그렇게 하는 것은 상당한 노력이 필요할 것입니다. 또한 각 이미지에 수동으로 태그를 지정하는 것이 불편하다면 플러그인을 사용하여 태그를 지정할 수 있습니다. WordPress에 가장 적합한 플러그인을 Google에서 빠르게 검색하는 경우 사용할 최고의 플러그인에 대한 몇 가지 권장 사항이 있습니다.

그러나 우리와 전자 상거래에서는 예를 들어 WP Rocket에 고정하는 것이 좋습니다. Adobe 지연 로딩 최적화를 제공합니다. 또한 고려하고 싶은 사항은 항상 모바일 사용자를 기억하는 것입니다. 화면과 성능이 더 작기 때문에 대용량 이미지를 로드할 필요가 없습니다. 당신은 그것을 축소하고 싶습니다.

이미지 전체에 압축을 사용하면 대역폭이 40%나 절약되고 특정 화면과 파일 형식을 로드하는 것이 이미지의 핵심이기 때문입니다. 예를 들어 JPEG에 600 x 600 이미지가 있으므로 100KB인 PNG는 216이고 WebP는 56KB에 불과합니다. 따라서 제공될 이 모든 이미지에 사용할 파일 형식이 무엇인지 매우 신중하게 고려해야 합니다. 특히 전자 상거래 사이트에서 잠재적으로 수천 개의 제품, 수천 개의 이미지, 수백 개의 비디오를 보유하여 이러한 이미지와 콘텐츠를 백업할 수 있습니다.

항상 이미지 크기를 조정하고 싶습니다. Imagify, Youoptimizer, TinyJPG와 같은 온라인 도구를 살펴보고 WordPress에서 이미지를 최적화하는 도구를 살펴보세요. Imagify는 WP Rocket과 같은 팀에서 만들었으며 세 가지 다른 유형의 레벨(보통, 공격적 및 울트라)을 사용하여 이미지를 자동으로 압축하는 매우 직관적인 플러그인입니다. 또한 최종 사용자에게 적합한 이미지 크기를 조정할 수 있습니다.

섬네일 크기에도 주의하십시오. 어쨌든 작기 때문에 작게 유지하십시오. 배경을 단순하게 유지하십시오. remove.bg 및 Slazenger와 같은 도구를 사용하여 배경을 제거하고 배경을 업데이트하여 단순화하십시오. 또한 더 빠른 글로벌 전송을 위해 CDN을 사용합니다. 항상 이미지와 함께 해당 이미지에 유용한 대체 레이블을 항상 첨부하십시오.

이는 SEO, 검색 엔진 최적화에 도움이 됩니다. 그리고 라벨이 실제로 이미지나 동영상의 콘텐츠를 반영하는지 항상 확인하세요. 개발자로서 때때로 우리는 RDHD와 같은 약어를 사용하거나 그냥 Y 밴드로 갈 수 있습니다. 우리는 그것이 노란 띠가 있는 빨간 모자라는 것을 압니다. 그러나 SEO는 그것이 무엇인지 모를 것이므로 이미지 표시 측면에서 더 현실적이거나 언어적으로 시도하십시오.

따라서 비디오 최적화도 데이터 압축 도구를 사용하십시오. 다시 말하지만 모바일 사용자를 기억하십시오. 가능하면 모든 것을 HTML5 형식으로 변환하십시오. 소리가 없는 비디오의 경우 오디오를 모두 제거하십시오. 대역폭만 소모하기 때문에 의미가 없습니다. 콘텐츠 전송 네트워크를 다시 사용하십시오. 비디오 사이트를 지정하고 지연 로딩과 관련하여 페이지가 완전히 다운로드될 때까지 해당 이미지 로딩을 항상 연기하십시오.

검색 엔진 최적화– 알다시피 검색 최적화는 기본적으로 검색의 효율성을 높이고 판매자의 판매를 늘릴 수 있기 때문에 전문가인 특정 서비스 공급자에게 검색을 오프로드하는 방법입니다. 사용자. 기본적으로 알고 있듯이 WooCommerce에는 검색 기능이 내장되어 있습니다. 그러나 제품 속성, 사용자 정의 필드 및 설명에 대한 일치와 관련된 기능과 관련하여 원하는 것이 많습니다. 매우 느립니다. 좋은 사용자 경험을 제공하지 않습니다. 그리고 결국에는 매우 비효율적입니다.

WooCommerce와 관련하여 제품 검색을 검색하면 원하는 만큼 효과적으로 작동하지 않는 것과 관련된 일반적인 기능입니다. 실제로 원하는 것은 고객 여정을 방해하지 않도록 강력한 오류 허용 범위를 가진 검색 기능을 갖는 것입니다. 강력한 쿼리 자동 완성 기능을 갖추고 자연어 처리를 통해 더 나은 결과를 얻을 수 있기를 바랍니다. 이 모든 기능은 WooCommerce 검색에서 누락되었습니다.

그런 다음 보고 기능을 쉽게 개선할 수 있는 포괄적인 분석 관련 기능을 원합니다. 따라서 검색에 대한 응답, 고객이 무엇을 검색하는지, 얼마나 잘 검색하는지 등의 측면에서 구축한 검색의 효율성을 실제로 보고 확인할 수 있습니다. 제품과 관련하여 일치합니까? 그런 다음 실제로 도움이 되도록 구성에서 어떤 변경을 수행할 수 있습니까? 기본적으로 고객이 원하는 것을 더 빨리 찾을 수 있도록 도와주세요.

그래서 우리는 무엇을 할 수 있습니까? 앞서 언급했듯이 우리가 하는 일은 검색 경험의 마찰을 줄이고 고객이 원하는 것을 찾도록 돕기 위해 검색 오프로딩을 사용하는 것입니다. 따라서 기본적으로 타사에서 수행하는 프로세스입니다. Woo와 통합되어 있기 때문에 WooCommerce 검색 기능이 향상됩니다. 기본적으로 필요에 따라 필터링을 위한 위젯이 있습니다. 사용자에게 결과를 제공하여 브랜드 신뢰도를 높일 수 있습니다.

자동 제안 기능이 있으며 가중치를 구성하고 조정할 수 있습니다. 고객 결과 – 맞춤형 결과를 제공할 수 있습니다. 내가 언급했듯이 즉각적인 자동 검색 및 검색 분석을 할 수 있으며 이는 매우 중요합니다. 검색이 얼마나 효과적인지 확인하기 위해 검색을 분석할 수 없다면 검색을 할 필요가 없습니다. 또한 고객이 원하는 것을 찾을 수 있도록 SEO 통합을 미세 조정하는 데 도움이 됩니다. 사용자가 Google을 검색하면 사용자가 찾고 있는 내용을 기반으로 특정 사이트에 검색됩니다.

또한 고객의 의도를 파악하고 고객의 관심사에 대한 데이터를 표시하는 데 도움이 됩니다. 그들은 무엇을 찾고 있습니까? 그들은 무엇을 사려고 합니까? 무엇이 그들을 당신의 사이트로 끌어들입니까? 그들은 무엇을 찾고 있습니까?

검색에 대한 권장 사항은 자동 완성을 찾는 것입니다. 따라서 이와 관련하여 제안하십시오. 그리고 항상 오류 수정을 활성화하십시오. 따라서 누군가 제품과 관련하여 잘못된 정보를 입력했다면 기억하지 않도록 하세요. 제품과 관련하여 올바른 철자 또는 설명을 시도하고 항상 기억하십시오. 사이트에서 검색을 활성화한 경우 사용자가 막다른 골목에 도달하도록 허용하지 마십시오.

항상 페이지가 있습니다. 사용자가 귀하의 사이트에 없는 것을 검색하더라도 현재 해당 특정 제품을 찾을 수 없다는 페이지로 안내하십시오. 당사 영업부 등에 문의하시면 도움을 드릴 수 있습니다. 이것은 특정 사용자에게 더 나은 경험이며 해당 고객과의 신뢰도 생성할 것입니다.

항상 최적화하십시오. 고객이 검색하는 내용을 기반으로 분석 조사를 수행할 때 해당 용어와 관련하여 최적화하여 다른 고객이 다시 찾아왔을 때 실제로 검색할 수 있도록 합니다. 모든 제품에 태그, 제목 및 설명을 사용하십시오. 그들은 검색의 빵과 버터입니다.

따라서 모든 데이터가 정확한지 확인하고 제품이 무엇인지 반영하며 항상 특정 판매자 사이트에 있는 개별 제품을 최대한 많이 설명하십시오. 모바일 검색을 구성하십시오. 그리고 모바일 검색은 웹사이트 측면에서 노트북 검색과 조금 다릅니다. 검색에서 구성하고 활성화했는지 확인하십시오. 그리고 항상 분석을 다시 참조하십시오.

WP 엔진과 관련하여 우리는 ElasticPress와 파트너 관계를 맺어 기본적으로 자동으로 기본 설정되고 전자 상거래 제품의 일부로 설치되는 프리미엄 검색 플러그인이라고 생각하는 제품을 제공했습니다. 자동 제안, 가중치, 고객 결과 등을 모두 제공합니다.

이제 저는 우커머스에 대한 조언, 안내와 관련된 세 가지 팁을 거의 완성했으며 Jeremy에게 다시 돌려줄 것입니다. 자, 간다, 제레미. 감사합니다.

JEREMY BENOIT: 살펴볼 또 다른 영역은 AJAX 카트 조각입니다. AJAX 카트 조각은 원하는 코드 조각입니다. 지연 생성, 서버 급증 유발, 불필요하게 실행되는 것으로 알려져 있습니다. 하지만 AJAX 카트 조각이 정말 그렇게 나쁜가요?

글쎄, 그 목적은 새 제품, 새 제품 가격, 새 제품 수량으로 카트를 업데이트하고 페이지를 다시 로드하지 않고 가격을 계산하는 것입니다. 그러나 장바구니 조각 에이전트 스크립트는 홈 페이지, 제품 페이지 및 장바구니에 추가 작업이 없는 페이지까지 모든 페이지에서 실행됩니다. 회사 정보 페이지 또는 연락처 페이지일 수도 있습니다.

이제 이 실행 또는 실행은 종종 서버 스파이크 또는 불필요한 리소스 활용의 원인이 되어 사이트 성능과 쇼핑객의 경험을 방해합니다. 이제 이상적으로 장바구니 프래그먼트 AJAX는 장바구니에 추가 작업이 있거나 장바구니를 열거나 동적으로 상호작용하는 데 사용할 수 있는 동적 장바구니가 사이트에 있는 경우에만 실행되어야 합니다. 그렇다면 AJAX 카트 조각에 대해 무엇을 할 수 있습니까?

대부분의 경우 사람들은 우리가 하는 것처럼 카트 조각을 비활성화할 것을 제안하며 AJAX 카트 조각을 비활성화하는 두 가지 방법이 있습니다. A, 카트 조각 비활성화 기능이 있는 플러그인을 추가하려고 합니다. 카트 조각을 비활성화할 수 있는 플러그인이 꽤 많이 있습니다. 그러나 다른 방법은 php 편집에 익숙하다면 테마의 functions.php 파일을 편집하여 카트 조각화를 비활성화할 수 있다는 것입니다.

몇 가지 위험이 있습니다. 카트 조각을 비활성화하면 일부 카트 위젯에 문제가 발생할 수 있습니다. 따라서 카트 위젯을 비활성화한 후 테스트하여 원하는 대로 작동하는지 확인하려고 합니다.

이제 다음 요령이나 팁은 일단 출시된 커스텀 오더 테이블을 활용하는 것입니다. 당신은 무엇을 의미합니까? 나중에 DE{CODE}에서 올해 말에 출시될 새로운 맞춤 주문 테이블에 대한 WooCommerce의 소식을 듣게 될 것입니다. 그리고 WooCommerce 테이블은 주문 테이블에 구조 딜레마가 있습니다. 많은 분들이 알고 계시겠지만, 이것이 종종 스케일링 불량의 원인으로 지적됩니다. 그러나 제품을 다루는 상호 작용이나 주문을 다루는 상호 작용, 때로는 플러그인 데이터와 관련하여 속도에 문제가 될 수도 있습니다.

현재 WooCommerce는 주문, 제품, 일부 추가된 플러그인 데이터를 포함한 다양한 데이터 엔터티를 저장하는 포스트 메타 테이블을 사용하며 이러한 엔터티 중 하나에 대한 호출이 있을 때마다 모두 충돌합니다. 같은 출처. 따라서 사용자 지정 주문 테이블을 생성하여 트래픽 정체를 완화하면 진정한 전자 상거래 엔진인 WooCommerce의 구조적 무결성이 추가되고 모든 종류의 주문 활동 속도가 향상될 것이라고 상상할 수 있습니다. 이것은 특히 트래픽이 많고 주문량이 많은 사이트 또는 제품 카탈로그가 매우 큰 사이트에 큰 도움이 될 것입니다.

핵심 주문 정보를 위한 새로운 핵심 테이블, 특히 플러그인 데이터를 위한 새로운 플러그인 테이블, 개발자가 저장해야 하는 모든 종류의 사용자 지정 메타데이터를 위한 새로운 메타 테이블 등 세 가지 다른 유형의 테이블을 가짐으로써 포스트 메타 테이블이 이전 및 현재 주문 상호 작용에 대해 가지고 있는 병목 현상. 또한 이러한 테이블에 대한 전용 인덱스가 있으므로 각 테이블에서 특정 엔터티를 빠르게 검색하는 데 도움이 됩니다. 그리고 나중에 DE{CODE}에서 맞춤 주문 테이블에 대해 자세히 듣게 될 것입니다.

그럼 세 번째 개선 사항인 헤드리스의 속도를 살펴보겠습니다. 따라서 이 팁은 헤드리스로 가는 것입니다. 왜냐하면 헤드리스, 헤드리스 스택은 속도를 몇 배나 증가시키기 때문입니다. 헤드리스 인프라의 프런트 엔드에 있는 JavaScript 코드는 기존 WordPress 인프라보다 훨씬 더 빠르며 경우에 따라 10배 더 빠릅니다. Atlas 인프라에는 모든 Lighthouse 지표에서 6배 증가한 고객도 있습니다.

그리고 WP Engine에는 Atlas라는 헤드리스 인프라가 있습니다. 그 인프라는 또한 WooCommerce 인스턴스에서 모든 종류의 정적 및 동적 콘텐츠 검색 속도를 크게 증가시키는 콘텐츠 엔진이라는 구성 요소를 가지고 있습니다. 헤드리스 인프라를 사용하면 백엔드 통합을 사용자 정의할 수 있으며 WooCommerce 사이트와 통합해야 하는 타사 애플리케이션을 통해 초고속 최적화를 위한 기회를 만들 수 있습니다. 그리고 이것이 오늘의 마지막 팁입니다.