CODEWITHSUNDEEP
javascriptreactjsperformancetesting
Matthew Manuel
Matthew Manuel

Reputation: 1

How to measure first render performance over time of a React App?

Objective: I want to measure the performance of our react app with production size data by running a node script on our CI server. The idea is to measure the performance of our project over time as the codebase evolves.

I've googled, and was surprised to not find anything similar to what I'm trying to achieve.

I'm trying via SSR and executing renderToString() with our prod data and capturing the time difference using dateTime which gives a reasonable time (around 2 seconds). I want to execute it X number of times and get the fastest time to reduce anomalies. It may not accurately measure the user's first render performance, but it's more about capturing the relative performance over time.

const runPerformanceTest = async () => {
    prodData = await import('../data')

    const history = createMemoryHistory()
    history.replace('/')

    const initialState = () => ({
      data: prodData
    })

    const mockStore = () => createStore(
      rootReducer,
      initialState(),
    )

    const timestamps = []

    for (let i = 0; i < 10; i++) {
      const startTime = Date.now()
      const store = mockStore()
      renderToString((
        <StaticRouter context={{}}>
          <Provider store={store}>
            <ConnectedRouter history={history}>
              <App />
            </ConnectedRouter>
          </Provider>
        </StaticRouter>
      ))
      const endTime = Date.now() - startTime
      timestamps.push(endTime)
    }

    console.log(timestamps)
}

I'm expecting timestamps to be appear something like [2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000]

However what timestamps actually returns is [2000, 20, 30, 30, 30, 30, 30, 30, 30, 30]

Which appears to suggest its returning cached results when it executes renderToString after the first iteration.

There's something I'm misunderstanding under the hood on what node is doing or I'm going down the wrong path. I was wondering if anyone had ideas? Keen for alternative suggestions as well.

Upvotes: 0

Views: 1134

Answers (1)

wentjun
wentjun

Reputation: 42556

Hmmm.. This may not be something that allows your to capture the user's performance over time, but you can use Google Lighthouse to measure the performance of your website. It can be run directly from the Chrome browser, or even from the command line.

You can even do things like selecting the internet speed/CPU performance so that you know how fast your page loads on a 3G connection (aka how fast your page loads in less developed countries when the internet speed may be slower).

It breaks down the performance score to the individual parts such as script loading, bundle size, etc, and gives you tips on how to improve performance.

Upvotes: 1

Related Questions