react-native-performance로 앱 시작 시간 측정하기

📒 react-native-performance로 앱 시작 시간 측정하기

---

이번에 회사에서 앱 성능 개선 업무를 맡아 정말 열심히 했습니다.

그 과정에서 앱 시작 속도도 정말 크게 개선되었는데, 수치로 보여주지 않으면 그저 감일뿐이겠죠?

 

수치화를 하려고 프로파일링 도구들을 많이 찾아보다 react-native-performance라는 패키지를 선택하게 되었습니다.

가장 주요한 이유는 Cold Start 시 앱 번들 로드 시간을 측정할 수 있기 때문입니다.

그럼 세팅부터 초기 번들 로드 시간 + 초기 화면 렌더링 시간 프로파일링까지 소개드립니다.

📌 설치

https://shopify.github.io/react-native-performance/

$ yarn add @shopify/react-native-performance
$ cd ios && pod install

패키지 설치 후 pod install까지 진행합니다.

📌 Native 세팅

네이티브 코드에 앱 시작 전 측정 코드를 추가해 초기 번들 로드 시간을 측정할 수 있습니다.

🔎 Android

// MainApplication.java

import com.shopify.reactnativeperformance.ReactNativePerformance; // 추가
// ...

@Override
public void onCreate() {
  ReactNativePerformance.onAppStarted(); // 추가
  super.onCreate();
  // ...
}

// MainApplication.kt

import com.shopify.reactnativeperformance.ReactNativePerformance; // 추가
// ...

public void onCreate() {
  ReactNativePerformance.onAppStarted(); // 추가
  super.onCreate();
  // ...
}

안드로이드는 Java or Kotlin에 따라 MainApplication에 코드를 추가해 줍니다.

여기서 핵심은 onCreate() 전에 onAppStarted() 메서드를 실행해 번들 로드 시간 측정을 시작하는 겁니다.

🔎 IOS

// AppDelegate.m

#import <ReactNativePerformance/ReactNativePerformance.h> // 추가
// ...

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [ReactNativePerformance onAppStarted]; // 추가
  // ...
}

// AppDelegate.swift

import ReactNativePerformance // 추가
//...

@main
class AppDelegate: RCTAppDelegate {
  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    ReactNativePerformance.onAppStarted() // 추가
    // ...
}

IOS도 Objective-C or Swift에 따라 AppDelegate에 앱 시작 측정 코드를 추가해 주도록 합니다.

 

📌 앱 시작 속도 측정

// App.tsx

import React, { useCallback } from 'react';
import { RenderPassReport, PerformanceProfiler, PerformanceMeasureView } from '@shopify/react-native-performance';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import Home from './src/pages/Home';

const RootStack = createStackNavigator();

const PerformanceHomeScreen = () => {
  return (
    <PerformanceMeasureView screenName="Home" interactive={true}>
      <Home />
    </PerformanceMeasureView>
  );
};

function App() {
  const onReportPrepared = useCallback((report: RenderPassReport) => {
    console.log({ report });
  }, []);

  return (
    <PerformanceProfiler onReportPrepared={onReportPrepared}>
      <NavigationContainer>
        <RootStack.Navigator initialRouteName="Home">
          <RootStack.Screen name="Home" component={PerformanceHomeScreen} />
        </RootStack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
}

export default App;

• App.tsx에서 <PerformanceProfiler />를 선언함으로써 프로파일링을 초기화해 주고, 측정 결과를 확인할 수 있습니다.
• <PerformanceMeasureView />를 최초 렌더 페이지 Navigator Screen에 적용하며 화면이 렌더 될 때 측정을 종료합니다.

🔎 데이터 확인

{
    "reportId": "22B199F0-637F-4122-9FE1-F95A13170950",
    "resourceAcquisitionStatus": {
        "totalTimeMillis": 0,
        "components": {}
    },
    "flowInstanceId": "B02EB9F0-37F2-4EBC-94E6-5B97269E1A5E",
    "destinationScreen": "Home",
    "flowStartTimeSinceEpochMillis": 1747417857111,
    "timeToBootJsMillis": 1625.4560546875,
    "renderPassName": "interactive",
    "timeToRenderMillis": 210.14794921875,
    "interactive": true
}

PerformanceProfiler의 onReportPrepared을 통해 받은 데이터입니다.

각 데이터의 의미는 다음과 같습니다.

• destinationScreen
  • 프로파일링 된 도착 스크린입니다.
• flowInstanceId
  • 하나의 flow 실행에서 발생한 모든 렌더링 리포트가 공유하는 고유한 UUID입니다.
• flowStartTimeSinceEpochMillis
  • flow가 시작된 시점의 타임스탬프입니다.
• interactive
  • 해당 렌더 패스가 화면을 인터랙티브 상태로 만들었는지를 나타냅니다. 
    PerformanceMeasureView의 interactive prop에 의해 제어됩니다.
• renderPassName
  • 완료된 렌더 패스의 이름입니다. 중단된 렌더 패스의 경우에는 제공되지 않습니다.

• reportId
  • 각 렌더링에 대해 고유하게 식별되는 UUID입니다. 
• sourceScreen
  • 프로파일링된 flow의 시작 스크린입니다.
• timeToBootJsMillis
  • JS 코드가 부팅되기까지 걸린 시간입니다. 앱 시작 렌더링 시간을 측정할 때만 사용 가능합니다.
• timeToRenderMillis
  • 렌더 패스가 완료되기까지 걸린 시간입니다. 중단된 렌더 패스의 경우에는 제공되지 않습니다.
• timeToAbortMillis
  • 렌더 패스가 중단되기까지 걸린 시간입니다. 중단된 렌더 패스의 경우에만 사용 가능합니다.

여기서 중요한 건 timeToBootJsMillis와 timeToRenderMillis입니다.

이 둘을 이용한다면 "앱 시작 후 첫 콘텐츠 렌더링 시작 시간"인 "First Contentful Paint(FCP)"를 측정할 수 있습니다.

FCP = 번들 로드 시간(timeToBootJsMillis) + 컨텐츠 렌더 시간(timeToRenderMillis)

 

그럼 위 데이터를 봤을 때 timeToBootJsMillis가 1625ms, timeToRenderMillis가 210ms이니까 앱 시작 속도는 1.8초 정도 되겠죠?

 

저는 Navigator 단에 PerformanceMeasureView를 적용하였지만, 컴포넌트 내부에 직접 적용한 뒤 interactive props을 이용한다면 첫 상호작용 시간 지표인 Time To Interactive(TTI)를 측정할 수 있습니다.

📌 마무리하며

react-native-performance 패키지가 커뮤니티도 형성되어 있지 않아 활용하기에 깊게 사용하기엔 어렵지만 앱 시작 속도를 측정하기엔 간단하고 쉬운 것 같아 만족합니다.

 

사용 방법을 담은 예제는 다음 리포지토리를 참고해주세요.

GitHub - devlasbe/rn-lazy-loading: React Native에서 Lazy Loading을 통해 앱 시작 속도를 측정