New Relic을 사용한 WooCommerce 보고

WooCommerce 보고는 전통적으로 규범적인 비즈니스 지표에 중점을 두었습니다. 사용자 정의하는 것도 어려울 수 있습니다.

이 세션에서는 New Relic APM(애플리케이션 성능 모니터링)을 사용하여 온라인 상점의 성능에 대한 가시성을 높이고 동일한 대시보드에서 사이트 성능 및 주요 비즈니스 지표를 모두 추적하는 방법을 알아봅니다.

스피커:

• WP Engine의 제품 마케팅 관리자 Joshua Dailey
• Damien DeHart, MSP 파트너 엔지니어, New Relic 팀장

세션 슬라이드:

성적 증명서:

조쉬 데일리: 안녕하세요, 여러분. 여기 WP Engine 전자 상거래 솔루션의 제품 마케팅 관리자인 Josh Dailey와 저는 지난 10년 동안 상거래 상점을 만들고 WooCommerce용 확장 프로그램을 개발 및 출시했습니다. 여기서 제가 하는 일은 전자 상거래 솔루션을 지속적으로 개선하는 것입니다.

현재 우리는 전환을 유도하고 지속적인 매장 관리를 단순화하는 몇 가지 고유한 이점이 있는 전자 상거래 패키지를 제공합니다. 여기에는 스마트 캐싱을 사용하여 상점 페이지 캐시의 90% 이상을 제공하는 WooCommerce용 EverCache, 기능을 위해 연결을 끊거나 성능을 희생하지 않고도 더 많은 동시 쇼핑객에게 더 많은 것을 판매할 수 있는 Live Cart, ElasticPress로 구동되는 Instant Store Search가 포함됩니다. 정확한 검색, 17포인트 WooCommerce 시각적 회귀 테스트가 포함된 Smart Plugin Manager, 상점을 쉽게 구축하고 확장할 수 있는 WooCommerce용 빌더 도구.

또한 도구 집합을 확장하기 위한 애플리케이션 성능 모니터링과 같은 추가 기능도 있습니다. 수년 동안 우리는 New Relic과 협력하여 모든 프리미엄 고객에게 이것을 제공했지만 WooCommerce 매장에 고유한 이점이 있다는 것을 알았고 이를 최대한 활용할 수 있도록 하고 싶었습니다.

Built With에 따르면 WooCommerce는 전 세계에서 가장 많이 사용되는 상거래 솔루션으로 700만 회 이상 설치되었습니다. 판매자와 개발자는 WordPress와의 원활한 통합 및 쇼핑 경험을 신속하게 생성하고 사용자 정의할 수 있는 기능 때문에 이를 선택합니다. WooCommerce로 개발을 간소화하면 시작하기 위한 토대를 제공하고 더 빠르게 생산에 도달할 수 있으므로 궁극적으로 프로젝트에서 더 많은 성과를 낼 수 있습니다.

그러나 스토어가 가동되고 트래픽이 수신되면 가장 일반적인 질문 중 하나는 전환을 위해 내 스토어를 최적화하는 방법과 더 나은 보고를 얻을 수 있는 곳은 어디입니까?입니다. 이는 WooCommerce가 기본 기능과 기본 도구와 함께 패키지로 제공되기 때문입니다. 첫 단계 상점을 위해 기본적으로 작동하며 여기에는 주문, 고객, 재고 또는 재고 및 세금의 4가지 구성 가능한 보고서가 포함됩니다.

이제 초보자라면 괜찮습니다. 그러나 귀하가 개발자이고 귀하의 임무가 특정 캠페인에 맞게 사이트 확장을 보장하는 것이라면 보고서가 결과로 제한되기 때문에 일반적인 WooCommerce 보고서로는 충분하지 않습니다. 그러나 건전하지만 건전한 분석을 위해서는 드릴다운하여 사이트 성능이 사이트 결과에 어떻게 연결되는지 답할 수 있어야 합니다. 해당 정보가 한 곳에 없으면 건초 더미에서 바늘을 찾는 것과 같습니다. 고객 매장은 건전한 보고에 따라 고객 확보 및 유지, 성과 병목 현상, 마케팅 캠페인, 성과가 전환과 일치하는 방식, 궁극적으로 비용 절감 및 수익 증대에 대한 결정을 내립니다.

