WPM 데이터 읽기

(WPM, MPM의 데이터 읽는 방법은 거의 동일합니다. 2개의 솔루션 모두 사용하고 계시다면, MPM 데이터 읽기를 중심으로 확인해 주세요.) 웹사이트의 성능을 모니터링하여 성능 문제 여부를 파악하고 분석 우선 순위를 설정할 수 있는 방법을 안내합니다. 빈번하게 발생하는 성능 저하 현상에 대한 예시 그래프를 통해 쉽게 그래프를 해석해 보세요.

1. 성능 대시보드

WPM 대시보드에서는 웹사이트의 현재 성능 현황을 한눈에 확인할 수 있습니다. 다양한 성능 지표를 정확하게 이해하고 분석하는 방법을 확인하시고, 효율적으로 성능 관리를 진행해 보세요.* IMQA의 모든 데이터는 1분마다 갱신됩니다. (계약에 따라 상이할 수 있음)

1.1. 한눈에 파악하는 성능 현황

빠르게 최근 30분 동안의 성능 전반을 한눈에 확인해야할 때는 아래 3가지 항목을 먼저 확인해 보세요.

(1) 평균 문제 발생률

최근 30분 동안의 각 성능 지표(페이지 로딩시간, 응답시간, 크래시)의 기준치를 넘는 데이터 비율인 문제 발생률의 평균을 빠르게 확인할 수 있습니다. 숫자가 클수록 성능 문제가 발생하고 있다는 의미이므로 빠른 확인과 개선이 필요합니다.

각 성능 지표의 문제 발생률의 평균이기 때문에 수치가 낮더라도 성능 지표 중 1개에서 문제가 발생하고 있을 수 있습니다. 수치가 매우 낮은 경우가 아니라면, 반드시 상세 데이터를 확인해 주세요.

(2) 성능 날씨

최근 30분 동안의 평균 문제 발생률에 따라 5단계로 날씨 아이콘이 표시됩니다. 평균 값이기 때문에 맑음이어도 성능 저하로 불편함을 겪고 있는 사용자가 있을 수 있으므로 반드시 세부 데이터를 확인해 주세요.

(3) 성능 문제 발생률

최근 30분 동안의 크래시, 응답시간, 페이지 로딩시간의 3가지 성능 지표에서 문제 발생(설정한 기준치를 넘은 상황) 비율을 그래프를 통해 한번에 확인할 수 있습니다. 막대 그래프가 보이는 상태라면 성능 문제가 발생한 상황이니 빠른 확인과 개선이 필요합니다.

기준치는 ‘관리 > 프로젝트 프리셋’에서 설정할 수 있습니다. 운영 초기, 기준치 설정이 어렵다면 각 지표별로 안내해드리는 가이드를 참고하여 설정해 보세요. (툴팁에서 확인 가능)

1.2. 각 성능 지표별 성능 현황 확인

성능 모니터링에 꼭 필요한 페이지 로딩시간, 응답시간 및 크래시 발생 현황을 그래프로 확인할 수 있습니다. WPM에서 많이 볼 수 있는 그래프이므로 기본적인 데이터 이해 방법과 각 케이스를 알아두시면 데이터를 이해하시는데 용이합니다.

(1) 데이터 이해하기

시계열 그래프로 표시된 성능 지표 현황을 바르게 이해하기 위해선 아래 항목을 반드시 확인해 주세요. 아래 그래프는 가장 이상적인 형태의 그래프이니 그래프 형태와 각 항목에 대해 숙지해 보세요. 실시간 그래프 확인 시, 순차대로 아래 3개의 항목을 확인하시면 보다 정확하게 성능 현황을 파악하실 수 있습니다.

➊ 전체 평균과 하위 5%의 평균 2개의 그래프의 차이가 적으면 대부분의 사용자가 비슷한 성능을 경험했다고 판단할 수 있습니다. 특정 시간대에 차이가 클 경우, 특정 사용자가 성능 저하를 경험했다고 판단할 수 있습니다. ➋ 변동 추이 확인 변동 추이에 큰 변화가 없다면 최근 30분 내 동일한 현상이 지속되고 있음을 확인할 수 있습니다. ➌ 기준치 확인 붉은선은 각 성능 지표의 기준치를 나타냅니다. 만약 전체 평균과 하위 5%의 그래프가 차이가 없이 고른 상태라도 2개의 그래프가 붉은선을 넘는 경우라면 심각한 성능 문제가 발생한 것으로 빠른 해결이 필요합니다.

