UniApp 미니프로그램 JavaScript SDK 성능 문제 분석¶
이 문서에서는 @cloudcare/rum-uniapp 2.2.21 이상 버전에서 수집하는 페이지 성능 필드와 이를 바탕으로 최초 렌더링 지연, 페이지 종료 전 미렌딩 등 화이트 스크린 후보 문제를 식별하는 방법을 설명합니다.
이 문서는 UniApp 미니프로그램 JavaScript SDK에 적용되며,
GCUniPlugin-*네이티브 모듈에는 적용되지 않습니다. 모든 시간 필드는 Guance에 보고된 후 나노초(ns)로 변환됩니다.
수집 범위¶
SDK는 다음 성능 신호를 수집할 수 있습니다:
- 페이지 로드,
onReady, 최초 렌더링, FP, FCP 및 LCP - 페이지 종료 전
onReady또는 플랫폼 최초 렌더링 신호 트리거 여부 setData횟수, 누적 시간, 최대 시간, 대기 시간, 업데이트 시간 및 병합 횟수- 시작 시도, 네이티브 시작, 스크립트 실행 및 코드 패키지 다운로드
- 느린 페이지와 연관된 Resource 및 Error 데이터
SDK는 스크린샷을 수집하지 않으며, 비즈니스 스켈레톤 화면 이후의 핵심 콘텐츠 사용 가능 여부도 판단할 수 없습니다. 따라서 특정 성능 필드가 누락되었다고 해서 바로 화이트 스크린으로 간주할 수 없습니다.
플랫폼 성능 데이터¶
SDK는 우선적으로 미니프로그램 플랫폼에서 제공하는 Performance API를 사용합니다. Observer가 성공적으로 구독되면 performance_supported=true가 됩니다. 플랫폼이 동시에 사용 가능한 최초 렌더링 신호를 제공하는 경우 first_render_supported=true가 됩니다.
WeChat 및 호환 플랫폼¶
WeChat 형식의 entry는 다음 지표에 직접 매핑됩니다:
| Performance entry | RUM 필드 |
|---|---|
navigation.duration |
loading_time |
render:firstRender.duration |
first_render_time |
render:firstPaint.startTime - navigationStart |
page_fp |
render:firstContentfulPaint.startTime - navigationStart |
page_fcp |
render:largestContentfulPaint.startTime - navigationStart |
page_lcp |
콜드 스타트의 appLaunch와 일반 route navigation 모두 첫 화면 페이지의 신원을 설정할 수 있습니다. SDK는 route, pageId 및 최신 navigationStart를 기준으로 현재 페이지 인스턴스를 선택합니다. paint가 navigation보다 먼저 도착하는 경우 임시 저장하여 entry의 절대 startTime이 시간으로 잘못 해석되는 것을 방지합니다.
TikTok 미니프로그램¶
TikTok은 paint, evaluate, navigation, resource 및 launch entry를 사용합니다. SDK는 이를 먼저 통일된 기준으로 변환합니다:
| TikTok entry | 통일된 기준 |
|---|---|
paint:first-paint |
page_fp, first_render_time |
paint:first-contentful-paint |
page_fcp |
paint:largest-contentful-paint |
page_lcp |
evaluate:app-service |
action_type=script_insert |
resource:miniprogram-package |
action_type=package_download |
TikTok에는 WeChat의 firstRender entry가 없으므로, SDK는 현재 페이지의 first-paint - navigationStart를 해당 플랫폼의 최초 렌더링 신호로 사용합니다. 이 기준은 FCP 또는 비즈니스 콘텐츠 사용 가능과 동일하지 않습니다.
View 성능 필드¶
기능 및 수명 주기 속성¶
| 필드 | 유형 | 설명 |
|---|---|---|
performance_supported |
boolean | 현재 플랫폼의 Performance Observer가 성공적으로 구독되었는지 여부 |
first_render_supported |
boolean | 현재 플랫폼에 SDK에서 사용 가능한 최초 렌더링 신호가 있는지 여부 |
view_start_reason |
string | page_load, page_show 또는 session_renewal |
view_end_reason |
string | onHide, onUnload 또는 session_renewal |
ready_reached |
boolean | 현재 페이지의 수명 주기가 onReady에 도달했는지 여부 |
first_render_reached |
boolean | 현재 페이지가 플랫폼 최초 렌더링 신호를 수신했는지 여부 |
ended_before_ready |
boolean | page_load View 종료 시 onReady에 아직 도달하지 않았는지 여부 |
ended_before_render |
boolean | 최초 렌더링 신호가 지원되는 경우, page_load View가 최초 렌더링 전에 종료되었는지 여부 |
view_is_active |
boolean | View가 여전히 활성 상태인지 여부 |
ended_before_render는 first_render_supported=true인 경우에만 통계적으로 의미가 있습니다. 세션 갱신은 RUM View만 분할할 뿐 페이지 다시 로드를 의미하지 않으므로, 페이지 조기 종료 결론이 생성되지 않습니다.
렌더링 시간¶
| 필드 | 설명 |
|---|---|
loading_time |
페이지 navigation과 수명 주기에서 관찰된 최대 로드 시간 |
page_ready_time |
View 시작부터 onReady까지의 시간 |
first_render_time |
WeChat: firstRender.duration; TikTok: first-paint - navigationStart |
page_fp |
현재 페이지의 navigationStart 기준 FP 시간 |
page_fcp |
현재 페이지의 navigationStart 기준 FCP 시간 |
page_lcp |
현재 페이지의 가장 최근 LCP 기준 navigationStart 시간 |
first_render_data_transfer_time |
최초 렌더링 초기화 데이터 수신 시간에서 전송 시간을 뺀 값 |
first_render_wait_time |
데이터 수신 완료부터 뷰 레이어 렌더링 시작까지의 대기 시간 |
first_render_view_layer_time |
뷰 레이어 최초 렌더링 시간 |
first_paint_time과 first_render_time은 호환 필드로, 모두 SDK가 선택한 최초 렌더링 신호를 나타냅니다. 실제 FP를 분석해야 하는 경우 page_fp를 사용하세요.
setData 시간¶
| 필드 | 설명 |
|---|---|
view_setdata_count |
유효한 setData 업데이트 샘플 수 |
view_setdata_duration |
모든 유효한 업데이트의 누적 시간 |
view_setdata_max_duration |
단일 업데이트의 최대 시간 |
view_setdata_pending_duration |
큐 진입부터 업데이트 시작까지의 누적 대기 시간 |
view_setdata_update_duration |
업데이트 시작부터 종료까지의 누적 실행 시간 |
view_setdata_merged_count |
플랫폼에 의해 병합 처리된 업데이트 횟수 |
SDK는 리스너 설치 시 소속 페이지를 기록합니다. 숨겨진 페이지나 이전 컴포넌트의 지연된 콜백은 현재 View에 포함되지 않으며, 페이지 언로드 또는 컴포넌트 분리 후에는 리스닝이 중지됩니다.
시작 단계 지표¶
시작 단계는 action 데이터로 보고됩니다:
action_type |
설명 |
|---|---|
launch_attempt |
최초 App.onLaunch 도달, SDK 인스턴스당 한 번; duration을 쓰지 않으며, app_launch_attempt=true를 유효한 field로 사용 |
launch |
플랫폼 appLaunch navigation duration |
script_insert |
스크립트 실행 시간 |
package_download |
미니프로그램 코드 패키지 다운로드 시간 |
마지막 세 항목은 플랫폼 Performance entry에 의존합니다. launch / launch_attempt 비율을 사용하여 네이티브 시작 지표의 커버리지를 관찰하는 것이 좋으며, entry가 없다고 해서 시간이 0이라고 간주하지 마세요.
화이트 스크린 후보 통계¶
화이트 스크린 분석은 커버리지, 느린 렌더링 및 조기 종료의 세 가지 범주로 나누는 것이 좋습니다.
통계 샘플¶
먼저 필터링:
최초 렌더링 신호를 지원하지 않는 플랫폼은 별도로 커버리지를 통계하고, ended_before_render 분모에 포함시키지 마세요.
권장 기준¶
| 문제 | 권장 조건 | 설명 |
|---|---|---|
| 느린 최초 렌더링 | first_render_time이 비즈니스 임계값보다 큼 |
P75, P95 및 임계값 초과 비율 통계에 적합 |
| 종료 전 최초 렌더링 없음 | ended_before_render=true |
신뢰도가 높은 화이트 스크린 후보이나, 사용자의 빠른 뒤로 가기도 해당될 수 있음 |
| 장시간 미 Ready | page_ready_time이 임계값보다 큼 |
페이지 수명 주기 또는 초기화 차단을 반영하나, 시각적 화이트 스크린과 동일하지 않음 |
| 종료 전 미 Ready | ended_before_ready=true |
view_end_reason 및 체류 시간과 결합하여 빠른 이탈을 배제해야 함 |
| FCP/LCP 느림 | page_fcp 또는 page_lcp가 임계값보다 큼 |
콘텐츠 표시 및 주요 콘텐츠 안정 시간에 더 가까움 |
권장 대시보드에는 최소한 다음이 포함되어야 합니다:
- Performance 및 최초 렌더링 신호 커버리지
- FP, FCP, LCP, firstRender의 P50, P75, P95
ended_before_render,ended_before_ready비율- 느린 View의 Error, 실패 Resource,
5xx및 TTFB 분포 - 애플리케이션 버전, 플랫폼, OS 및 디바이스 모델별로 분류된 추세
알려진 경계 사항¶
- SDK에는 비즈니스
markViewReady()API가 없으므로, 핵심 비즈니스 콘텐츠가 이미 사용 가능한지 확인할 수 없습니다 - Page
onLoad이전에 발생하는 치명적 오류에는 View Context가 없을 수 있습니다 - 현재 Long Task, FPS, 페이지 프리즈 및 스크린샷을 수집하지 않습니다
- 플랫폼 Performance API, 기본 라이브러리 및 OS 버전 차이가 필드 커버리지에 영향을 미칠 수 있습니다
- 데이터 전송 실패 시 재시도 또는 로컬 지속성이 없으면, 약한 네트워크 환경에서 문제 비율이 과소평가될 수 있습니다