대시보드는 건초더미에서 바늘을 찾기보다 바늘을 뽑아주는 자석과 같습니다. WooCommerce 구축 및 최적화에 대해 더 똑똑해질 수 있도록 전자 상거래 제품에 환상적인 추가 기능을 제공합니다. 예를 들어 특정 기간 동안 주문 수와 함께 데이터베이스 응답 시간이 어떻게 추적되는지 정확하게 볼 수 있습니다. 귀하의 사이트는 확장되고 있습니까? 전환을 늘리기 위해 성능을 최적화할 수 있는 위치는 어디입니까?

따라서 이 세션에서는 시간을 절약하고 유연하고 확장 가능한 매장 보고를 제공할 수 있는 대시보드를 구축하기 위해 표준화할 수 있는 도구를 사용하여 정말 실용적이 되고자 합니다. 이것이 바로 New Relic의 Damien을 초대하여 가장 큰 WP Engine WooCommerce 고객 중 하나를 위해 만든 실제 대시보드로 Woo 보고를 향상할 수 있는 방법에 대한 내부 정보를 제공하게 된 것을 기쁘게 생각하는 이유입니다. 데미안, 우리와 함께 해주셔서 감사합니다. 정말 신나서 따라해봅니다.

DAMIEN DEHART: 조쉬, 초대해주셔서 감사합니다. 이 프레젠테이션을 도와드리게 되어 기쁩니다. 따라서 WPE의 가장 큰 WooCommerce 소비자 중 하나와 함께 구축한 실제 솔루션에 대해 이야기하기 전에 New Relic 플랫폼 전체에 대해 잠시 이야기하고 싶습니다.

따라서 새로운 New Relic 플랫폼에서 우리는 오늘 대시보드 기능과 APM, 그리고 이러한 종류의 결합을 통해 WooCommerce 고객을 위한 보다 강력한 보고 기능을 만드는 방법에 많은 초점을 맞출 것입니다. 그러나 전체 플랫폼에 대한 간략한 소개와 이러한 결정을 내린 방법 및 이를 실현하기 위해 다양한 기능을 활용하는 방법을 제공하는 것이 좋습니다.

따라서 이 그래픽의 하단을 보면 New Relic One이 표시됩니다. 뉴렐릭원은 뉴렐릭 플랫폼입니다. 방대한 시계열 데이터베이스를 기반으로 구축되어 실제로 검색 결과에 대해 Google이 수행하는 것보다 더 많은 조회수를 매일 확인합니다.

해당 플랫폼 위에는 브라우저, Synthetics, 모바일, New Relic APM 및 인프라와 같은 다양한 기능이 모두 있습니다. 이들 모두는 원격 측정 데이터를 New Relic으로 내보냅니다. 우리는 이를 소비하고 최종 고객, WPE 및 모든 고객에게 제공하여 대시보드, 맞춤형 알림 등을 구축하는 데 사용하고 다양한 비즈니스 통찰력을 생성합니다. New Relic 플랫폼에서 가질 수 있는 모든 사용 사례.

그래서 우리는 WPE의 WooCommerce 최대 소비자 중 한 명과 함께 대시보드를 구축했습니다. 여기 오른쪽에 있는 스크린샷을 보면 우리가 만든 대시보드의 스냅샷을 볼 수 있습니다. 잠시 시간을 내어 New Relic 대시보드와 기능을 활용할 때 얻을 수 있는 주요 이점에 대해 이야기하겠습니다.

이전 슬라이드에서 언급했듯이 New Relic은 매일 Google이 검색하는 것보다 더 많은 히트를 보는 방대한 시계열 데이터베이스입니다. 따라서 규모와 성능을 위해 이 데이터베이스를 구축했습니다. 따라서 대시보드와 WooCommerce가 보고와 가질 수 있는 차이점에 대해 생각하기 시작하면 대규모 데이터 검색을 위해 특별히 제작된 솔루션입니다. 이것이 의미하는 바는 비즈니스에 대한 가장 중요한 성능 메트릭을 실시간으로 주시할 수 있는 기능을 제공한다는 것입니다.