전체 평균과 하위 5%의 그래프가 차이가 없이 고르고 기준치를 넘지 않는 상태일 경우, Y표 지표를 확인해 주세요. 그래프가 0에 가까운 상태라면 성능이 좋다는 것을 의미하나, 숫자가 크다면 대다수의 사용자가 성능 저하를 겪고 있는 상황일 수 있습니다.

(2) Case Studty

① 일부 사용자의 성능 저하

가장 많이 확인할 수 있는 그래프로, 일부 사용자가 성능 저하 현상을 겪고 있는 상황입니다. 아래 예시 그래프의 분석 방법을 참고하여 현재 성능 현황을 파악해 보세요.

➊ 전체 평균과 하위 5%의 평균 확인 2개의 그래프의 차이가 비교적 적으나, 특정 구간(14:18)에서 하위 5%의 그래프가 높아진 것을 확인할 수 있습니다.

➋ 변동 추이 확인 전반적으로 큰 변화가 없으나, 특정 구간(14:18)에서 하위 5%의 그래프가 높아진 것을 확인할 수 있습니다.

➌ 기준치 확인 특정 구간(14:18)에서 기준치를 넘은 것을 확인할 수 있습니다.

하위 5%가 기준치를 넘는 문제를 겪고 있음을 확인할 수 있습니다. 이 경우 특정 사용자가 느린 로딩시간을 경험한 것으로, 해당 사용자/사용 환경을 대상으로 빠른 개선이 필요합니다.

② 전반적인 성능 저하

웹사이트가 안정적으로 운영되는 경우에는 쉽게 나타나지 않는 그래프이나, 해당 그래프는 매우 심각한 상황으로 빠른 개선이 필요하니, 반드시 숙지해 두세요.

➊ 전체 평균과 하위 5%의 평균 확인 2개의 그래프의 차이가 크지 않고, 변동 추이도 고른 것으로 보아 최근 30분 내 대부분의 사용자가 비슷한 로딩시간을 경험했다고 판단할 수 있습니다.

➋ 변동 추이 확인 그래프의 큰 변동은 없으나, 세로축 지표를 확인했을 때 전반적으로 로딩시간이 긴 상태입니다.

➌ 기준치 확인 전체 데이터가 기준치 이상인 상태로, 성능 문제가 발생한 상태입니다.

최근 30분 간 대부분의 사용자가 느린 로딩시간으로 불편함을 겪고 있다고 판단할 수 있습니다. 느린 로딩시간은 사용자 이탈의 주요 원인이 되므로 빠른 개선이 필요합니다.

위 그래프와 유사한 형태에서 그래프가 기준치를 넘지 않더라도 기준치 근처에 위치해 있다면 사용자 대다수가 느린 로딩시간을 겪고 있음을 의미하므로 빠른 확인이 필요합니다.

③ 데이터 미수집

웹사이트 성능 외에도 장애 및 데이터 수집 현황을 함께 확인해야 하는 경우입니다.

➊ 전체 평균과 하위 5%의 평균 확인 2개의 그래프의 차이가 크지 않고, 변동 추이도 고른 것으로 보아 대부분의 사용자가 비슷한 성능을 경험했다고 판단할 수 있습니다.

➋ 변동 추이 확인 - 특정 구간(11:10~11:15)의 데이터가 ‘0’으로 표기되므로 확인이 필요합니다. - 전반적으로 데이터 폭의 차이가 크므로 확인이 필요합니다.

➌ 기준치 확인 전체 데이터가 기준치 이상인 상태로, 성능 문제가 발생한 상태입니다.

위 그래프는 아래 3가지 상황에서 나타날 수 있는 그래프입니다.

