Optimizing SEO by managing lazy loading on Product Listing Pages (PLPs)

SEO

By default, FastStore improves performance by wrapping store sections in LazyLoadingSection and ViewportObserver components. These components delay loading non-essential sections until needed, such as when a user scrolls near them. This approach reduces initial page load times and improves user experience, particularly on slower networks or devices.

While lazy loading improves performance, it can harm SEO. Search engine crawlers often do not execute JavaScript or wait for dynamically loaded content. As a result, critical sections like product grids on category pages may not be indexed. For instance, if a user accesses the gym clothes collection, its product listing might not appear in search results if it's not included in the initial HTML.

In this guide, learn how to optimize SEO by controlling lazy loading for custom sections in FastStore.

Disabling lazy loading may increase initial page load time. Use it only when necessary.

Before you begin

Update the `@faststore/cli` package

Make sure the @faststore/cli package is updated to the latest version. If you need to update it, follow the instructions on Updating the '@fastore/cli' package version.

Configure SEO for PLPs

Set up title and description templates in the discovery.config.js file to dynamically generate metadata for PLPs, such as collections, categories, subcategories, or brands. For instructions, see the Configuring SEO for Product Listing Pages (PLP) guide.

Instructions

Step 1: Controlling lazy loading for custom sections

FastStore lazy-loads sections for performance reasons. However, certain custom sections, 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:

Open the cms/faststore/sections.json file in your project.
Locate your custom section in the file and add the skipLazyLoadingSection property, and set it to true. For example, if your custom section is named CustomPLPName, the configuration would look like this:

_17... _17{ _17 "name": "CustomPLPName", _17 "schema": { _17 "title": "Collection Name", _17 "description": "Custom H1 configuration", _17 "type": "object", _17 "required": ["skipLazyLoadingSection"], _17 "properties": { _17 "skipLazyLoadingSection": { _17 "title": "Skip lazy loading", _17 "type": "boolean", _17 "default": true _17 } _17 } _17 } _17}
To display data related to the PLP (e.g., collection, category, or brand names) in a custom section, use the usePLP() hook in the section’s file:

_11import { usePLP } from '@faststore/core' _11 _11export default function CustomPLPName() { _11 const context = usePLP() _11 _11 return ( _11 <section> _11 <h1>Testing - {context.data?.collection?.seo?.title ?? 'PLP'}!</h1> _11 </section> _11 ) _11}

Step 2: Sending the changes to the Headless CMS

Open the terminal and run faststore cms-sync to sync your local changes with the Headless CMS.
Go to the VTEX Admin, access Storefront > Headless CMS.
Access the Product List Page Content Type.
Add the custom section you created. At the end of the section, you’ll notice the Skip lazy loading option.

${"base64":" ","img":{"width":759,"height":198,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":9797,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/skip-lazy-loading-option___32bda38cafbf728774a30ad9ada8be01.png"}}$
Click Save and publish the changes you made.
Click Preview.
Search for a collection name to see your new section. For example, if you have a Just arrived collection, add its slug to the URL, for example: https://mystore.vtex.app/just-arrived. You’ll be able to 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"}}$

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

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

In the browser, right-click anywhere on the page and select Inspect from the context menu.
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.
Reload the page while the Developer Tools are open. This will capture all network requests made during the page load.
In the Name column of the Network tab, look for the request corresponding to the page you're inspecting In our example just-arrived.
Click the Response tab in this panel.
If the section is present 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"}}$

If the section is present in the initial HTML, as in the example above, it means it is not lazy-loaded and is visible to search engines.