또한 New Relic 내부에서 캡처되고 있는 원하는 데이터로 대시보드를 구축할 수 있는 기능을 제공합니다. 이를 위해 코딩할 필요가 없습니다. 우리의 SQL, 즉 우리의 안티 SQL 언어를 이해해야 한다고 말함으로써 나는 그것을 조금 철회할 것입니다. 하지만 기본적으로 SQL을 알면 New Relic을 안다. 또한 전체 스택에서 더 빠르게 문제를 진단할 수 있습니다.

다시 말하지만, WooCommerce에서 실행되는 애플리케이션에서 JavaScript 오류와 같이 애플리케이션 자체에서 고객의 프런트 엔드 상호 작용에 이르기까지 New Relic 플랫폼으로 수집하는 모든 데이터를 모두 추적할 수 있습니다. New Relic과 함께 한 곳에서. 그리고 마지막으로 우리의 주요 목표는 비즈니스 결과를 최적화하기 위해 데이터 기반 의사 결정을 추진하는 것입니다.

어떻게 해야 할까요? 해당 대시보드를 보면 장바구니 총계, 주문 총계, Google 세션 ID 등에 대한 정말 멋진 지표가 많이 보입니다. 또한 모든 단일 세션을 자세히 분석하여 어떤 고객이 무엇을 했는지, 실적이 어떤지, 장바구니에 얼마나 많은 돈이 있는지, 심지어 장바구니 포기율과 같은 것까지 확인할 수 있는 기능을 제공합니다.

하지만 이 통화에서 모두가 알고 싶어하는 실제 질문은 "우리가 한 일이 무엇입니까?"입니다. 배후에서 일어난 기술적 문제는 무엇입니까? 이를 위해서는 New Relic APM이 어떻게 작동하는지 다시 한 번 이해해야 합니다.

New Relic APM은 자신을 PHP WordPress 애플리케이션의 코드 수준에 주입하고 해당 애플리케이션에 대한 모든 단일 호출에 대한 가시성을 제공합니다. 따라서 New Relic을 고유한 위치에 배치하여 애플리케이션 사용자에 대한 데이터를 실시간으로 수집할 수 있습니다. 여기 보시는 것은 애플리케이션에 일부 사용자 지정 데이터를 실제로 주입하는 VS Code의 스크린샷입니다. 우리는 실제로 사용자 정의 데이터를 주입하지 않습니다. 우리는 거기에 우리가 부르는 속성 또는 이미 PHP의 WooCommerce 애드온에 의해 수집되고 있는 애플리케이션 내부의 사용자에 대한 다른 메타데이터를 끌어내는 약간의 스크립트를 넣습니다.

여기 하단에서 강조 표시된 섹션을 볼 수 있습니다. 우리는 실제로 New Relic에 맞춤 매개변수를 추가하는 작업을 수행하고 있으며 주문 이메일을 추가하고 있습니다.

고객이 웹사이트에서 실제로 물건을 구매할 때 추적할 수 있도록 성공적인 체크아웃을 위한 New Relic 트랜잭션을 추가하고 있습니다. 장바구니에 총 항목을 추가하고 있습니다. 우리는 또한 카트에 있던 모든 제품을 추가하고 있으며 실제로 품목 총계와 함께 모든 단일 제품을 함께 반복하고 있습니다. 그런 다음 실제로 주문 합계로 합산합니다. 그리고 이 모든 데이터는 실제로 New Relic으로 펌핑되며 우리가 이미 수집하고 있는 모든 데이터와 일치합니다.