1. 웹사이트의 성능이 고르지 못한 상황이라고 판단할 수 있습니다. 2. 특정 구간에서 장애로 인해 데이터가 수집되지 않은 것일 수 있습니다. 3. 실제 사용자가 없어 수집된 데이터가 없는 상황일 수 있습니다.

장애로 인해 데이터가 수집되지 않는 경우 빠른 개선이 필요합니다.

1.3. 핵심 웹 바이탈

최근 30분간 핵심 웹 바이탈 성능 지표인 LCP, FID, CLS의 ➊평균과 ➋최댓값을 확인할 수 있습니다. 또한 Google 기준치에 따른 색상으로 표시합니다. 각 지표별 성능 현황을 확인하여 개선이 필요한 항목을 파악해 보세요.

각 지표별 설명

각 지표별 Google 권고 평가 구간

1.4. 페이지별 성능 현황 확인

페이지별 로딩시간, 응답시간의 현황을 숫자와 색상을 통해 한눈에 파악할 수 있습니다.

(1) 요약 정보

최근 30분 동안의 사용자가 방문한 페이지별 성능 현황을 리스트로 한번에 확인할 수 있습니다.

방문율순, 문제 발생률순, 하위 5%순, 평균순으로 정렬된 화면에 어떤 성능 저하가 있었는지 한눈에 확인할 수 있습니다. 색상과 숫자로 설정한 기준치 이상의 데이터 비율과 위험도는 ‘관리 > 프로젝트 프리셋’에서 설정하실 수 있습니다.

[프로젝트 프리셋 설정 방법 보기]

(2) 화면 카드

최근 30분 동안의 사용자가 방문한 페이지를 방문율순, 문제발생률순, 하위 5%순, 평균순으로 정렬하여 확인할 수 있습니다. 기본적으로 방문율이 높은 순으로 정렬되며 화면 카드 클릭 시 ‘페이지별 성능 분석’ 페이지로 이동합니다.

화면 카드 이름은 이해하기 쉽도록 IMQA에서 표시할 이름으로 변경 가능하며, 노출/숨김 설정도 가능합니다. ‘관리 > 화면 관리’에서 변경하실 수 있습니다.

[화면 관리 설정 방법 보기]

특정 몇 개의 화면 카드만 ‘보기' 설정을 했을 경우, 실제 사용자가 방문한 페이지에서 발생하는 성능 저하 문제를 대시보드에서 파악하기 어려우니, 유의해 주세요.

(3) Case - 성능 분석 우선순위 파악

성능 대시보드 내 화면 카드는 방문율 순으로 정렬되며, 설정한 기준치를 초과한 비율을 색상과 숫자로 확인할 수 있습니다. 수많은 화면 카드 중 어떤 페이지부터 성능 확인 및 분석이 필요한지 빠른 판단이 필요합니다. 아래와 같은 기준에 따라 우선순위를 정하고, ‘페이지별 성능 분석’에서 자세히 확인해 보세요.

방문율 순으로 정렬된 위 이미지에서 표시된 2개의 화면 카드 중, 어떤 화면부터 확인해야 할까요?

➋번 페이지가 문제 발생률은 훨씬 높지만 방문율 순으로 정렬되어 있으므로 ➊번 페이지에 비해 이용자가 적게 방문한 페이지임을 알 수 있습니다. 반면 ➊번 페이지의 경우, ➋번 페이지에 비해 문제 발생률은 낮지만, 방문율이 23%로, 1%인 ➋번 페이지에 비해 더 많은 사용자가 방문하여 성능 문제를 겪고 있을 수 있습니다.

따라서 방문율 순으로 페이지를 분석할 경우, 문제 발생률이 비슷하다면 좌측 상단에 가까운 페이지부터 확인하는 것이 좋습니다. 문제발생률, 하위 5%, 평균 순으로 정렬하여 분석할 때도 방문율을 함께 고려하여 우선순위를 정해 보세요.

2. 페이지별 성능 분석

선택한 페이지별 성능 현황을 30분 단위로 상세하게 확인할 수 있습니다. 페이지 성능 정보와 각 성능 지표에 대한 히트맵을 통해 성능 분포 및 저하 상황을 확인하실 수 있습니다.

