콘텐츠로 이동

미니프로그램 성능 문제 분석

이 문서에서는 @cloudcare/rum-miniapp 2.2.18 이상 버전에서 수집하는 페이지 성능 필드와 이를 통해 최초 렌더링 지연, 페이지 종료 전 미렌더링 등 화이트 스크린 후보 문제를 식별하는 방법을 설명합니다. 모든 시간 소요 필드는 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, resourcelaunch 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_renderfirst_render_supported=true인 경우에만 통계적 의미가 있습니다. Session 갱신은 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_timefirst_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를 유효 필드로 사용
launch 플랫폼 appLaunch navigation duration
script_insert 스크립트 실행 시간
package_download 미니프로그램 코드 패키지 다운로드 시간

마지막 세 항목은 플랫폼 Performance entry에 의존합니다. launch / launch_attempt 비율을 사용하여 네이티브 시작 지표 적용 범위를 관찰하고, entry가 없다고 해서 시간이 0인 것으로 간주하지 마십시오.

화이트 스크린 후보 통계

화이트 스크린 분석은 적용 범위, 느린 렌더링 및 조기 종료의 세 가지 지표 유형으로 나누는 것이 좋습니다.

통계 샘플

먼저 다음 조건으로 필터링합니다.

view_start_reason = page_load
performance_supported = true
first_render_supported = true

최초 렌더링 신호를 지원하지 않는 플랫폼은 별도로 적용 범위를 통계 처리하고 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가 임계값 초과 콘텐츠 표시 및 주요 콘텐츠 안정화 시간에 더 가까움

권장 대시보드에는 최소한 다음이 포함되어야 합니다.

  1. Performance 및 최초 렌더링 신호 적용 범위
  2. FP, FCP, LCP, firstRender의 P50, P75, P95
  3. ended_before_render, ended_before_ready 비율
  4. 느린 View의 Error, 실패 Resource, 5xx 및 TTFB 분포
  5. 애플리케이션 버전, 플랫폼, 시스템 및 디바이스 모델별 추세

알려진 제약 사항

  • SDK에는 비즈니스 markViewReady() API가 없으므로 핵심 비즈니스 콘텐츠 사용 가능 여부를 확인할 수 없습니다.
  • Page onLoad 이전에 발생한 치명적 오류에는 View Context가 없을 수 있습니다.
  • 현재 Long Task, FPS, 페이지 고정 및 스크린샷은 수집하지 않습니다.
  • 플랫폼 Performance API, 기본 라이브러리 및 시스템 버전 차이는 필드 적용 범위에 영향을 미칠 수 있습니다.
  • 데이터 전송 실패 시 재시도나 로컬 지속성이 없으면 약한 네트워크 환경에서 문제 비율이 과소평가될 수 있습니다.

공식 참고 자료

문서 평가

이 페이지가 도움이 되었나요?