따라서 성능 및 최적화 관점에서 생각해 보면 모든 개별 고객을 파고들어 이 고객이 저에게 얼마를 지출했는지 확인할 수 있습니다. 웹사이트에서의 성과는 어떻습니까? 오류가 발생했습니까? 데이터베이스가 너무 오래 걸립니까? 이를 통해 대규모 및 소규모 고객에게 적절하게 서비스를 제공하거나 그룹으로 그룹화할 수 있으므로 성능이 일상적인 비즈니스에 얼마나 많은 영향을 미치고 효과적으로 수익과 얼마나 많은 돈에 영향을 미치는지에 대한 코호트 분석을 수행할 수 있습니다. 생성하다.

그래서 저는 이것이 표시된 매개변수에 국한되지 않는다는 점을 언급하고 싶었습니다. 이것들은 우리가 수집하는 것들입니다. 하지만 이 통화에 참여한 모든 사람이 알고 있듯이 WooCommerce는 오늘날 우리가 수집하는 것보다 훨씬 더 많은 데이터를 생성하므로 사용자 정의 속성이라고 하는 것을 활용합니다. 그리고 원하는 다른 데이터도 수집할 수 있습니다. 예를 들어, 애플리케이션이 사용자 이름, 사용자 이메일, 고객 이름 또는 지원 계층을 수집하고 목록이 계속 진행되는 경우 이러한 추가 매개변수를 New Relic에 주입할 수도 있습니다. 의.

이는 APM 및 애플리케이션 성능 모니터링을 사용하여 해당 비즈니스 컨텍스트를 New Relic, UI, 데이터 계층 및 궁극적으로 비즈니스 관행에 추가하여 더 나은 정보에 입각한 결정을 내리고 구매하도록 하는 것으로 확장됩니다. -개발자부터 CTO, 심지어 비즈니스 측면의 CEO까지 모든 사람이 참여합니다. 따라서 WordPress 구독에 포함되어 있는 New Relic Synthetics를 사용하여 WordPress 솔루션을 관리하고 이를 전자 상거래에 사용하는 방법에 대해 조금 이야기하고 싶었습니다.

따라서 New Relic 합성은 매우 강력한 Selenium 기반 테스트 도구이므로 스트레스 테스트 또는 부하 테스트 솔루션으로 광고하는 것을 좋아하지 않지만 프로그래밍 방식으로 웹 사이트에 트래픽을 보내는 방법이라고 광고합니다. 매우 구체적인 시나리오를 테스트하기 위해. 따라서 WP 엔진의 모니터링 패키지에 대한 구독으로 얻을 수 있는 여러 가지 다른 검사가 있습니다. 첫 번째로 다룰 내용은 가용성 테스트입니다.

따라서 이것은 기본적으로 웹 사이트가 현재 시점에 존재하는지 여부를 알려주는 DNS 서버에 대한 핑입니다. 그래서 용도가 있습니다. 우리는 이것을 합성 테스트의 기본 유형으로 간주합니다. 그러나 사용 가능한 다른 버전이 있습니다. 따라서 SSL 인증서 만료 테스트가 있습니다.

그래서 이것은 정확히 들리는 것입니다. 인증서가 만료될 때 알려주도록 구성하고 해당 날짜가 가까워지면 알림을 보냅니다. 또한 페이지 링크 크롤러(Page Link Crawler)가 있어 웹사이트의 모든 링크를 보여주고 웹사이트에서 끊어진 링크가 있는지 알려줍니다.

전자 상거래 고객은 종종 변경되는 웹 사이트에 다양한 제품 링크가 있는 경우가 많기 때문에 이것이 특히 유용하다는 것을 알았습니다. 그리고 때로는 그것을 따라잡기가 어렵습니다. 따라서 무엇이 손상되고 고객이 액세스할 수 없는지 알려주는 테스트를 갖는 것은 전자 상거래 사이트를 통해 최대 수익을 달성하는 데 가장 중요합니다. 또한 모든 자산이 포함된 전체 페이지 로드를 수행하는 페이지 로드 성능 모니터가 있으며 페이지의 모든 다른 자산이 수행하는 작업을 실제로 알려줍니다. 따라서 이미지가 너무 크거나 JavaScript가 있는 경우 웹 사이트와 관련된 오류 및 목록이 계속됩니다.