2.1. 시간대별 데이터 수

각 시간대별 집계된 데이터 수에 따라 타임라인의 색상 농도가 4단계로 표시됩니다. 색상을 통해 30분 단위로 구분된 시간대별 데이터 수를 확인해 보세요. 색상에 따른 데이터 수는 우측의 툴팁으로도 확인하실 수 있습니다.

2.2. 페이지 성능 정보

좌측 상단의 페이지 성능 정보에서는 현재 페이지에서 어떤 성능 저하가 있었는지 한눈에 확인할 수 있습니다.

위의 페이지 로딩시간과 같이 평균과 하위 5%의 값이 큰 차이가 있는 경우 성능이 고르지 못하고, 편차가 심한 상태입니다. 특히 값이 클수록 성능 저하를 겪고 있는 상황이니 우선적으로 확인해야 합니다.

만약 응답시간처럼 평균과 하위 5% 값이 큰 차이가 있으나, 전반적으로 값이 작을 경우에는 성능이 좋은 상태임을 알 수 있습니다.

2.3. 성능 분포와 성능 저하 상황 확인

페이지 성능 정보를 통해 우선적으로 확인이 필요한 성능 지표를 확인하였다면, 이제 우측에서 각 성능 지표에 대한 히트맵을 통해 성능 분포와 성능 저하 상황을 상세히 확인, 분석할 수 있습니다.

(1) 히트맵 구성

WPM 내 히트맵 구성은 동일합니다. 페이지 로딩시간과 응답시간의 범례, 색상이 다르므로 처음 데이터를 확인하신다면 범례를 꼭 확인해 주세요.

➊ 범례 페이지 로딩시간은 기준치 이상 구간일 경우 빨강, 미만일 경우 파랑으로 표시됩니다. 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다. 응답시간의 경우, 수집된 정보에서 4xx대, 5xx대 응답코드인 경우에는 빨강, 그 외 응답 경우에는 파랑으로 표시되며, 동일하게 색상 농도를 4단계로 표시합니다. 색상 농도는 상대적 데이터(비율)이기 때문에 해당 시간에 전체 데이터가 많다면 색상이 흐려도 데이터가 많을 수 있습니다. 해당 내용은 아례 예시를 통해 상세히 확인하실 수 있습니다.

➋ 상세 정보 셀에 마우스 포인터를 올리면 ‘날짜, 시간, 데이터 수, 성능 구간’이 툴팁으로 표시됩니다. 확인이 필요한 셀을 클릭하거나 드래그하여 해당 부분에 대한 ‘페이지 로딩시간 상세’, ‘응답시간 상세’ 데이터를 확인할 수 있습니다.

(2) 히트맵 데이터 이해하기

히트맵으로 표시된 성능 지표를 바르게 이해하고, 데이터 확인, 분석 우선 순위를 정하기 위해선 아래 항목을 숙지해 보세요. 아래 항목과 관련된 예시 상황도 이어서 안내해 드리니, 함께 확인해 보세요.

➊ 기준치 이상 데이터 확인 기준치 이상의 데이터는 빨강색으로 표기되기 때문에 직관적으로 확인하실 수 있습니다. 여기서 4단계로 구분되는 농도는 위험도가 아닌 같은 시간 내 데이터 수로 구분됩니다. 위의 경우 ⓐ는 기준치를 많이 초과하였으나, 같은 시간대 내에서 데이터는 적은 편입니다. ⓑ는 기준치를 많이 초과하지 않았으나, 같은 시간대 네에서 데이터가 많은 상태입니다.

➋ 데이터 수 확인 세로축값이 비슷한 상황이라면 마우스 오버하여 데이터 수를 확인해 주세요. ➊번 항목에서 확인했다시피, 같은 시간축 내 데이터를 기준으로 농도를 구분하기 때문에 농도가 흐려도 데이터 수가 많을 수 있습니다.

히트맵에서 개별 성능만 확인하는 것이 아닌 페이지 로딩시간-응답시간을 연계하여 함께 분석해 보세요. 페이지 로딩시간이 길어지는 현상은 응답시간 같은 다른 성능 지표가 원인일 가능성이 있으니 같이 확인하는 것이 좋습니다.

