Storefront Development

Storefront Development
Store Framework
Managing performance
Safely enabling performance settings

We understand that site performance is a common concern among ecommerce stores since it directly impacts the number of visited pages, sales conversion rate, user session time, bounce rate, and more.

Thus, to help you guarantee the success of your brand's online presence, we'll teach you, in the following step by step, how to test and implement our recommendations for optimizing your store's performance.

Step by step

Step 1: Applying changes on a production workspace

  1. Using the terminal and the VTEX IO CLI, log in to the desired account by running vtex login {account}.
  2. Run the command vtex use {productionWorkspace} to create and use a new Production workspace.

Remember to replace the values between the curly braces according to your scenario.

  1. Using your browser, access the account's admin relative to that workspace.
  2. From the account's admin panel, go to Store Settings > Storefront > Store > Advanced.
  3. Now, considering our documentation on Best practices for optimizing performance, activate the desired features, and save the changes.
  4. Access your store in the current workspace that you're working in and check if the performance improvements were applied.

Keep in mind that it might take some time before some changes are applied.

Step 2: Testing and analyzing performance

  1. Review and test all the main pages of your store, making sure that the changes didn't cause any side-effects, such as style inconsistencies or undesired behaviors.
  2. Access Google PageSpeed Insights.
  3. Using the following URL pattern: https://{account}{productionWorkspace}, check your store's performance in the production workspace you're currently working.

Using the standard URL pattern https://{workspace}--{account} won't show the performance score of your store in the specified workspace. Thus, keep in mind: to analyze performance in a workspace, you must use the ?workspace={productionWorkspace} query string as shown in Step 2.3.

Before promoting your workspace to master, we recommend that you measure the performance improvements by comparing the performance score in the production and the master workspace.

Step 3: Making your changes publicly available

If you're happy with the results obtained in the previous steps, run vtex promote to promote your workspace and to benefit from a faster store.

Photo of the contributor
+ 1 contributors
Was this helpful?
Suggest edits (Github)
Photo of the contributor
+ 1 contributors
On this page