그런 다음 단계 실행 또는 사용자 흐름 기능 테스트에 대한 데모를 실제로 수행할 것입니다. 데모 환경 중 하나에 있는 체크아웃 페이지를 살펴보겠습니다. 그리고 프로세스 전체에서 발생하는 모든 오류를 표시합니다. 따라서 고객이 로그인하고 체크아웃 흐름을 거쳐 카트에 항목을 넣은 다음 체크아웃을 시도하는 과정을 살펴보겠습니다. 그리고 우리는 거기에서 무슨 일이 일어나는지 볼 것입니다. 따라서 더 이상 고민하지 않고 데모 시간입니다.

자, 여기 New Relic 안에 있습니다. 지금 보시는 것이 뉴렐릭 홈페이지입니다. 이 페이지에 익숙하지 않은 사용자를 위해 New Relic에 존재하는 다양한 엔티티를 모두 보여줍니다. 그리고 기본적으로 엔터티는 모니터링하려는 데이터를 내보내는 것입니다.

그래서 우리는 오늘 합성물에 대해 이야기할 것입니다. 합성에 도달하는 방법은 여기 왼쪽으로 이동하면 왼쪽에 합성 모니터링이 표시됩니다. 여기에서 합성 모니터를 클릭하여 이동할 수도 있습니다. 그러나 완전성을 위해 오늘 클릭하겠습니다.

여기 내 데모 계정 안에 수많은 모니터가 있는 것을 볼 수 있습니다. 결제 흐름이 작동하는지 확인하는 스크립팅된 브라우저를 보여드리고 싶습니다. 그래서 나는 이것이 verify라는 이름을 알고 있으며 이름을 확인했습니다. 입력하면 이것이 내 모니터 자체임을 알 수 있습니다.

모니터에 들어가면 여러 가지를 볼 수 있습니다. 그래서 우리는 실제로 이것을 세 개의 다른 위치에 대해 실행하고 있습니다. 여기 싱가포르, 런던, 포틀랜드가 있습니다. 그리고 이 세 가지는 New Relic이 공공 장소라고 부르는 것입니다.

따라서 우리는 AWS에 전 세계적으로 호스팅된 여러 위치를 보유하고 있으므로 실제로 이 모든 위치에 대해 검사를 실행할 수 있습니다. 따라서 글로벌 웹 사이트와 같은 것이 있고 전 세계에서 성능을 테스트하려는 경우 이것이 수행하는 방법입니다.

이는 CDN 요청에도 도움이 됩니다. 따라서 확인을 실행 중이고 싱가포르에서는 속도가 매우 느리지만 데이터 센터와 모든 호스팅이 미국 서부에 있을 수 있다고 가정해 보겠습니다. 전 세계적으로 지속적인 성능을 얻을 수 있도록 여기에 CDN을 세우고 싶을 수도 있습니다.

따라서 이 차트에서 지난 30분 동안 보고 있는 시간 프레임 동안의 확인 수에 대한 실패 수를 볼 수 있습니다. 이것을 하루로 확장하면 여기에서 일부 메트릭이 변경되는 것을 볼 수 있지만 이것은 실제로 지난 2시간 30분 동안 표시됩니다. 모든 실패는 빨간색으로 표시됩니다.

따라서 지난 2시간 30분 동안 실제로 오류가 발생하지 않았으며 여러 위치에서 몇 가지 기본 타이밍 정보가 표시됩니다. 조금 내려가면 일부 성능 메트릭도 볼 수 있습니다.

따라서 이것은 사용자 중심의 성능 메트릭을 보여줍니다. 따라서 첫 번째 바이트는 기본적으로 페이지의 모든 항목이 표시되었을 때입니다. 첫 번째 페인트는 그림이나 텍스트 또는 무엇이든 로드된 경우와 비슷합니다. 페이지 로드는 전체 페이지 로드이므로 페이지가 완전히 로드되었을 때입니다.