(3) Case Study

① 응답시간이 긴 경우

응답시간은 4xx, 5xx 상태 코드 외 응답 코드일 경우 파랑색으로 표시됩니다. 히트맵 전체가 파랑색으로 표기되어 4xx, 5xx 대 상태 코드가 없는 것을 확인하였습니다. 전반적으로 문제가 없어 보이지만 세로축을 확인했을 때, 응답시간이 긴 부분을 확인할 수 있습니다. 이 경우, 상세 확인을 하여 문제의 원인을 파악해야 합니다.

② 특정 시간대의 문제 발생

위의 이미지와 같은 히트맵의 경우, 특정 시간대(11:25)에 전반적으로 문제가 발생한 것을 확인할 수 있습니다. 이 경우 해당 시간대에 서버, 통신사 문제 등 외부적 요인이 있을 가능성이 있으므로 응답시간 히트맵을 같이 확인하는 것이 좋습니다. 또한 해당 시간대 전체의 상세 정보를 확인하여 특정 고객만의 문제가 아닌, 해당 시간대의 이용 고객들의 문제인지 확인이 필요합니다.

3. 성능 상세 분석

앞의 성능 히트맵에서 셀을 클릭하거나 구간을 마우스 드래그하면 항목에 따라 '페이지 로딩시간 분석', '상세 응답 분석'을 확인할 수 있습니다. 성능 프로파일링(페이지 로딩시간), 요청 상세(응답시간)를 확인하기 전 아래 항목을 먼저 확인해 보세요.

3.1. 디바이스 정보 리스트

페이지, 디바이스(Desktop, Mobile), OS, 디바이스/버전, 로딩시간, 사용자 수에 대한 정보를 먼저 확인해 보세요. 특정 OS, 브라우저/버전이 동일하다면 해당 문제 일 수 있으니 우선 확인하는 것이 좋습니다. 확인이 필요한 디바이스를 선택하시면 하단에서 성능 프로파일링/요청 상세를 확인할 수 있습니다.

3.2. 사용자 행동 분석(역추적 행동 분석)

성능 저하 문제가 발생한 화면은 어느 경로로 이동했는지에 따라 문제 상황이 다를 수 있습니다. 디바이스 정보 리스트에서 디바이스 선택 후, ‘사용자 행동분석’ 버튼을 클릭하면 해당 디바이스 사용자의 세션 시작부터 종료까지의 이용 흐름을 ‘행동분석’ 페이지에서 확인하실 수 있습니다. 페이지 이동 시, 문제가 발생한 화면과 다음 화면이 표시되어 빠르게 확인할 수 있습니다. 해당 기능을 통해 문제 화면 전후를 포함한 이동 경로를 빠르게 확인하실 수 있습니다. 페이지명 클릭 시, 해당 페이지에 대한 성능 데이터를 확인할 수 있으며, 항목 클릭 시 상세 데이터 확인이 가능합니다.

4. 구간 분석

앞서 실시간 모니터링에서 현재 시점에서 화면 단위로 모니터링했다면, 특정 시간대의 전체 데이터는 ‘통계 > 구간 분석’을 통해 확인할 수 있습니다. 시각화된 데이터가 많아 다소 복잡해 보일 수 있으나, 실시간 모니터링에서 살펴본 그래프로 구성되어 있어 쉽게 데이터를 읽고 이해할 수 있습니다.

4.1. 시간대별 데이터 수

구간 분석 화면 상단에서 날짜, 시간(30분 단위)를 변경하여 상세 데이터를 확인할 수 있습니다. 각 시간대별 집계된 데이터 수의 따라 타임라인 색상 농도가 4단계로 구분되어 표시됩니다. 평소와 달리 특정 시간대에 사용자가 많다면 해당 시간대를 가장 먼저 확인해 보세요.

4.2. 성능 분포 그래프

구간 분석의 성능 분포 그래프는 50%, 95%를 기준으로 나누어진 3개의 구간을 선택하여 사용자 환경 정보와 함께 상세 데이터를 확인할 수 있습니다.

