Oxygen deployments can sometimes fail due to the app startup time exceeding the limit of the platform. This guide shows you how to measure the startup time of your app locally and find out ways to optimize it. ## Step 1: Run the CPU profiler To measure the startup time of your app, run the CPU profiler with following command in your terminal: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="sh"> RAW_MD_CONTENTnpx shopify hydrogen debug cpu END_RAW_MD_CONTENT</script> </div> </p> This command builds your app and runs the generated bundle code once. It then watches for changes and rebuilds the app when necessary. > Note: > CPU start up time and profiling are bound to your local CPU and might not be an accurate representation of the startup time on the Oxygen platform. However, measuring start time locally still be useful for observing trends when making changes in your app. <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="title" data-value="Output"></script> <script type="text/plain" data-language="none"> RAW_MD_CONTENTStarting profiler for CPU startup...Profile will be written to: ./startup.cpuprofile #1 Total time: 362.337 ms #2 Total time: 123.359 ms #3 Total time: 72.048 ms ./startup.cpuprofile Waiting for changes... END_RAW_MD_CONTENT</script> </div> </p> Every time you save a file, an updated startup time measure is logged to the terminal. You can use this information to observe trends when making changes in your app. ## Step 2: View the startup time report The CPU profiler displays your app's startup time in the terminal. It also generates a more comprehensive startup time report and saves it to `./startup.cpuprofile`. To view this report, open it with a flame graph viewer such as [Flame Chart Visualizer for JavaScript Profiles](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-js-profile-flame) in Visual Studio Code, or [Speedscope](https://www.speedscope.app/) in a browser. <figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/custom-storefronts/hydrogen/debug-cpu-report-64c225ad00707c2d517361e96edd005ae79aa3276fa62c2f1c1be15e658a4371.png" class="lazyload" alt="CPU startup time flamegraph report." width="100%" height="1308"></figure> > Note: > Depending on the tool that you're using to view the flame graph, you need to close the file and reopen it to view the updated flame graph whenever the profiler generates a new report. ## Step 3: Optimize your startup time After you find the parts of your app that contribute to the startup time, you can start optimizing them. Some common scenarios that can cause slow startup times include the following: - Using dependencies that perform unnecessary computations during import. For example, a dependency might establish a connection with a third-party API during import. - Calling functions or template literals that perform computation outside of a request cycle, such as at the top-level of a module. For example, a common scenario is using `graphql-tag` to parse GraphQL queries at the top level of a route file, which internally transforms strings into AST objects. This can be avoided by using a `#graphql` comment instead, which turns on syntax highlighting for GraphQL queries without parsing them.