[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 faststore seo optimizing seo by managing lazy loading on plp and pdp 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/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/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/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/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/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/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/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-overview)

[Configuring SEO for PLPs and PDPs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-configuring-seo-for-plp-and-pdp)

[Optimizing SEO by managing lazy loading on PLPs and PDPs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp)

[Validating UTM tracking in FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-validating-utm-tracking-in-faststore)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-overview)

[Configuring SEO for PLPs and PDPs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-configuring-seo-for-plp-and-pdp)

[Optimizing SEO by managing lazy loading on PLPs and PDPs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp)

[Validating UTM tracking in FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-validating-utm-tracking-in-faststore)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-overview)

Optimizing SEO by managing lazy loading on PLPs and PDPs

Lazy loading is a method that delays the loading of non-essential resources, such as images or sections of a page, until they are actually needed. FastStore uses lazy loading for all native store sections that are out of the viewport. Each section is wrapped in a component that checks if it is within the viewport. Otherwise, the section is loaded lazily.

This approach reduces initial page load time and improves the browsing experience, especially on slower devices and networks. However, since sections outside the viewport are not included in the initial HTML, there can be SEO implications, such as search engines not indexing them immediately.

This guide explains how to manage lazy loading for custom sections to balance SEO and performance.

> Disabling lazy loading will most likely increase initial page load time. Apply this practice only to critical, above-the-fold content or SEO-relevant sections that must render on the initial page load. For guidance, see [Key concepts before implementation](#key-concepts-before-implementation) and [Deciding when to lazy load](#step-1--deciding-when-to-lazy-load).

## Key concepts before implementation

Lazy loading in FastStore relies on two complementary building blocks:

* `LazyLoadingSection`: A React wrapper that delays the rendering of content (e.g., blocks) and hydration of non-critical blocks until the content and non-critical blocks approach the viewport.
* `ViewportObserver`: A utility that detects when content is approaching the viewport and triggers the `LazyLoadingSection` to render the content.

Together, these two components help reduce initial page load time by delaying rendering, hydration, and resource fetching until content is near the viewport. This is especially useful for users on slower devices and networks.

Yes

No

Yes

User loads page

Is section critical or above the fold?

Section is server-rendered

Section is wrapped with LazyLoadingSection

ViewportObserver detects section approaching view

Section is rendered and hydrated

Content becomes visible to user

Content visible to user and search engines

### Server-Side Rendering (SSR) and lazy loading

Server-side rendering provides crucial HTML in the initial document, allowing users and crawlers to access content without executing JavaScript. **Sections wrapped with lazy loading are not included in this initial HTML.** They are only rendered and hydrated when the sections are near the viewport.

For PDP and PLP templates, you can add the **Skip lazy loading** flag to a custom section to disable lazy loading for that section only. With lazy loading disabled, bots can access the content immediately without scrolling or executing scripts, which may speed up the crawling process.

![{"base64":"  ","img":{"width":617,"height":206,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":9620,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/skip-lazy-loading___2a0ca0c7a90d61cda31c2ce9200e377f.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/skip-lazy-loading___2a0ca0c7a90d61cda31c2ce9200e377f.png)

### SEO and performance trade-off

Search engines, such as Google, use crawlers to find and index web content. Although modern crawlers can run JavaScript to render pages, this process can be slow or incomplete. Therefore, it is important to ensure that key commerce content is included in the initial HTML so that it is indexed.

Lazy loading can improve Largest Contentful Paint (LCP) and Interaction to Next Paint (INP), which are important SEO ranking factors. By deferring heavy resources, lazy loading helps improve:

* **LCP:** By prioritizing the hero image and other above-the-fold content, the main content loads quickly.
* **INP:** Deferring heavy JavaScript reduces main-thread contention, making the page more responsive.

On the other hand, rendering all content upfront can speed up discovery for crawlers, but it can also consume crawl budget, slow down the indexing of other pages on your site, and negatively impact user-perceived performance due to the increased initial payload size.

## Before you begin

### Update the `@faststore/cli` package

Make sure the `@faststore/cli` package is updated to the latest version. To update it, follow the instructions in [Updating the @faststore/cli package version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-updating-the-cli-package-version).

### Configure SEO for PLPs and PDPs

Set up title and description templates in the [discovery.config.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-config-options) file to dynamically generate metadata for PLPs and PDPs, such as collections, categories, subcategories, or brands. For instructions, see the [Configuring SEO for PLPs and PDPs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-configuring-seo-for-plp-and-pdp) guide.

## Instructions

### Step 1: Deciding when to lazy load

Lazy loading should be used strategically to ensure that crawlers can access critical content without unnecessary overhead. When essential information is missing from the initial HTML, search engines may be forced to execute JavaScript, such as rendering PLP product grids, which increases crawl budget usage.

Because of these trade-offs, deciding when to apply or skip lazy loading requires weighing SEO impact, performance goals, and user experience.

#### When to use lazy loading

| Context                                            | Benefit                                                                                | Example                                                                                |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **To load content that isn't immediately visible** | Improves initial page load speed by delaying non-critical assets that are below the fold.                           | A homepage with promotional banners and lookbooks that load as the user scrolls down the page.                                                                                |
| **To improve page speed for a media-heavy page**   | Optimizes resource usage and ensures the most important content is prioritized and loads first.                     | A PDP includes a "Complete the Look" carousel at the bottom. Since this is a supplementary suggestion, lazy loading ensures the main product details are prioritized and the carousel images load only when the user scrolls to that section. |
| **The content doesn't affect SEO or crawling**     | It will not negatively impact search engine visibility since the content isn't critical for SEO or structured data. | A store's homepage has a "Fashion Trends" slider in the footer with inspirational videos. Since this content does not impact structured data for SEO, lazy loading it will not negatively affect search engine visibility.                    |
| **To balance server load during high traffic**     | It reduces server spikes by loading only the images visible on the screen, keeping the browsing experience fast.    | Category pages like "Dresses" or "Jeans" may have hundreds of product image previews. With lazy loading, only the images visible above the fold load immediately, which reduces server spikes and keeps the browsing experience fast.         |

#### When not to use lazy loading

| Context                                         | Reason to avoid                                                                                | Example                                                                                |
| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Hiding critical page elements from crawlers** | Search engines might not see all content if it is lazy-loaded, potentially harming your site's SEO.                         | A "New Arrivals" grid on your homepage displays featured items from several categories. Lazy loading is skipped here to ensure search engines can index all new products shown in this grid. |
| **Disabling lazy loading globally**             | Apply lazy loading selectively. Rendering everything upfront increases payloads, exhausts crawl budget, and slows indexing. | A homepage with numerous campaign images should lazy load secondary media while keeping critical content immediately available.                                                              |

### Step 2: Controlling lazy loading for custom sections

FastStore lazy-loads sections to improve store performance. However, some [custom sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section), such as those containing H1 headers, may need to appear in the initial HTML for SEO purposes. To disable lazy loading for these sections, consider the following:

1. Open the `cms/faststore/sections.json` file in your project.
2. Locate your custom section in the file, add the `skipLazyLoadingSection` property, and set it to `true`. For example, if your custom section is named `CustomSEOSection`, the configuration would look like this:
`1
...
2
{
3
 "name": "CustomSEOSection",
4
 "schema": {
5
 "title": "SEO Section",
6
 "description": "Custom H1 configuration",
7
 "type": "object",
8
 "required": ["skipLazyLoadingSection"],
9
 "properties": {
10
 "skipLazyLoadingSection": {
11
 "title": "Skip lazy loading",
12
 "type": "boolean",
13
 "default": true
14
 }
15
 }
16
 }
17
}
`

Enabling this feature ensures that the section's content is included in the initial, server-rendered HTML (i.e., lazy loading is skipped for that section).

1. To display PLP data (e.g., collection names) in a custom section, use the [usePLP()](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-consuming-api-extensions%23consuming-api-extensions-data-from-custom-sections) hook. For PDP data (e.g., product titles), use the [usePDP()](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-consuming-api-extensions%23hooks-for-consuming-api-extension-data) hook.
`usePLP()` hook

`1

import { usePLP } from "@faststore/core";

2

3

export default function CustomPLPName() {

4

 const context = usePLP();

5

6

 return (

7

 <section>

8

 <h1>Testing - {context.data?.collection?.seo?.title ?? "PLP"}!</h1>

9

 </section>

10

 );

11

}

`

`usePDP()` hook

`1

import { usePDP } from "@faststore/core";

2

3

export default function CustomPDPName() {

4

 const context = usePDP();

5

6

 return (

7

 <section>

8

 <h1>Testing - {context.data?.product?.seo?.title ?? "PDP"}!</h1>

9

 </section>

10

 );

11

}

`

### Step 3: Sending the changes to the Headless CMS

1. Open the terminal and run `yarn cms-sync` to synchronize your local changes with the Headless CMS.
2. Go to the VTEX Admin and access **Storefront > Headless CMS**.
3. Access the **Product List Page** or **Product Details Page** Content Type. For this example, we will use the **Product List Page** Content Type.
> Repeat these steps for the **Product Details Page** Content Type if you are optimizing a PDP section.
4. Add the custom section you created. The **Skip lazy loading** option will appear at the end of the section.
![{"base64":"  ","img":{"width":617,"height":206,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":9620,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/skip-lazy-loading___2a0ca0c7a90d61cda31c2ce9200e377f.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/skip-lazy-loading___2a0ca0c7a90d61cda31c2ce9200e377f.png)
5. Click `Save` and publish the changes you made.
6. Click `Preview`.
7. Search for a collection name to see the new section. For example, if you have a collection named "Just Arrived," you can view it by adding its slug to your store's URL (e.g., `https://mystore.vtex.app/just-arrived`). You will see something similar to the following:
![{"base64":"  ","img":{"width":1340,"height":334,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20357,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/custom-section___48bf7d70d678b4fb4ddae39aa0cf14cb.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/custom-section___48bf7d70d678b4fb4ddae39aa0cf14cb.png)
**PDP example**
For PDPs, test with a product URL (e.g., `https://mystore.vtex.app/p/blue-shirt`). The image below shows the **New Arrivals** title on the PDP.

### Step 4: Checking if the custom section is visible to search engines

To ensure that the custom section is present in the initial HTML response, follow these steps:

1. In the browser, right-click anywhere on the page and select **Inspect** from the context menu.
2. In the **Developer Tools** panel, click the **Network** tab. Ensure that the **All filter** is selected.
> To focus only on the main HTML document, you can filter by **Doc** in the filter bar. This will show only the initial HTML request, making it easier to inspect the page's source code.
3. Reload the page while the Developer Tools are open. This will capture all network requests made during the page load.
4. In the **Name** column of the **Network** tab, look for the request corresponding to the page you are inspecting. In our example, this would be `just-arrived`.
5. Click the **Response** tab in this panel.
6. If the section is in the initial HTML response, you will see the corresponding HTML code in the **Response** tab. For example:
![{"base64":"  ","img":{"width":966,"height":172,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":18500,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/developer-tools-panel___9240a6f4b36ce8151f6d346e78674f2b.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/developer-tools-panel___9240a6f4b36ce8151f6d346e78674f2b.png)

If the section is in the initial HTML, as in the example above, it means it is not lazy-loaded and is visible to search engines, confirming it was rendered server-side (lazy loading was skipped).

## Best practices after lazy loading

After adjusting lazy loading, monitor its impact and iterate. Focus on measurable outcomes and protect both crawlability and Core Web Vitals.

### Verifying PLP and PDP settings

* PLP server-side HTML: Ensure the category title and first set of product tiles (name, price, primary image) are present in the initial HTML response.
* PDP server-side HTML: Ensure the product title, price, first image, and variant selector render in the initial HTML.
* Images: The first visible image should not be lazy-loaded. Use `fetchpriority="high"` on the LCP image when appropriate; add `decoding="async"` and proper `srcset`/`sizes` for responsive images.
* Placeholders: Reserve space (via `width`/`height` or `aspect-ratio`) for deferred content to prevent CLS.
* Controls: Filters and sorting that are SEO-relevant should be usable without JavaScript for crawlability (progressive enhancement where feasible).

### Monitoring Core Web Vitals

* Track LCP, INP, and CLS using PageSpeed Insights, Lighthouse, and Search Console's Core Web Vitals report.
* Identify the LCP element and confirm it is server-rendered and not lazy-loaded; preconnect/preload critical origins/assets when needed.
* Defer non-critical scripts or schedule them with idle callbacks; move heavy third-party tags out of the initial viewport to protect INP.
* Use skeletons or low-quality image placeholders (LQIP/blur) for deferred media; ensure reserved space to avoid shifts.

### Analyzing through Google Search Console

* Use URL Inspection > Test Live URL to review the rendered HTML and screenshot of Googlebot's view.
* Verify critical PLP/PDP content is present in the initial HTML and also visible post-render.
* Avoid custom attributes for source URLs (e.g., `data-src`). Prefer standard `src` and apply `loading="lazy"` only to below-the-fold images.
* Monitor Indexing/Coverage and Core Web Vitals (CWV) reports for templates you changed; compare before/after.

### Rollout and verification

* Roll out gradually and compare KPIs (CWV, bounce rate, time to first interaction, indexing) before full deployment.
* For infinite scroll, expose crawlable pagination or a discoverable "Load more" URL pattern to deeper content.
* In the Developer Tools' Network tab, verify the initial document Response includes the critical PLP/PDP HTML expected by crawlers.

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/seo/optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp.mdx)

[Configuring SEO for PLPs and PDPs« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-configuring-seo-for-plp-and-pdp)[Validating UTM tracking in FastStoreNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-validating-utm-tracking-in-faststore)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

ON THIS PAGE

[Key concepts before implementation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23key-concepts-before-implementation)

[Server-Side Rendering (SSR) and lazy loading](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23server-side-rendering-ssr-and-lazy-loading)[SEO and performance trade-off](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23seo-and-performance-trade-off)

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23before-you-begin)

[Update the @faststore/cli package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23update-the-faststorecli-package)[Configure SEO for PLPs and PDPs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23configure-seo-for-plps-and-pdps)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23instructions)

[Step 1: Deciding when to lazy load](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23step-1-deciding-when-to-lazy-load)[Step 2: Controlling lazy loading for custom sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23step-2-controlling-lazy-loading-for-custom-sections)[Step 3: Sending the changes to the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23step-3-sending-the-changes-to-the-headless-cms)[Step 4: Checking if the custom section is visible to search engines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23step-4-checking-if-the-custom-section-is-visible-to-search-engines)

[Best practices after lazy loading](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23best-practices-after-lazy-loading)

[Verifying PLP and PDP settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23verifying-plp-and-pdp-settings)[Monitoring Core Web Vitals](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23monitoring-core-web-vitals)[Analyzing through Google Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23analyzing-through-google-search-console)[Rollout and verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23rollout-and-verification)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/seo/optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp.mdx)

Copy page

On this page

ON THIS PAGE

[Key concepts before implementation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23key-concepts-before-implementation)

[Server-Side Rendering (SSR) and lazy loading](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23server-side-rendering-ssr-and-lazy-loading)[SEO and performance trade-off](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23seo-and-performance-trade-off)

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23before-you-begin)

[Update the @faststore/cli package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23update-the-faststorecli-package)[Configure SEO for PLPs and PDPs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23configure-seo-for-plps-and-pdps)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23instructions)

[Step 1: Deciding when to lazy load](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23step-1-deciding-when-to-lazy-load)[Step 2: Controlling lazy loading for custom sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23step-2-controlling-lazy-loading-for-custom-sections)[Step 3: Sending the changes to the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23step-3-sending-the-changes-to-the-headless-cms)[Step 4: Checking if the custom section is visible to search engines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23step-4-checking-if-the-custom-section-is-visible-to-search-engines)

[Best practices after lazy loading](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23best-practices-after-lazy-loading)

[Verifying PLP and PDP settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23verifying-plp-and-pdp-settings)[Monitoring Core Web Vitals](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23monitoring-core-web-vitals)[Analyzing through Google Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23analyzing-through-google-search-console)[Rollout and verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp/docs/guides/faststore/seo-optimizing-seo-by-managing-lazy-loading-on-plp-and-pdp%23rollout-and-verification)

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 storefront best practices 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/storefront-best-practices/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/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/storefront-best-practices/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/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/storefront-best-practices/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/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/storefront-best-practices/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-best-practices)

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-accessibility)

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-analytics)

[Performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-performance)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-seo)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-best-practices)

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-accessibility)

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-analytics)

[Performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-performance)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-seo)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/storefront-development)

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-best-practices)

Storefront best practices

Learn how to optimize your VTEX storefront by following best practices.

To maintain a high-performing website, you should follow best practices when developing your storefront. By implementing effective strategies, you can create a seamless shopping journey that attracts and retains customers.

The guides in this section explore key guidelines related to the main factors that influence the competitiveness of your ecommerce site:

* **Accessibility:** Make your store accessible to all users, including those with disabilities.
* **Analytics:** Leverage data-driven insights to understand customer behavior and make informed decisions.
* **Performance:** Optimize your website by ensuring fast load times, minimizing slowdowns, and enhancing the overall user experience.
* **SEO:** Improve your website visibility in search engine results through effective search engine optimization (SEO) practices.

## Guides in this section

[AccessibilityMake sure your store is accessible to all by following these best practices for ecommerce accessibility.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-accessibility)[AnalyticsLearn how to leverage data to drive informed decisions and optimize your VTEX store performance.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-analytics)[PerformanceExplore best practices and tools for continuously optimizing website performance.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-performance)[SEODiscover strategies to improve your ecommerce SEO.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-seo)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

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/storefront-best-practices/storefront-best-practices.md)

[Control to disable the canonical tag« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices//docs/guides/control-to-disable-the-canonical-tag)[AccessibilityNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices//docs/guides/storefront-accessibility)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

ON THIS PAGE

[Guides in this section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-best-practices%23guides-in-this-section)

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/storefront-best-practices/storefront-best-practices.md)

