Skip to main content

App Startup Performance Tracking

Overview​

This guide shows you how to track and optimize your app's startup performance using Marco. You'll learn how to:

  • Track app launch start time
  • Measure initial screen load time
  • Generate performance reports
  • Visualize startup metrics
Prerequisites

Before you begin, ensure Marco is integrated into your Android and iOS apps. Refer to Marco Quick Start for setup instructions.

Implementation Guide​

1. Tracking App Launch Start​

Add a marker at the beginning of your app's lifecycle to track when the app starts launching.

import com.performancetracker.PerformanceTracker;

override fun onCreate() {
    super.onCreate()

    // Track app launch start time
    PerformanceTracker.track(
        "AppLaunchStart",
        System.currentTimeMillis(),
        null,
        true, // Enable file logging
        applicationContext
    )
    // Continue with other initialization
}
note

Make sure to set writeLogInFile: true to persist the performance data for later analysis.

2. Tracking Initial Screen Load​

Let's create a sample home screen that demonstrates tracking the initial screen load time:

import { PerformanceTracker } from '@d11/marco';
import { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';

// Configure Marco to persist performance data
PerformanceTracker.configure({
  persistToFile: true,
});

function HomeScreen(): React.JSX.Element {
  const [isLoading, setIsLoading] = useState(true);

  // Simulate initial data loading
  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  if (isLoading) {
    return (
      <PerformanceTracker tagName="LoadingState" style={styles.outerContainer}>
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      </PerformanceTracker>
    );
  }

  return (
    <SafeAreaView style={styles.outerContainer}>
      <PerformanceTracker
        tagName="HomeScreen_Loaded"
        style={styles.outerContainer}
      >
        <View style={styles.container}>
          <Text testID="home_screen_text" style={styles.text}>
            Home Screen
          </Text>
        </View>
      </PerformanceTracker>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 10,
    padding: 10,
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  outerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
tip

While you can track the loading state, it's more meaningful to track when the actual screen is ready for user interaction.

3. Running Performance Tests​

Use an instrumentation tool like Maestro to run automated tests and collect performance data.

4. Configuration​

Create a marco.config.js file in your project root:

// marco.config.js
module.exports = {
  android: {
    packageName: 'com.example.app',
    outputPath: './marco-reports/android',
    dataDir: [
      {
        path: './marco-reports/android/log.json',
        reportName: 'AndroidReport1',
      },
    ],
    port: '8080',
  },
  ios: {
    packageName: 'com.example.app',
    outputPath: './marco-reports/ios',
    dataDir: [
      {
        path: './marco-reports/ios/log.json',
        reportName: 'iosReport1',
      },
    ],
    port: '8080',
  },
};

5. Generating Performance Reports​

Run the following command to collect performance data:

yarn marco generate --platform android

This will generate a JSON report with the following structure:

[
  {
    "tagName": "AppLaunchStart",
    "timestamp": "1738089908375"
  },
  {
    "tagName": "HomeScreen_Loaded",
    "timestamp": "1738089908973"
  }
]

6. Visualizing Performance Data​

To view your performance data in an interactive dashboard:

yarn marco visualize --platform android

The dashboard will be available at http://localhost:8080 and provides:

  • Timeline view of app startup events
  • Performance metrics visualization
  • Comparison across multiple test runs
  • Detailed analysis of startup times

Next Steps​