그리고 First Contentful Paint는 기본적으로 페이지에 로드된 가장 큰 이미지입니다. 그래서 우리는 이 확인을 위해 모든 것에 대한 타이밍 정보를 제공하고 있습니다. 도메인별로 요청을 표시하고 있습니다.

따라서 응용 프로그램 자체에서 호출할 때 호출하는 데 시간이 얼마나 걸리나요? 시간이 지남에 따라 얼마나 많은 요청이 발생합니까? 그런 다음 도메인별 기간입니다. 그럼 각각 얼마나 걸리나요? 우리는 newrelicdemo.com을 가지고 있는데 가장 오래 걸리고 자원 유형별로 평균 크기입니다.

그래서 우리는 이미 여기서 이미지가 여기에서 가장 큰 것을 볼 수 있습니다. 따라서 최적화 기회가 있다면 이 사이트의 이미지를 보기 시작할 것입니다.

마지막으로 오류 응답 코드입니다. 그래서 이것들은 당신이 볼 것으로 기대할 수 있는 모든 것입니다. 합성 검사를 생성하면 여기에 많은 태그가 있는 것도 볼 수 있습니다. 이들은 플랫폼 내에서 사용자 정의할 수 있습니다. 따라서 팀이나 제품 표면, 특정 웹사이트 또는 테스트 중인 제품이 있는 경우 실제로 그런 식으로 태그를 지정할 수 있습니다. 그런 다음 플랫폼에서 해당 태그를 검색할 수 있습니다.

또한 URL이 표시됩니다. 따라서 이것을 클릭하면 실제로 이 확인으로 모니터링하고 있는 내 웹 페이지로 이동하게 됩니다. 귀하의 경우 귀하의 라이브 전자 상거래 사이트가 될 것입니다. 이 경우 내 데모 앱입니다.

좋습니다. 이것은 모두 훌륭합니다. 하지만 무엇이 잘못되었는지 또는 응용 프로그램 내부에서 무엇이 잘못될 수 있는지에 대해 이야기하는 부분에 도달하려면 어떻게 해야 합니까? 여기 왼쪽 사이드바에 다양한 옵션이 있습니다. 우리는 이러한 더 많은 보기에 초점을 맞추지 않을 것이지만 각각의 기능에 대해 이야기할 것입니다.

아래에서 위로 시작하여 설정 탭에는 여기에서 실행 중인 스크립트가 실제로 표시됩니다. 기본적으로 모니터에 대한 구성 설정, 선택한 위치를 보여줍니다. 저는 실제로 여기에서 이것을 편집할 권한이 없습니다. 그래서 이전에 논의한 것처럼 여기 모든 공개 위치 목록이 표시됩니다. 저희는 3번을 선택했습니다.

그리고 여기에 스크립트가 있습니다. 이것이 우리의 대본입니다. Node에 내장되어 있고 실제로 이러한 웹 페이지를 크롤링하고 특정 웹 페이지를 로드한 다음 그 결과를 콘솔에 출력합니다.

여기에도 보고가 있습니다. 따라서 기본적으로 생성하는 모든 모니터는 일부 SLA 보고를 받고 이에 대해 경고할 수도 있습니다.

그리고 우리는 요약 페이지에 있었습니다. 여기에서 잠시 다시 클릭하겠습니다. 그런 다음 모니터 섹션에 모든 결과가 표시됩니다. 따라서 이것은 검사 자체에 대한 모든 결과, 소비된 리소스 및 발생한 모든 오류를 보여줍니다.

그래서 이것을 클릭하면 지난 24시간 동안 100%의 성공률을 볼 수 있습니다. 제로 체크가 실패한 것을 볼 수 있습니다. 모든 것이 정상입니다. 위치별로 기간이 표시됩니다.

다시 한 번 CDN 요구 사항에 대해 이야기했습니다. 포틀랜드가 상당히 낮거나 그렇지는 않지만 다른 모든 것보다 약간 낮은 것을 볼 수 있습니다. 내 데이터 센터나 내 인프라가 미국 서부에 있다는 것을 알 수 있습니다.