Copy page

On this page

ON THIS PAGE

[Guides in this section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-best-practices/docs/guides/storefront-best-practices%23guides-in-this-section)

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] How do I use the VTEX product summary 2.91.0 ProductSummaryBrand app? Provide documentation and configuration details.

[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/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/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/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/vtex-io-apps)

Product Summary Brand

[vtex.product-summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary)

Version: 2.91.0

Latest version: 2.91.0

![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNoYGD6v3v+/6ask37WACanBhm9KoMJAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/-Deprecated-red","width":73,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Deprecated-red)

> The Product Summary Brand block has been deprecated in favor of the [Product Brand](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productbrand) app from the [Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/store-components) collection. Although support for this block is still granted, we strongly recommend updating your store theme with the Product Brand block.

Product Summary Brand is a block exported by the [Product Summary app](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary) responsible for rendering the brand of the product.

![{"base64":"  ","img":{"width":2854,"height":1578,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":661337,"url":"https://user-images.githubusercontent.com/52087100/70259346-bb081f80-176c-11ea-84db-5785c45829ce.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/70259346-bb081f80-176c-11ea-84db-5785c45829ce.png)

## Before you start

Ensure that you have registered [brands](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-is-a-brand--QU07yhHoaWcEYseEucOQW) in your store. To do so, follow the [How to register brands](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/registering-brands--tutorials%5F1414) guide.

## Configuration

1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:

`1

 "dependencies": {

2

 "vtex.product-summary": "2.x"

3

 }

`

1. Add the `product-summary-brand` block to your store theme as a child of the `product-summary.shelf` block. For example:

`1

 "product-summary.shelf": {

2

 "children": [

3

 "product-summary-image",

4

 "product-summary-name",

5

+ "product-summary-brand",

6

 "product-summary-attachment-list",

7

 "product-summary-space",

8

 "product-summary-column#1"

9

 ]

10

 },

`

See also

[Vtex.product SummaryVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/apps/vtex.product-summary)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Before you start](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand%23before-you-start)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand/docs/apps/vtex.product-summary@2.91.0/ProductSummaryBrand%23configuration)

Was this helpful?

[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 performing ab testing between legacy and io 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-performing-ab-testing-between-legacy-and-io/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/ab-tests)

[Running A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-running-native-ab-testing)

[A/B testing Legacy and IO store versions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/ab-tests)

[Running A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-running-native-ab-testing)

[A/B testing Legacy and IO store versions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/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-performing-ab-testing-between-legacy-and-io/docs/app-development)

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/ab-tests)

[A/B testing Legacy and IO store versions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io)

A/B testing Legacy and IO store versions

In this guide, you'll learn how to perform A/B testing between your Legacy CMS store and your Store Framework store. This test helps you determine which workspace delivers the highest conversion rate for your store.

The A/B test compares two versions of your store: the live Legacy CMS store in the `master` workspace and the Store Framework store in the `production` workspace, capable of receiving user traffic but not yet live.

Legacy CMS store

master Workspace

A/B Test

Store Framework store

production Workspace

Winner workspace

## Before you begin

* **Install the VTEX IO CLI:** The CLI allows you to log in to your VTEX account, manage workspaces, and develop new apps. For installation instructions, refer to the [Installing VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference) guide.
* **Have a Store Framework theme ready:** Ensure that you have a Store Framework theme ready for your store. If you haven't started building with Store Framework yet, follow the [Storefront track](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3) for step-by-step guidance on creating your store from scratch.
* **Verify your Edition App version:** Confirm that your `development` workspace has the `vtex.edition-store@5.x` Edition app installed by running `vtex edition get` in your terminal. If it's not installed, [open a ticket with the VTEX support team](https://read.calvincode.net/reader?url=https://help-tickets.vtex.com/smartlink/sso/login/zendesk?%5Fga=2.222513819.1487123273.1647865109-1001456323.1619912759) to request its installation in the new Development workspace.

## Instructions

### Step 1 - Setting up the Legacy CMS

After creating your Store Framework theme and making changes in your `development` workspace, set up the Legacy CMS environment to conduct the test. This setup allows you to evaluate your changes with real user traffic.

1. [Create a production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-production-workspace) to test your changes with some user traffic.
2. Run the `vtex use master` command in your terminal to perform the steps below in the `master` workspace. The `master` workspace must be set to the `vtex.edition-business@0.x` [Edition app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app).
3. Install the `vtex.colossus-legacy-proxy@@1.8.9-hkignore` app by running the following command. This app is responsible for routing requests within the VTEX IO environment during an A/B test between IO and Legacy CMS.
`1
vtex install vtex.colossus-legacy-proxy@@1.8.9-hkignore
`
> Ensure the app version is `1.8.9-hkignore`. Using a different version will prevent the store from responding correctly. Note that the `vtex.colossus-legacy-proxy@1.8.9-hkignore` directs traffic to the `master` workspace in Legacy CMS Portal, while the `vtex.colossus-legacy-proxy@2.x` version routes traffic to the VTEX IO workspace.

### Step 2 - Requesting an A/B test

Now that you have set up the Legacy CMS environment for testing, you can request an A/B test. This step lets you compare the performance and user experience between your Legacy CMS environment and the VTEX IO environment, helping you make informed decisions about your store.

1. [Open a ticket with the VTEX support team](https://read.calvincode.net/reader?url=https://help-tickets.vtex.com/smartlink/sso/login/zendesk?%5Fga=2.222513819.1487123273.1647865109-1001456323.1619912759) to request the redirection of the `production` workspace to be rendered in VTEX IO. Please provide the following information in your ticket:
   * Account name
   * `production` workspace
   * Indicate whether the store features a distinct storefront for mobile devices.
2. Once the `production` workspace is ready, you can configure the A/B test as outlined in the [Running native A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing) guide.

### Step 3 - Validating if the A/B test is running

To ensure the A/B test is active, send a `GET` request to the following API: `http://platform.io.vtex.com/{{accountName}}/_abtest/parameters`.

> Include the `VtexIdclientAutCookie` header from the account you want to get the information. For example: `VtexIdclientAutCookie: {{VtexIdclientAutCookie}}`

The response should look something like this, indicating traffic distribution:

`1

"master": {

2

 "A": 9000,

3

 "b": 1

4

},

5

"wsio": {

6

 "A": 1000,

7

 "b": 1

8

}

`

This example shows that the `master` is receiving 90% of the traffic, and the `wsio` workspace is receiving 10%.

### Step 4 - Migrating your changes

After completing the A/B test and deciding to migrate your store to Store Framework, [open a ticket to the VTEX support team](https://read.calvincode.net/reader?url=https://help-tickets.vtex.com/smartlink/sso/login/zendesk?%5Fga=2.222513819.1487123273.1647865109-1001456323.1619912759).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/_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/App-Guides/ab-tests/vtex-io-documentation-performing-ab-testing-between-legacy-and-io.md)

[Running A/B tests« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io//docs/guides/vtex-io-documentation-running-native-ab-testing)[DeploymentNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io//docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23instructions)

[Step 1 - Setting up the Legacy CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23step-1-setting-up-the-legacy-cms)[Step 2 - Requesting an A/B test](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23step-2-requesting-an-ab-test)[Step 3 - Validating if the A/B test is running](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23step-3-validating-if-the-ab-test-is-running)[Step 4 - Migrating your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23step-4-migrating-your-changes)

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/App-Guides/ab-tests/vtex-io-documentation-performing-ab-testing-between-legacy-and-io.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23instructions)

[Step 1 - Setting up the Legacy CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23step-1-setting-up-the-legacy-cms)[Step 2 - Requesting an A/B test](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23step-2-requesting-an-ab-test)[Step 3 - Validating if the A/B test is running](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23step-3-validating-if-the-ab-test-is-running)[Step 4 - Migrating your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io%23step-4-migrating-your-changes)

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=)