(1) 히스토그램 그래프 구성

➊ 성능 지표 지표 변경 시 성능 분포 그래프, 사용자 정보 갱신

➋ 50% 기준선 성능 평균 기준선으로 0에 가까울수록 좋은 성능을 의미

➌ 95% 기준선 성능 하위 5% 기준선으로 전체 데이터 분포의 하위 5%가 시작되는 지점. 0에 가까울수록 좋은 성능을 의미 ➍➎➏ 구간 1~3 전체 데이터 분포의 0~50% 미만, 50% 이상 ~ 95% 미만, 95% 이상 구간으로 클릭 시 상세 정보 확인 가능

(2) Case Study

➊ 가장 이상적인 상황

위의 그래프의 경우, 가장 이상적인 상황의 그래프입니다. 50%, 95% 기준선이 0에 가까우며, 대부분의 데이터가 0~100ms에 위치해 있는 것을 알 수 있습니다. 페이지 로딩시간의 경우 100ms 이내를 목표로 관리하는 것을 권고하므로 안정적으로 운영 중임을 알 수 있습니다.

막대의 길이는 데이터 수를 나타내는 것으로 데이터 수가 적으면 상대적으로 막대 길이가 짧아서 잘 보이지 않을 수 있습니다. 따라서 95% 이상 구간은 막대가 잘 보이지 않더라도 반드시 확인해야 합니다.

➋ 앱 성능이 고르지 못한 현상

위의 그래프의 경우, 데이터가 0 ~ 5,000ms 전체에 분산된 상태입니다. 이 경우, 웹사이트가 모든 사용자 환경에 최적화되지 않은 상태로 성능 최적화가 필요합니다.

(3) 사용자 정보

선택한 날짜와 시간대에 대한 전체 사용자 환경 데이터를 확인할 수 있으며, 위의 그래프에서 특정 구간 선택 시, 해당 구간에 대한 정보를 확인할 수 있습니다.

특정 페이지, OS, 브라우저의 데이터가 많을 경우 해당 부분의 확인이 필요합니다. 히트맵에서 성능 저하 구간을 선택하여 디바이스 리스트를 확인하기 전, 하위 5% 구간의 전체 사용자 정보를 먼저 확인해 보세요.

5. 성능 분석

성능 분석에서는 현재 이용자 수 & 실행 수, 페이지 로딩시간, 응답시간을 시계열 그래프로 확인할 수 있습니다. 30분, 1시간, 3시간, 12시간, 1일 단위로 선택하여 성능 현황을 한눈에 확인할 수 있습니다. 시계열 그래프를 바르게 읽는 방법은 ‘1. 성능 대시보드 > 1.2. 각 성능 지표별 성능 현황 확인'을 참고해 주세요.

(1) Case Study - 주의 사항

같은 데이터라고 해도 30분, 1일(24시간) 등 선택한 시간(산출 구간)에 따라 가로축의 간격과 세로축의 최댓값이 달라져 그래프 형태가 다르게 보일 수 있으므로 유의해야 합니다.

최근 30분 페이지 로딩시간 그래프에서 로딩 시간이 가장 길었던 데이터는 2,775ms입니다. 최근 1일 데이터에서 로딩시간이 가장 긴 데이터는 9,245ms입니다. 상대적으로 훨씬 긴 화면로딩 시간이 걸린 부분이 있어, 세로축의 최댓값이 달라졌습니다. 이에 30분에서 가장 문제가 있는 것으로 보이는 구간이 1일 데이터에서는 큰 문제가 없는 것처럼 보일 수 있습니다. 따라서 그래프 형태뿐만 아니라 세로축의 값과 붉은색으로 표시되는 기준치도 함께 확인해야 합니다.

또한 최근 30분의 경우, 30분 동안의 성능이 1분 간격으로 표시되며, 1일의 경우 24시간 동안의 성능이 10분 간격으로 표시됩니다. 따라서 1일 데이터의 경우 30분 대비 간격이 매우 좁아지기 때문에 그래프가 더 가파르게 보일 수 있습니다.