전 세계적으로 일관된 성능을 원합니다. 그래서 다른 위치에 CDN을 배치했을 수도 있습니다. 그다지 큰 문제가 아니기 때문에 아닐 수도 있습니다. 그것을 결정하는 것은 기업에 달려 있습니다.

그런 다음 이러한 검사의 모든 다른 발생을 볼 수 있습니다. 위치별로 볼 수 있습니다. 기간별로 표시됩니다. 응답 크기별로 표시됩니다.

그런 다음 실패 메시지가 있는 경우 해당 메시지도 표시됩니다. 두 개의 실패만 필터링할 수도 있습니다. 우리는 이 기간 동안 아무것도 없었습니다. 우리가 흥미로운 것을 얻을 수 있는지 보자.

이 모니터 자체에는 오류가 없는 것 같습니다. 하지만 이 중 하나를 클릭하면 결과가 어떻게 보이는지 보여드리겠습니다. 다시 말하지만 이것은 여러 페이지에 걸친 합성 테스트입니다. 따라서 우리는 실제 사용자가 웹 사이트 내에서 수행하는 작업을 모방하고 있습니다.

흐름은 우리가 이 메인 페이지에 도달하는 것입니다. 이것은 그 페이지 안에서 일어나는 일입니다. 따라서 사용자 중심의 타이밍이 있습니다.

페이지에 로드된 다양한 유형의 항목을 모두 볼 수 있습니다. 그래서 우리는 바로 여기에 큰 이미지를 얻었습니다. 여기에 매우 큰 이미지가 있습니다. 이것은 실제로 이것을 표시하기 위해 의도적으로 이 작업을 수행한 것입니다.

하지만 여기에 이 ​​거대한 이미지가 있습니다. 이 telco.bids 이미지는 많은 시간을 차지합니다. 그래서 제가 말하고자 한다면, 보세요, 할 수 있는 몇 가지 최적화 기회가 있습니다. 개인적으로 이것이 제가 가장 먼저 집중하는 것은 그 거대한 이미지입니다.

흐름으로 돌아가서 기본 페이지에서 시작합니다. 로그인 페이지로 이동합니다. 여기에서 발생하는 모든 것, JavaScript 오류 또는 발생하는 모든 AJAX, 위의 모든 것을 볼 수 있습니다.

그런 다음 로그인하면 리디렉션됩니다. 그래서 우리는 그것에 대한 타임라인도 보고 있습니다. 멋진 폭포 보기입니다. 우리는 모든 페이지를 살펴보고 있습니다.

그래서 그들은 전화 페이지로 가서 전화를 검색합니다. 그들이 원하는 전화를 찾는 데 오랜 시간이 걸립니다. 괜찮아.

그들은 실제 전화를 찾습니다. 이것은 제품 데모 웹사이트의 실제 페이지이므로 특정 제품 페이지입니다. 그리고 여기에서 흥미로워지기 시작합니다. 당신은 이것을 들여다 볼 수 있고, 당신은 알 수 있습니다. 좋아요, 저는 이 페이지의 그들의 성과를 보고 싶습니다.

이 페이지를 로드하는 데 시간이 얼마나 걸리며 고객에게 다시 제공한 SLA를 준수할 수 있습니까? 그들은 계획을 찾기 위해 계획 페이지로 이동합니다. 그들은 계획을 결정합니다.

이제 그들은 전화를 찾고 있습니다. 그래서 우리는 고객이 원하는 전화기를 찾고, 원하는 요금제를 찾고, 모두 장바구니에 담는 전 과정을 거치고 있습니다. 그들은 장바구니에 담습니다.

여기에 오류가 있습니다. 따라서 오류가 있는 요청을 보고 싶다면 여기 HTML 요청이 있는 이 페이지가 있습니다. 이것은 오류로 유효한 요청입니다. 따라서 여기서는 전체 문제 해결 경로를 거치지 않겠습니다.

