실적을 개선하려면 무엇을 측정해야 하나요?

구매 유입경로의 각 단계에서 실적을 측정하기 위한 전략

구매 유입경로의 여러 단계는 다양한 방식으로 실적 문제가 발생하기 쉬우므로 다른 측정과 최적화가 필요합니다.

이 가이드에서는 다양한 단계를 측정하는 방법을 설명합니다. 이를 위해 실습 데이터와 필드 데이터를 살펴보는 것이 좋습니다.

실험실 데이터는 Lighthouse 및 기타 도구를 사용하여 로컬에서 테스트를 실행하여 수집됩니다. 이를 통해 통제된 안정적인 환경을 통해 시간 경과에 따른 웹사이트 성능을 경쟁업체와 비교할 수 있지만 실제 사용자의 성능 경험을 대표하지 않을 수 있습니다.

필드 데이터는 실제 사용자의 분석을 통해 수집되므로 사용자의 경험을 나타냅니다. 그러나 시간이 지남에 따라 또는 경쟁업체와 쉽게 비교할 수는 없습니다. 네트워크 연결과 스마트폰 하드웨어는 시간이 지남에 따라 진화하고 서로 다른 타겟층에 다른 기기가 있을 수 있으므로 필드 데이터와 비교하기는 어렵습니다. 현장에서 성능 측정도 참고하세요.

완전한 그림을 얻으려면 두 데이터 소스가 모두 필요합니다. 다음 섹션에서는 유입경로 전반에서 다양한 관련 성과 표시에 대한 실험실 및 필드 데이터를 수집하는 방법을 보여줍니다.

디스커버리

탐색 최적화는 신규 사용자에게 제공되는 첫 번째 로드뿐 아니라 검색 및 소셜 크롤러에도 최적화하는 것을 의미합니다. 최초 로드의 실험실 데이터는 Lighthouse를 통해 쉽게 획득할 수 있으며, 필드 데이터 (최소 Chrome의 경우)는 Chrome UX 보고서를 통해 쉽게 사용할 수 있습니다. PageSpeed Insights에서 두 가지를 편리하게 조합하여 찾을 수 있습니다. 또한 현장에서 관련 측정항목을 직접 추적해야 합니다. 실제 사용자 기기에서 이러한 측정항목을 측정하면 유용한 개요를 파악할 수 있습니다.

사용자의 관점에서 가장 중요한 측정항목은 다음과 같습니다.

• 콘텐츠가 포함된 첫 페인트 (FCP): 사용자가 빈 화면을 응시하는 시간입니다. 이 시점은 대부분의 사용자가 이탈하는 시점이며 진행 상황이 표시되지 않기 때문입니다.
• 첫 번째 의미 있는 페인트 (FMP): 사용자가 자신이 원하는 기본 콘텐츠를 보기 시작할 때. 이는 대부분의 경우 히어로 이미지이지만, 방문 페이지의 경우 구매 버튼과 같은 클릭 유도 문구가 될 수도 있습니다. 이는 사용자가 타겟팅된 광고 캠페인 등을 통해 명확한 의도를 가지고 도착했을 수 있기 때문입니다.
• 최초 입력 반응 시간 (FID): 웹사이트가 사용자의 첫 입력에 반응해야 하는 시간입니다. 과도한 자바스크립트 및 기타 애셋 로드 문제가 있으면 탭 또는 클릭 실패, 잘못된 입력, 페이지 이탈이 발생할 수 있습니다.

더 많은 측정항목을 살펴볼 수 있지만 좋은 기준입니다. 또한 이탈률, 전환수, 사용자 참여를 파악하여 이를 적절하게 설정할 수 있도록 해야 합니다.

참여 및 전환

방문 페이지를 처음 로드한 후 사용자는 사이트를 계속 진행하여 전환에 성공할 수 있기를 바랍니다.

이 단계에서는 빠르고 반응성이 뛰어난 탐색과 상호작용을 갖추는 것이 중요합니다. 안타깝게도 사용자마다 페이지에서 서로 다른 경로를 사용하므로 필드에서 탐색 및 상호작용 이벤트의 전체 흐름을 측정하는 것은 간단한 일이 아닙니다. 따라서 실험실 테스트에서 흐름을 스크립팅 및 측정하여 전환 또는 전환 하위 목표 ('작업 소요 시간')에 필요한 시간을 측정하여 시간 경과에 따른 성능 또는 경쟁업체와 비교하는 것이 좋습니다.

