Screen Load Time

Tracking Screen Load Time

In this example, we’ll track the time it takes to load the Details screen from the Home screen. This includes adding markers for navigation start and screen load completion.

Step 1: Initial Code

Here’s the base implementation of the two screens:

1
import { View, Button } from 'react-native';
2

3
// Home Screen
4
const HomeScreen = ({ navigation }) => {
8 collapsed lines
5
  return (
6
    <View>
7
      <Button
8
        title="Go to Details"
9
        onPress={() => navigation.navigate('Details')}
10
      />
11
    </View>
12
  );
13
};
14

15
// Details Screen
16
const DetailsScreen = () => {
5 collapsed lines
17
  return (
18
    <View>
19
      <Text>Details Screen</Text>
20
    </View>
21
  );
22
};

Step 2: Adding marco for Performance Tracking

Let’s modify the code to include PerformanceTracker.

• Marker 1: Add a marker in the onPress handler of the “Go to Details” button to track when navigation starts.
• Marker 2: Wrap the Details screen with PerformanceTracker to track when the screen finishes loading.
• Persist Data: Use PerformanceTracker.configure({ persistToFile: true }) to save the performance data to a file on the device.
• Handle onTrackingEnd: Capture the renderTime and drawTime values and optionally send them to a server.

1
import { PerformanceTracker } from '@d11/marco';
2

3
PerformanceTracker.configure({
4
    persistToFile: true
5
})
6

7
const HomeScreen = ({ navigation }) => {
8
  return (
9
    <View>
10
      <Button
11
        title="Go to Details"
12
        onPress={() => {
13
          // Track navigation start
14
          PerformanceTracker.track('Navigation_Started', Date.now());
15
          navigation.navigate('Details');
16
        }}
17
      />
18
    </View>
19
  );
20
};

1
import { PerformanceTracker } from '@d11/marco';
2

3
const DetailsScreen = () => {
4
  return (
5
    <PerformanceTracker tagName="Details_Screen_Loaded" onTrackingEnd={(event) => {
6
        // 'Draw Timestamp:', event.nativeEvent.drawTime
7
        // 'Render Timestamp:', event.nativeEvent.renderTime
8
    }}>
9
      <View>
10
        <Text>Details Screen</Text>
11
      </View>
12
    </PerformanceTracker>
13
  );
14
};

Step 3: Automating the Test with Maestro

We’ll use Maestro to run a simple test to measure screen load time.

Create a test.yaml file with the following content:

1
appId: com.example.app # Replace with app's ID
2
---
3
- launchApp:
4
    clearState: true
5
- repeat:
6
    times: 2
7
    commands:
8
     - tapOn: "Go to Details"
9
     - assertVisible: "Details Screen"

Step 4: Create a marco.config.js File

To configure the marco CLI, create a marco.config.js file at the root of project. This file specifies how marco will fetch the performance data from the device and visualize it on dashboard. You can either use CLI commands as well.

Here`s an sample configuration:

1
    module.exports = {
2
      android: {
3
        packageName: 'com.example.app',
4
        outputPath: './navigation-reports/android',
5
        dataDir: './navigation-reports/android/log.json',
6
        port: '8080',
7
      },
8
      ios: {
9
        packageName: 'com.example.app',
10
        outputPath: './navigation-reports/ios',
11
        dataDir: './navigation-reports/ios/log.json',
12
        port: '8080',
13
      },
14
    };

Step 5: Fetch the Report

1
 yarn marco generate --platform android

The command collects data saved in device to a JSON file at specified path(./navigation-reports/android/log.json) at the root of project.

Sample Report:

1
[
2
    {
3
      "tagName": "Navigation_Started",
4
      "timestamp": 1733301898369
5
    },
6
    {
7
      "tagName": "Details_Screen_Loaded",
8
      "timestamp": 1733301898878
9
    },
10
    {
11
      "tagName": "Navigation_Started",
12
      "timestamp": 1733301904456
13
    },
14
    {
15
      "tagName": "Details_Screen_Loaded",
16
      "timestamp": 1733301905063
17
    },
18
]

Step 6: Visualize the Data

To visualize the fetched performance data, you can use the marco visualization dashboard. This step helps you analyze the data in a more user-friendly and interactive way.

Run the Visualization Command

1
yarn marco visualize --platform android

This command starts a local server and opens the visualization dashboard in browser at http://localhost:8080 (or the custom port specified in marco.config.js).

Example Dashboard View

Once the dashboard is running, you’ll see the fetched data visualized in an intuitive format. For example:

• Timeline View: Displays the sequence of tracked events.
• Comparisons: If multiple test runs are available, you can compare trends across iterations.