[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex io documentation business guidelines marketing assets in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-app-store)

[Becoming a registered VTEX App Store developer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer)

[Developing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-developing-an-app)

[Setting your app's billing model](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-setting-your-apps-billing-model)

[Preparing your app for distribution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-preparing-your-app-distribution)

[Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

[Using the Docs builder to publish app documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/using-the-docs-builder-to-publish-app-documentation)

[App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)

[App monetization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-app-monetization)

[Marketing guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets)

[User Experience guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-design-guidelines)

[Engineering guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-engineering-guidelines)

[Documentation guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-docs-guidelines)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-app-store)

[Becoming a registered VTEX App Store developer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer)

[Developing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-developing-an-app)

[Setting your app's billing model](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-setting-your-apps-billing-model)

[Preparing your app for distribution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-preparing-your-app-distribution)

[Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

[Using the Docs builder to publish app documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/using-the-docs-builder-to-publish-app-documentation)

[App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)

[App monetization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-app-monetization)

[Marketing guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets)

[User Experience guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-design-guidelines)

[Engineering guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-engineering-guidelines)

[Documentation guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-docs-guidelines)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/app-development)

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-app-store)

[App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)

[Marketing guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets)

Marketing guidelines

Learn how to prepare the App Page used to promote your app at the VTEX App Store

> The App Store is now accessible within the Admin in the Extensions Hub. If the Extensions Hub is not yet installed in your store, you can request assistance from our team by [opening a ticket](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/opening-tickets-to-vtex-support--16yOEqpO32UQYygSmMSSAM). For more information, please refer to the [Extensions Hub](https://read.calvincode.net/reader?url=https://help.vtex.com/es/tracks/extensions-hub--AW7klkYMh557y5IUOgzco/2LDRvGujYsumxi7IlE7CEJ) track and [release note](https://read.calvincode.net/reader?url=https://developers.vtex.com/updates/release-notes/extensions-hub-our-new-place-to-promote-apps-and-partners-inside-vtex-admin).

Once you have [developed your app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app), you have to prepare the App Page used to promote your app at the [VTEX App Store](https://read.calvincode.net/reader?url=https://apps.vtex.com/). The App Page is the first point of contact for merchants to learn more about your app and decide whether it suits their business.

![{"base64":"  ","img":{"width":1098,"height":931,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":123916,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-page-example.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-page-example.png)

Make sure to present your solutions professionally by adhering to the following principles:

* Clearly describe your app's value proposition, key benefits, and how merchants can benefit from it.
* Choose a product name that indicates the purpose of the app.
* Use high-quality images (icons and screenshots) and videos (if applicable).

If we identify areas for improvement, we will contact you before listing your app on the VTEX App Store.

Refer to the following sections to improve your App Page and increase its adoption on the VTEX App Store.

> We recommend following these best practices while setting up the files that compose an app's marketing assets. Please refer to [this guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23step-2---setting-the-public-folder) for more information.

## Tone & Voice

Choose to favor Serious and Authority tones. We understand they capture the reliability and expertise our system's voice should have.

| Tone and Voice | Description                                                                              |
| -------------- | ---------------------------------------------------------------------------------------- |
| Serious        | Speak firmly, respectfully, and honestly - always with a more serious tone than playful. |
| Authority      | Speak with mastery, proficiency, and expertise.                                          |

To see more about VTEX's tone and voice, go to [UX Writing Guidelines](https://read.calvincode.net/reader?url=https://uxwriting.vtex.com/docs/principles/goals-principles/%23tone-and-voice) and [VTEX Brand Guide](https://read.calvincode.net/reader?url=https://brand.vtex.com/voice-and-tone/) pages.

## Images

Images are a tool to express the visual identity of your app, make users learn more about the app, and reinforce your brand in the VTEX environment. The principles of a pack of images for the app are the following:

* Use high-quality images of your app's UI to show the users how it behaves.
* Add one icon that represents your app. This icon will appear in search results, the first page of the VTEX App Store, and the App's page.
* Upload up to ten and at least three screenshots (app's images).
* For storefront apps, combine Admin and storefront images to illustrate your app's experience for both Merchants and Shoppers.
* Add different mobile and desktop screenshots to improve the user experience depending on the screen.

### Icon

Your app icon is one of the first elements developers and merchants see when they install your app. It expresses the visual identity and reinforces your brand in the VTEX App Store environment.

![{"base64":"  ","img":{"width":1332,"height":718,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":101951,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-1.png)

#### Attributes

Icon artwork can populate the entire asset space, or you can design and position artwork elements, such as logos, onto the keyline grid. When placing your artwork, use keylines as a guideline, not a hard rule.

When creating your artwork, ensure it conforms to the following:

* Final size: 1024px x 1024px.
* File type: 32-bit PNG.
* Color space: sRGB.
* Format: Square image, without rounded corners.
* The background of your icon must be a solid color.
* The icon design must be simple and avoid unnecessary visual details. This will help merchants understand your app's purpose and ensure a better fit on smaller screens.
* The icon must not exceed 768px of the total space available in the icon size, which is equivalent to a 128px margin on each side.

![{"base64":"  ","img":{"width":1920,"height":1080,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":60964,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-2.png)

After the asset is uploaded, our platform dynamically applies the rounded mask to ensure consistency across all app icons.

![{"base64":"  ","img":{"width":1920,"height":1080,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25792,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-3.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-3.png)

On the left-hand side is your new icon asset. The following two images on the right-hand side show the dynamic processing of the icon.

#### Sizing

When dealing with minimalistic artwork, use the full asset space as the background. Use the keylines as guides for positioning artwork elements (e.g., logos).

![{"base64":"  ","img":{"width":1920,"height":1080,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":59879,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-4.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-4.png)

Do not force your logo or artwork to fit the full asset space. Instead, utilize the keyline grid.

![{"base64":"  ","img":{"width":1920,"height":1080,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":143173,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-5.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-5.png)

Below we have examples of icon elements that mislead users and violate our guidelines.

![{"base64":"  ","img":{"width":1920,"height":1080,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":89704,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-6.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-6.png)

#### Brand adaptation

If shapes are critical to a logo, do not force the artwork to fully bleed. Instead, place it on the new keyline grid.

![{"base64":"  ","img":{"width":1920,"height":1080,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":124321,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-7.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-icon-specification-7.png)

From left to right: original icon asset, new icon asset (recommended adaptation), new icon rendered on the App Store.

If possible, pick a background color for your asset that is appropriate for your brand and does not include any transparency. Transparent assets will display the background color of the App Store UI.

### Screenshots

Use screenshots to visually represent your app's key features and purpose.

![{"base64":"  ","img":{"width":1268,"height":865,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":251461,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-screenshot.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-screenshot.png)

#### Do's and Don'ts

* Provide three to five images showing the app on a Desktop and Mobile screen.
* Choose images of the app's interface and behavior, as well as the app's available configurations on the Admin panel.
* Use the PNG format.
* The image's size must be up to 700 x 400 pixels.
* Ensure the text in your images is localized according to the app's applicable market.
* Screenshots must highlight the purpose, actions, and benefits of the app.
* Do not use images that reveal actual usernames and accounts. Opt to take images with fictional or blurred information.
* Do not fully maximize the window when taking a screenshot. It can damage the quality of the image.

## Licenses

Licenses are written documents that contain your app's Terms and Conditions (T&C). They establish the direct business relationship between you, the developer, and the retailer that installs the app.

### Do's and Don'ts

* Seek legal advice for the writing of your T&C.
* Prepare a Personal Data Governance Program, which includes clauses in its T&C on the subject, depending on the applicable legislation, and tools that allow data subjects to exercise their rights.
* Consider wording limiting liability clauses.
* Remember to cover Intellectual Property issues.
* Offer the T&C in your User's language (Expected in English, Portuguese, and Spanish).
* Analyze the consumer laws of the countries where you operate, and offer consumers the rights provided.
* Review specific legislation related to your business, such as those issued by central banks if you are in financial services.
* Make it clear how to hire your service: free, freemium, or premium, for example. Also, review the regulations regarding the payment methods you will accept.

> The recommendations presented here are intended to serve as guidelines for third-party developers and do not represent a legal recommendation. VTEX is not responsible for direct, indirect, moral, punitive damages, consequential damages, or loss of profits arising from the use and/or compliance with these guidelines. Hiring legal advice is necessary and recommended for the final writing of terms and conditions for applications.

## Messaging

The textual content of your App Page must clearly and concisely highlight your app's value proposition and features so merchants can easily understand what they can do and achieve with your app.

Remember, your App Page is your main marketing tool and touchpoint with merchants.

### Name - Required

The name of an app is decisive for how merchants will find your app on the VTEX App Store.

![{"base64":"  ","img":{"width":1213,"height":298,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":42612,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-name.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-name.png)

#### Do's and Don'ts

* The app name must be a maximum of 26 characters.
* Keep it concise and descriptive. Ensure that it alludes to the experiences the app provides.
**Show example**

| ✅ Do          | ❌ Don't                                                                                |
| ------------- | -------------------------------------------------------------------------------------- |
| Live Shopping | Live Shopping - The app that allows you to live stream events on your store's website. |

* Capitalize the first letter of each word.
**Show example**

| ✅ Do          | ❌ Don't       |
| ------------- | ------------- |
| Live Shopping | Live shopping |

* Use _&_ instead of _And_.
**Show example**

| ✅ Do              | ❌ Don't             |
| ----------------- | ------------------- |
| Reviews & Ratings | Reviews and Ratings |

* Do not include the word _VTEX_.
**Show example**

| ✅ Do           | ❌ Don't             |
| -------------- | ------------------- |
| Abandoned Cart | VTEX Abandoned Cart |

* Do not use punctuation, such as period, comma, exclamation point, question mark, semicolon, colon, or underscore unless it's part of the actual company name.
**Show example**

| ✅ Do           | ❌ Don't         |
| -------------- | --------------- |
| Social Selling | Social Selling! |

* Do not include the app version number.
**Show example**

| ✅ Do               | ❌ Don't                |
| ------------------ | ---------------------- |
| Google Tag Manager | Google Tag Manager 2.x |

### Headline

The headline should describe the value proposition of your app in a concise sentence. It is shown on the App Page and square cards of apps.

![{"base64":"  ","img":{"width":1252,"height":298,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":42687,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-headline-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-headline-1.png)

![{"base64":"  ","img":{"width":1496,"height":1143,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":145022,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-headline-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-headline-2.png)

### Do's and Don'ts

* The headline must have at most 120 characters.
* Capture your app's key value proposition concisely.
**Show example**

| ✅ Do                                                                                | ❌ Don't                                                             |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| Engage with customers through live broadcasts, real-time chat, and product promotion.Create live broadcasts on your store, increase sales, and boost customer interaction in real-time. | Live broadcasts with customers.Create Live streaming and sell more. |

**Show example**

| ✅ Do                                                              | ❌ Don't                                                                              |
| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| _Set_ shipping address based on user browser's or IP Geolocation. | This app _attempts to determine_ the users' location and set their shipping address. |

Consider using verbs that reference the actions users will be able to take with your app and the benefits it will deliver.

* `Integrate data` | `create wishlists` | `monitor performance`.
* `Increase revenue` | `deliver convenient experiences`.
* Avoid repeating the application name.
**Show example**

| ✅ Do                                                                            | ❌ Don't                                                                                |
| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Integrate your store with Google's navigation and conversion tracking platform. | _Google Tag Manager_ is the app to integrate your store with Google's navigation and conversion tracking platform. |

### Overview

The overview is the description of the app and should be an engaging message that focuses on how your app can benefit merchants in a clear and precise way.

![{"base64":"  ","img":{"width":1253,"height":931,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":130061,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-overview.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-overview.png)

#### Do's and Don'ts

* Write a short overview limited to a maximum of 200 characters.
* The app description must give a glimpse of your app's benefits and functionalities, not a step-by-step explanation of how it works.
**Show example**

| ✅ Do                                                                                | ❌ Don't                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Integrate with WordPress to bring blog data to your VTEX IO store and create a blog "homepage", category pages, and blog post pages. | The Wordpress Integration app provides a way to bring in blog data from the Wordpress API and create a blog homepage, category pages, and blog post pages on your store, using your existing store header, footer, and styling. |

* Make sure you are addressing for whom your app is, what need it solves, and how uniquely you solve it.

> Numerous value proposition frameworks can be used as a reference in this task, such as the following: _Our \[product\] help(s) \[audience\] who wants to \[jobs to be done\] by \[verb e.g. reducing, avoiding\] + \[a user pain or gain\]_.

**Show example**

| ✅ Do                                                                                | ❌ Don't                                                                   |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| With The Live Shopping app, create live stream events on your store's website, promote product collections, increase sales, and enhance user experience simultaneously while interacting via live chat. | Live shopping is an app to stream live events on your store in real-time. |

* Use the active voice to give the user a sense of action.
**Show example**

| ✅ Do                                                                                | ❌ Don't                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| Offer an exclusive payment method to selected clients. With Customer Credit, you grant credit, determine limits, and manage invoices. | With Customer Credit, the credit will be granted, limits determined, and invoices will be managed. |

* Avoid technical and jargon language.
**Show example**

| ✅ Do                                                                                | ❌ Don't                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Interact with customers in real-time by generating personalized experiences through real-time chat and the interactive like button. | Interact with customers by managing the event's live chat in the events list by clicking on the desired live event's arrow button. |

### Features

In `features`, provide a list of your app's main features. It is included at the bottom of the overview.

![{"base64":"  ","img":{"width":1253,"height":931,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":128810,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-features.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-features.png)

#### Do's

* Highlight which tasks can be performed within the app.
* Write concise and brief descriptions (no more than 15 - 20 words).
* Use bullet points to make the content easy to scan.
* Describe what makes your app unique.
**Show example**

| ✅ Do                                                                                | ❌ Don't                                                                                |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Stream & Sell with the VTEX Live Shopping app. No need to hire a separate streaming platform.Highlight products in the live stream to increase sales.Add to cart alert: Show which products are trending and encourage the audience to add these products to their shopping cart. | Stream and sell with the VTEX Live Shopping app without hiring a separate streaming platform. Also, highlight products during the live stream to increase sales. |

### Website URL

The Website URL is a hyperlink to your website that redirects users to your corporate or app page. Website hyperlinks will be displayed in the sidebar of the App Page. This is an interesting component for presenting your solution in more depth to retailers browsing the VTEX App Store.

#### Do

* Enter a valid URL in this field to direct them to a landing page, "About Us" page, or your corporate website.

### Video

Use videos to demonstrate how your app behaves in different scenarios. Videos are exciting resources that complement [images](#images) as an educational tool that shows your app's main benefits and features.

![{"base64":"  ","img":{"width":1222,"height":748,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":140632,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-video-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-video-1.png)

![{"base64":"  ","img":{"width":1394,"height":745,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":552990,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-video-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-video-2.png)

#### Do's

* Feature videos of a maximum of 2 minutes.
* Make a video showing the main features and benefits of your app.
* Localize your video audio and or transcription according to your audience.
* Make visually compelling videos to attract attention from potential buyers of your app.

For example, check out the [video for the Live Shopping app](https://read.calvincode.net/reader?url=https://apps.vtex.com/liveshopping/p).

### Metric description

> Metric descriptions are required only for apps whose pricing is based on one or more metrics. If this is not the case, please do not fill out this field.

For each metric declared in the `billingOptions` field (found in the app's `manifest.json` file), you must include a simple description of how it works. This description will help the extension buyer understand what each metric does and how it will impact the application billing. For more information about variable rate charging using metrics, check the [Setting your app's billing model](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-setting-your-apps-billing-model%23setting-the-app-as-public) article.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/vtex-io-documentation-business-guidelines-marketing-assets.md)

[App monetization« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets//docs/guides/vtex-io-documentation-business-guidelines-app-monetization)[User Experience guidelinesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets//docs/guides/vtex-io-documentation-design-guidelines)

See also

[User Experience guidelinesApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-design-guidelines)[Submitting your app to the VTEX App StoreApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)[App Store GuidelinesApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)[Preparing your app for distributionApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-preparing-your-app-distribution)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Tone & Voice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23tone--voice)

[Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23images)

[Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23icon)[Screenshots](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23screenshots)

[Licenses](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23licenses)

[Do's and Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23dos-and-donts)

[Messaging](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23messaging)

[Name - Required](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23name-required)[Headline](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23headline)[Do's and Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23dos-and-donts)[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23overview)[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23features)[Website URL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23website-url)[Video](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23video)[Metric description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23metric-description)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/vtex-io-documentation-business-guidelines-marketing-assets.md)

Copy page

On this page

ON THIS PAGE

[Tone & Voice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23tone--voice)

[Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23images)

[Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23icon)[Screenshots](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23screenshots)

[Licenses](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23licenses)

[Do's and Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23dos-and-donts)

[Messaging](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23messaging)

[Name - Required](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23name-required)[Headline](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23headline)[Do's and Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23dos-and-donts)[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23overview)[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23features)[Website URL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23website-url)[Video](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23video)[Metric description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets%23metric-description)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex io documentation tracking changes in lighthouse performance score in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-managing-performance)

[Deactivating the VTEX IO native service worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker)

[Debugging performance issues](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-debugging-performance-issues)

[Displaying asynchronous prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-displaying-asynchronous-prices)

[Enabling the Order Form optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-enabling-order-form-optimization)

[Getting started with Lighthouse performance audit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-getting-started-with-lighthouse)

[Enabling performance settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-enabling-performance-settings)

[Tracking changes in Lighthouse performance score](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score)

[Lazy loading components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-using-the-fold-blocks)

[Optimizing image rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-optimizing-image-rendering)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-managing-performance)

[Deactivating the VTEX IO native service worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker)

[Debugging performance issues](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-debugging-performance-issues)

[Displaying asynchronous prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-displaying-asynchronous-prices)

[Enabling the Order Form optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-enabling-order-form-optimization)

[Getting started with Lighthouse performance audit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-getting-started-with-lighthouse)

[Enabling performance settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-enabling-performance-settings)

[Tracking changes in Lighthouse performance score](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score)

[Lazy loading components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-using-the-fold-blocks)

[Optimizing image rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-optimizing-image-rendering)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/store-framework-managing-performance)

[Tracking changes in Lighthouse performance score](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score)

Tracking changes in Lighthouse performance score

> In this tutorial, we'll use [Lighthouse Scoring Calculator](https://read.calvincode.net/reader?url=https://googlechrome.github.io/lighthouse/scorecalc/%23version=6), a tool created by Google that allows you to play with Lighthouse performance metrics and define which thresholds you should aim for to achieve the desired Performance Score.

It's possible that a change you expected to cause a considerable increase in the _Performance Score_ doesn't affect it at all. Conversely, a seemingly small change may affect the score significantly. The same applies in reverse for possible regressions in performance.

In the following sections, we'll explore some of the factors that might be the reason for this. However, before proceeding, it's important to remember that:

1. The _Performance Score_ is not linear. Actually, **the _Performance Score_ is a weighted average** of the following six in the lab metrics:

![{"base64":"  ","img":{"width":1534,"height":995,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":58396,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-0.png)

1. **The _Metrics' Scores_ are not linear.** Lighthouse metrics follow their own rules. To better illustrate that, take the following example: imagine you have a _Largest Contentful Paint (LCP)_ of 8s. You work on some improvements, and you reduce _LCP_ by 2 seconds. When you look at the _Metric Score_ you notice it went from 3 to 13, increasing the overall _Performance Score_ by 2 points (from 76 to 78).

![{"base64":"  ","img":{"width":1830,"height":842,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":113260,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-1.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-1.gif)

You're not satisfied yet, so you work on more changes and you manage to take _LCP_ from 6s to 4s, which also corresponds to a reduction of 2s. However, this time, when you look at the _Metric Score_, you notice it went from 13 to 50, improving the overall _Performance Score_ by 10 points (from 78 to 88).

![{"base64":"  ","img":{"width":1830,"height":842,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":169279,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-2.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-2.gif)

Notice that in both cases, there was a reduction of 2s in the _LCP_ time. However, in the first case, this improvement led to a gain of 10 points (from 3 to 13) in the _Metric Score_. Meanwhile, in the second case, the same reduction of 2s led to a gain of 37 points (from 13 to 50).

With that in mind, let's dive deeper and explore some other reasons for "unexpected" behaviors from Lighthouse.

## Going from nothing to nothing

When you have a metric that scores too low, a seemingly significant change may not affect the _Performance Score_ as expected.

To better illustrate that, let's investigate the _Largest Contentful Paint (LCP)_ metric.

_LCP_ has a weight of 25% on the _Performance Score_. Therefore, to affect the overall _Performance Score_, the _LCP_ score must be at least 2, which would correspond to 1 point (rounding up 2\*0.25=0,5) in the _Performance Score_.

> When calculating the _Performance Score_, decimal values greater than 0.5 are rounded up to the next largest whole number.

With that in mind, suppose _LCP_ went from 12s to 8s.

![{"base64":"  ","img":{"width":1830,"height":842,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":104339,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-3.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-3.gif)

Notice that, even if this could be considered a significant improvement, any LCP time greater than approximately 8s yields a _Performance Score_ of 0\. So, in this example, the _LCP_ score went from 0 to 3, leading to a gain equivalent to 1 in the _Performance Score_ (rounding up 3\*0.25=0.75).

In this sense, to have an idea of when the _Metric Score_ is too slow, we recommend that you take a look at the maximum values for starting punctuating with each metric.

![{"base64":"  ","img":{"width":1132,"height":995,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":110721,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-4.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-4.png)

> Notice that the metrics scores will be 0 for any value above the given limits.

We also recommend being attentive to the following values:

| Good                              | Needs improvement | Poor            |             |
| --------------------------------- | ----------------- | --------------- | ----------- |
| **First Contentful Paint (FCP**)  | 0 - 1000ms        | 1000ms - 3000ms | Over 3000ms |
| **Speed Index (SI)**              | 0 - 4300ms        | 4400ms - 5800ms | Over 5800ms |
| **Largest Contentful Paint(LCP)** | 0 - 2500ms        | 2500ms - 4000ms | Over 4000ms |
| **Time to Interactive (TTI)**     | 0 - 3800ms        | 3900ms - 7300ms | Over 7300ms |
| **Total Blocking Time (TBT)**     | 0 - 300ms         | 300ms - 600ms   | Over 600ms  |
| **Cumulative Layout Shift(CLS)**  | 0 - 0.1           | 0.1 - 0.25      | Over 0.25   |

## Cascading effect

If you're struggling with the Lighthouse Performance audit, we recommend that you pay attention to _First Contentful Paint (FCP)._

The _FCP_ metric measures how long it takes to display the very first piece of content of the page.

If _FCP_ time is too long, it will affect almost all of the other metrics, dragging the _Performance Score_ way down.

A slow _FCP_ time might mean that, for some reason, the server is taking too long to respond. It might also mean that **Server-Side Rendering (SSR) is not working.**

If SSR is not working correctly, the page needs to download, parse, and execute all of its JS files so it can finally display any content at all.

![{"base64":"  ","img":{"width":2986,"height":2177,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":217752,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-5.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-5.gif)

Notice that many metrics, such as _SI_, _LCP_, _TTI_, depend on the content being displayed as soon as possible. Consequently, they are directly affected by _FCP_, making this metric extremely important for the overall _Performance Score_.

Take the following example:

![{"base64":"  ","img":{"width":2390,"height":1110,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":56786,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-6.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-6.png)

## Variabilities from run to run

If the _Performance Score_ of your page keeps changing, keep in mind that different network conditions might be affecting the score and triggering cascading effects.

For example, if you run Lighthouse when the page is taking a bit too long to respond, most of the metrics might be affected. That will generate a much worse score.

Ideally, the root cause must be fixed. But, in general, we recommend that you [**run the test around five times and pick the median value.**](https://read.calvincode.net/reader?url=https://developers.google.com/web/tools/lighthouse/variability%23run%5Flighthouse%5Fmultiple%5Ftimes)

[An in-depth explanation of score variability can be found here.](https://read.calvincode.net/reader?url=https://developers.google.com/web/tools/lighthouse/variability)

## Perceived performance matters

Web performance is a relative term. From the user's point of view, it's a perception of how he experiences page loading and how responsive a page feels.

Some metrics, especially _Largest Contentful Paint (LCP)_, _Speed Index (SI)_, and _Cumulative Layout Shift (CLS)_, are based on perception rather than pure speed. In broad terms, they track how long it takes for the content above-the-fold to be visibly ready.

These metrics are affected by conditions that don't necessarily make the page slower. That's why sometimes you may have the feeling that the _Performance Score_ changed without any apparent reason. They can be affected, for example, by elements that shift around, images without pre-set dimensions, large images, modal windows, components added via JS, etc.

Notice that these three metrics have a huge impact on the overall _Performance Score_ and account for 45 points of the total.

![{"base64":"  ","img":{"width":2206,"height":1110,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":125353,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-7.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score-7.png)

## Everything is connected

Sometimes metrics can be conflicting between them and something that should improve one metric impacts another, lowering the overall _Performance Score_.

For example, lazy-loading images might improve the _Time to Interactive (TTI)_ metric because JS is loaded earlier. However, by delaying the time taken to render the largest element of the page, the _Largest Contentful Paint (LCP)_ is negatively affected.

The advice here, which applies to other cases as well, is to keep in mind which metrics you are expecting to improve and to mind potential drawbacks in the others.

Besides that, to paint a clearer picture of what is happening, track individual measurements instead of only the total _Performance Score_.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/boosting-performance/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score.md)

[Enabling performance settings« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score//docs/guides/vtex-io-documentation-enabling-performance-settings)[Lazy loading componentsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score//docs/guides/vtex-io-documentation-using-the-fold-blocks)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Going from nothing to nothing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score%23going-from-nothing-to-nothing)

[Cascading effect](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score%23cascading-effect)

[Variabilities from run to run](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score%23variabilities-from-run-to-run)

[Perceived performance matters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score%23perceived-performance-matters)

[Everything is connected](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score%23everything-is-connected)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/boosting-performance/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score.md)

Copy page

On this page

ON THIS PAGE

[Going from nothing to nothing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score%23going-from-nothing-to-nothing)

[Cascading effect](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score%23cascading-effect)

[Variabilities from run to run](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score%23variabilities-from-run-to-run)

[Perceived performance matters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score%23perceived-performance-matters)

[Everything is connected](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score%23everything-is-connected)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)