Optimizing menus

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

The menu is one of the critical performance points in a store. Because it is present on (almost) all pages, when poorly optimized, it can cause any page to have performance problems regardless of how well implemented it is. In this step, we will learn how to optimize its implementation to not only make it possible to edit it on the Site Editor but also to reduce the overhead of blocks needed in its definition.

Props vs children

In general, a menu implementation in a store follows the following pattern:


_26{
_26  "vtex.menu@2.x:menu#category-menu": {
_26    "children": [
_26      "menu-item#category-electronics",
_26      "menu-item#category-major-appliances",
_26      "menu-item#category-small-appliances"
_26    ]
_26  },
_26  "menu-item#category-electronics": {
_26    "props": {
_26      "id": "menu-item-category-electronics",
_26      "type": "custom",
_26      "iconId": null,
_26      "highlight": false,
_26      "itemProps": {
_26        "categoryId": 153,
_26        "type": "internal",
_26        "href": "/electronics/",
_26        "noFollow": true,
_26        "tagTitle": "Electronics",
_26        "text": "Electronics"
_26      }
_26    }
_26  },
_26  ...
_26}

There are two problems with implementing a menu this way:

By using children, the menu now has an implementation similar to that of a layout, which means that all the content inside it is not easily editable in the Site Editor
For each new menu that is created, it is necessary to define a new block, which increases the overhead of the blocks that are necessary to compose a page

Activity

To improve the menu performance of our _ Appliance Store _, go to the /store/blocks/header/category-menu.jsonc file and remove your children section:

_10{ _10 "vtex.menu@2.x:menu#category-menu": { _10- "children": [ _10- "menu-item#category-electronics", _10- "menu-item#category-major-appliances", _10- "menu-item#category-small-appliances" _10- ] _10 } _10 ... _10}

NOTE: Do not delete the definitions of these blocks, they are being used elsewhere

Now add a new section of props and an array of items:

_10{ _10 "vtex.menu@2.x:menu#category-menu": { _10+ "props": { _10+ "items": [] _10+ } _10 } _10 ... _10}
To wrap it up, for each of the menu-items we had ("menu-item#category-electronics";"menu-item#category-major-appliances";"menu-item#category-small-appliances "), add your props as array items that we created:

_21{ _21 "vtex.menu@2.x:menu#category-menu": { _21 "props": { _21 "items": [ _21+ { _21+ "id": "menu-item-category-electronics", _21+ "type": "custom", _21+ "iconId": null, _21+ "highlight": false, _21+ "itemProps": { _21+ "categoryId": 153, _21+ "type": "internal", _21+ "href": "/electronics/", _21+ "noFollow": true, _21+ "tagTitle": "Electronics", _21+ "text": "Electronics" _21+ } _21+ } _21+ ... _21 ] _21 }

The expected result is a menu exactly the same as the one we had, but now we are able to control it through the Site Editor and add new items.

Answer sheet

See answer sheet for category-menu.jsonc

category-menu.jsonc


_115// store/blocks/header/category-menu.json
_115{
_115  "vtex.menu@2.x:menu#category-menu": {
_115    "props": {
_115      "items": [
_115        {
_115          "id": "menu-item-category-electronics",
_115          "type": "custom",
_115          "iconId": null,
_115          "highlight": false,
_115          "itemProps": {
_115            "categoryId": 153,
_115            "type": "internal",
_115            "href": "/electronics/",
_115            "noFollow": true,
_115            "tagTitle": "Electronics",
_115            "text": "Electronics"
_115          }
_115        },
_115        {
_115          "id": "menu-item-category-major-appliances",
_115          "type": "custom",
_115          "iconId": null,
_115          "highlight": false,
_115          "itemProps": {
_115            "categoryId": "151",
_115            "type": "internal",
_115            "href": "/major-appliances/",
_115            "noFollow": true,
_115            "tagTitle": "Major Appliances",
_115            "text": "Major Appliances"
_115          }
_115        },
_115        {
_115          "id": "menu-item-category-small-appliances",
_115          "type": "custom",
_115          "iconId": null,
_115          "highlight": false,
_115          "itemProps": {
_115            "categoryId": 152,
_115            "type": "internal",
_115            "href": "/small-appliances",
_115            "noFollow": true,
_115            "tagTitle": "Small appliances",
_115            "text": "Small appliances"
_115          }
_115        }
_115      ]
_115    }
_115  },
_115  "menu-item#category-electronics": {
_115    "props": {
_115      "id": "menu-item-category-electronics",
_115      "type": "custom",
_115      "iconId": null,
_115      "highlight": false,
_115      "itemProps": {
_115        "categoryId": 153,
_115        "type": "internal",
_115        "href": "/electronics/",
_115        "noFollow": true,
_115        "tagTitle": "Electronics",
_115        "text": "Electronics"
_115      }
_115    }
_115  },
_115
_115  "menu-item#category-major-appliances": {
_115    "props": {
_115      "id": "menu-item-category-major-appliances",
_115      "type": "custom",
_115      "iconId": null,
_115      "highlight": false,
_115      "itemProps": {
_115        "categoryId": "151",
_115        "type": "internal",
_115        "href": "/major-appliances/",
_115        "noFollow": true,
_115        "tagTitle": "Major Appliances",
_115        "text": "Major Appliances"
_115      }
_115    }
_115  },
_115  "menu-item#category-small-appliances": {
_115    "props": {
_115      "id": "menu-item-category-small-appliances",
_115      "type": "custom",
_115      "iconId": null,
_115      "highlight": false,
_115      "itemProps": {
_115        "categoryId": 152,
_115        "type": "internal",
_115        "href": "/small-appliances",
_115        "noFollow": true,
_115        "tagTitle": "Small appliances",
_115        "text": "Small appliances"
_115      }
_115    }
_115  },
_115  "menu-item#login": {
_115    "props": {
_115      "id": "menu-item-custom-login",
_115      "type": "custom",
_115      "iconId": null,
_115      "highlight": false,
_115      "itemProps": {
_115        "type": "internal",
_115        "href": "/account",
_115        "noFollow": true,
_115        "tagTitle": "My account",
_115        "text": "My account"
_115      }
_115    }
_115  }
_115}