그러나 기본적으로 쿠폰 자체가 유효하지 않은 데모 환경에서 발생하도록 설정된 시나리오가 있으며 매번 오류가 발생합니다. 그리고 이것은 최적화되지 않은 백엔드 스크립트 또는 백엔드 코드 조각으로 거슬러 올라가며 데이터베이스에서 쿠폰을 업데이트하는 것을 잊었습니다. 따라서 여기에서 제어된 환경에서 어떤 오류가 발생하고 앱의 성능으로 어떻게 역추적되는지 확인할 수 있습니다.

그리고 체크아웃 과정을 거칩니다. 여기에서 모든 것이 얼마나 오래 걸리는지 알 수 있습니다. 그리고 마지막으로, 이것이 그들이 방문하는 마지막 페이지입니다. 이렇게 결제가 완료되었습니다.

그리고 여기에서 모든 것에 대한 타이밍을 어떻게 보는지 볼 수 있습니다. 여기에서 발생한 모든 것을 보여주는 스크립트 로그도 있습니다. 그래서 그들은 로그인 페이지를 방문하고, 로그인하고, 전화 요금제를 추가하고, 6개의 전화를 추가했습니다. 그들은 이 모든 것을 장바구니에 담았고, 그런 다음 장바구니 내용물을 구매했고, 그 후 장바구니는 비었습니다.

발생한 오류를 보여주는 브라우저 로그도 표시됩니다. 여기에 많은 구문 오류가 있습니다. 이것은 데모 환경입니다.

이제 리소스 서버 로드에 실패했고 상태 500으로 응답했습니다. 이것이 우리가 이야기한 쿠폰이 유효한 호출입니다.

그래서 내가 개발자라면 이 점에 유의할 것입니다. 내가 가장 먼저 보게 될 것은, 여기 500이 있고 쿠폰 페이지에 있는 것 같습니다. 그래서 그들은 중요한 것을 로드하려고 합니다. 여기에서 웹사이트 최적화 기회에 대해 이야기하기 시작합니다.

그리고 마지막으로 여기에 없습니다. 그러나 확인 자체가 실패하면 여기에 실패 스크린샷 섹션이 표시되며 실제로 실패한 페이지의 스크린샷, 예상한 내용 및 결과를 보여줍니다. 그래서 우리는 어딘가에 실제로 의도적으로 실패를 기록하는 데모 환경을 가지고 있으며 체크아웃(거기에 있어야 할 실제 체크아웃 버튼)이 없습니다. 그래서 발생하는 오류, 발생하는 모든 오류의 결과를 실제로 볼 수 있는 곳입니다. 그리고 기본적으로 테스트에서 찾도록 지시한 모든 중요한 오류 또는 구성 요소가 감지되지 않으면 전체 검사에 대해 실패를 발생시킵니다.

그러면 스크린샷이 표시됩니다. 그러면 해당 요약 페이지에서도 실패를 볼 수 있습니다. 다시 빨간색으로 점등되는 것을 볼 수 있습니다. 또한 실패한 위치, 실패한 위치, 해당 타임스탬프도 확인할 수 있습니다. 이것으로 오늘 테스트할 합성 체크아웃 워크플로우 테스트의 데모를 마칩니다.

JOSH DAILEY: 정말 고마워요, 데미안. 이것은 매우 통찰력이 있습니다. 그리고 저는 여러분이 보고 있는 개발자로서 또는 여러분 자신이 상점 주인이고 지금 보고 있는 여러분이 New Relic과 같은 것이 여러분의 작업 흐름에 추가할 수 있는 놀라운 가치를 보고 큰 골칫거리를 덜어주기를 바랍니다. 중단 및 진행 중인 다른 일이 있는 경우 중단되지만 성장과 함께 개선하는 데 도움이 됩니다.

애플리케이션 성능 모니터링 기능인 APM에 관심이 있고 사용하지 않는 경우 계정 관리자에게 문의하거나 당사 팀원에게 문의하고 바로 여기 WP에서 New Relic을 활용하는 방법을 알아보십시오. 엔진.

다시 한번 감사합니다, 데미안. 다들 감사 해요. 그리고 여기 DE{CODE}에서 남은 시간을 즐기시기 바랍니다.