다음과 같은 두 가지 편리한 방법이 있습니다.

WebPageTest

WebPageTest는 매우 유연한 스크립팅 솔루션을 제공합니다. 기본 아이디어는 다음과 같습니다.

• navigate 명령어를 사용하여 흐름의 페이지를 탐색하도록 WebPageTest에 지시합니다.
• 필요한 경우 clickAndWait 명령어를 통해 버튼 클릭을 스크립트로 작성하고 setValue를 통해 텍스트 필드를 채웁니다. 단일 페이지 애플리케이션을 테스트하려면 navigate가 가벼운 가상 페이지 로드 대신 전체 로드를 실행하기 때문에 첫 번째 단계의 모든 단계에서 navigate 명령어 대신 clickAndWait를 사용합니다.
• combineSteps를 통해 분석에서 흐름의 여러 단계를 결합하여 전체 흐름에 관한 단일 전체 결과 보고서를 생성해야 합니다.

이러한 스크립트는 다음과 같습니다.

combineSteps
navigate    https://www.store.google.com/landingpage
navigate    https://www.store.google.com/productpage
clickAndWait    innerText=Buy Now
navigate    https://www.store.google.com/basket
navigate    https://www.store.google.com/checkout

이와 같은 스크립트를 사용하면 시간 경과에 따른 성능을 쉽게 측정하고 비교할 수 있습니다. WebPageTest API를 통해 자동화할 수도 있습니다.

인형 조종자

테스트를 스크립팅하는 또 다른 좋은 옵션은 Node API Puppeteer를 통해 제어할 수 있는 헤드리스 Chrome을 사용하는 것입니다. 일반적인 개념은 Puppeteer를 통해 브라우저를 시작하고, goto 함수를 통해 방문 페이지로 이동하고, 자바스크립트를 삽입하여 필드를 채우거나 클릭 버튼을 클릭한 다음 필요에 따라 추가 goto 호출을 통해 유입경로를 진행하는 것입니다.

흐름 기간은 측정항목으로 직접 측정할 수 있지만 흐름의 개별 로드에 대한 FCP, FMP, TTI 값을 합산할 수도 있습니다. Puppeteer를 사용하여 웹사이트 성능 테스트에서는 Puppeteer를 통해 성능 측정항목을 가져오는 방법에 대한 개요를 제공합니다. 아주 간단한 노드 스크립트 예시는 다음과 같습니다.

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const start = performance.now();
  await page.goto('https://www.store.google.com/landingpage');
  await page.goto('https://www.store.google.com/productpage');
  // click the buy button, which triggers overlay basket
  await page.click('#buy_btn');
  // wait until basket overlay is shown
  await page.waitFor('#close_btn');
  await page.goto('https://www.store.google.com/basket');
  await page.goto('https://www.store.google.com/checkout');
  console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds');
  await browser.close();
})();

이 스크립트는 쉽게 자동화할 수 있으며 빌드 프로세스나 성능 예산에 포함할 수도 있으며 정기적으로 모니터링할 수도 있습니다.

재참여 유도

사용자가 내 사이트를 다시 방문하는 간격이 달라짐 경과된 시간에 따라 브라우저에서 캐시된 웹사이트의 리소스가 적어서 더 많은 네트워크 요청이 필요할 수 있습니다. 따라서 실험실 테스트에서 재방문 시의 성능 차이를 예측하기가 어렵습니다. 그래도 이를 지켜보는 것이 좋으며, 재방문을 위한 훌륭한 실험실 테스트 도구는 직접 재방문을 위한 전용 옵션이 있는 WebPageTest입니다.

필드에서 재방문 실적을 더 정확하게 파악하려면 선택한 애널리틱스 패키지를 사용하여 실적 측정항목을 사용자 유형별로 분류합니다. 다음은 Google 애널리틱스에서 이러한 보고서를 보여주는 예입니다.

이 보고서를 통해 신규 사용자와 재사용자의 페이지 로드 시간도 알 수 있습니다.

요약

이 가이드에서는 현장 및 실험실 테스트를 통해 최초 부하, 흐름, 반복 부하를 측정하는 방법을 설명했습니다. 유입경로의 여러 단계를 그에 따라 최적화하여 발견 (첫 번째 로드), 참여 (탐색 및 흐름), 재참여 (반복 로드)를 극대화하세요.