EDU-13773 - Update 'Enabling performance settings' #2094
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Preview LinksOpen this URL to set up the portal with this branch changes. You can now access the edited pages with the following URLs: |
Navigation Preview LinkNo changes detected in the navigation.json file |
|
Frontmatter errors in
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -41,19 +31,19 @@ If you have implemented [manual optimizations](#manual-optimizations), make sure | |||
| >⚠️ Replace the values between the curly braces based on your scenario. | |||
|
|
|||
| 3. Using your browser, access the Admin for that workspace. | |||
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
MD029/ol-prefix Ordered list item prefix [Expected: 1; Actual: 3; Style: 1/2/3]
| @@ -41,19 +31,19 @@ | |||
| >⚠️ Replace the values between the curly braces based on your scenario. | |||
|
|
|||
| 3. Using your browser, access the Admin for that workspace. | |||
| 4. From the account's Admin panel, go to Store Settings > Storefront > Store > Advanced. | |||
| 4. In the account's Admin panel, go to **Store Settings > Storefront > Store > Advanced**. | |||
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
MD029/ol-prefix Ordered list item prefix [Expected: 2; Actual: 4; Style: 1/2/3]
| @@ -41,19 +31,19 @@ | |||
| >⚠️ Replace the values between the curly braces based on your scenario. | |||
|
|
|||
| 3. Using your browser, access the Admin for that workspace. | |||
| 4. From the account's Admin panel, go to Store Settings > Storefront > Store > Advanced. | |||
| 4. In the account's Admin panel, go to **Store Settings > Storefront > Store > Advanced**. | |||
| 5. Follow the instructions in the [Store-settings](#store-settings) section to activate the desired features, then save the changes. | |||
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
MD029/ol-prefix Ordered list item prefix [Expected: 3; Actual: 5; Style: 1/2/3]
| @@ -41,19 +31,19 @@ | |||
| >⚠️ Replace the values between the curly braces based on your scenario. | |||
|
|
|||
| 3. Using your browser, access the Admin for that workspace. | |||
| 4. From the account's Admin panel, go to Store Settings > Storefront > Store > Advanced. | |||
| 4. In the account's Admin panel, go to **Store Settings > Storefront > Store > Advanced**. | |||
| 5. Follow the instructions in the [Store-settings](#store-settings) section to activate the desired features, then save the changes. | |||
| 6. Access your store in the workspace you're using and check if the performance improvements were applied. | |||
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
MD029/ol-prefix Ordered list item prefix [Expected: 4; Actual: 6; Style: 1/2/3]
|
|
||
| This action enables stores in the Retail Media Network (RMN) pilot to place advertiser-sponsored products alongside organic search results. | ||
|
|
||
| >ℹ️ This action is available only for stores that have joined the RMN pilot. For more information, email **[email protected]**. |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
MD034/no-bare-urls Bare URL used [Context: "[email protected]"]
Grammar review summaryReview for
|
| --- | ||
|
|
||
| This guide outlines some practices you can implement to optimize store performance. | ||
| For ecommerce businesses, appealing offers, high-quality products, or brand recognition might not be enough to convert leads if the user experience falls short. Store website performance is essential to the user experience, directly impacting sales conversion rate, user session time, and other metrics. Every millisecond counts and affects the consumer decision-making process and your store's website rank in search engine results. |
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
Using the possessive form and 'ranking' is more grammatically precise and commonly used when referring to a site's position in search results, improving clarity.
Suggested change
| For ecommerce businesses, appealing offers, high-quality products, or brand recognition might not be enough to convert leads if the user experience falls short. Store website performance is essential to the user experience, directly impacting sales conversion rate, user session time, and other metrics. Every millisecond counts and affects the consumer decision-making process and your store's website rank in search engine results. | |
| For ecommerce businesses, appealing offers, high-quality products, or brand recognition might not be enough to convert leads if the user experience falls short. Store website performance is essential to the user experience, directly impacting sales conversion rate, user session time, and other metrics. Every millisecond counts and affects the consumer decision-making process and your store's website's ranking in search engine results. |
| * [Instructions](#instructions): Implementation details. | ||
| * [Optimization options](#optimization-options): Methods to enhance store performance. | ||
| * [Store settings](#store-settings): Actions that can be performed directly in the VTEX Admin. | ||
| * [Manual optimizations](#manual-optimizations): Additional manual actions that can be made directly in the project source code. |
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
'Performed' or 'applied' is a more formal and appropriate verb in technical documentation than 'made' when referring to actions or optimizations.
Suggested change
| * [Manual optimizations](#manual-optimizations): Additional manual actions that can be made directly in the project source code. | |
| * [Manual optimizations](#manual-optimizations): Additional manual actions that can be performed directly in the project source code. |
| @@ -41,19 +31,19 @@ | |||
| >⚠️ Replace the values between the curly braces based on your scenario. | |||
|
|
|||
| 3. Using your browser, access the Admin for that workspace. | |||
| 4. From the account's Admin panel, go to Store Settings > Storefront > Store > Advanced. | |||
| 4. In the account's Admin panel, go to **Store Settings > Storefront > Store > Advanced**. | |||
| 5. Follow the instructions in the [Store-settings](#store-settings) section to activate the desired features, then save the changes. | |||
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
The link text should match the corresponding heading ('Store settings' on line 54) for consistency and accurate navigation.
Suggested change
| 5. Follow the instructions in the [Store-settings](#store-settings) section to activate the desired features, then save the changes. | |
| 5. Follow the instructions in the [Store settings](#store-settings) section to activate the desired features, then save the changes. |
| @@ -118,51 +117,103 @@ | |||
| __RUNTIME__ = {"account":"vtexstore","amp":false,"bindingChanged":false,"binding":{"id":"aacb04t3-a8fa-4bab-b5bd-2d654d20dcd8","canonicalBaseAddress":"vtexstore.vtex.com"},"culture":{"availableLocales":[],"country":"USA","currency":"USD","language":"en","locale":"en-US","customCurrencyDecimalDigits":null,"customCurrencySymbol":"$"},"production":true,"query":{},"settings":{.... | |||
| ``` | |||
|
|
|||
| This script holds a lot of important data about a web page, and it can be long, making it a demanding task for the browser. When lazy runtime is enabled, the script is broken into smaller ones to prevent the total blocking time of the store website from being compromised. | |||
| This script contains significant web page data and can be long, which demands processing from the browser. When you enable lazy runtime, the script is broken into smaller ones to prevent compromising the store website’s total blocking time. This helps to avoid lengthy tasks, leading to a faster store experience. | |||
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
Using the present participle 'demanding' creates a more concise and fluid sentence structure.
Suggested change
| This script contains significant web page data and can be long, which demands processing from the browser. When you enable lazy runtime, the script is broken into smaller ones to prevent compromising the store website’s total blocking time. This helps to avoid lengthy tasks, leading to a faster store experience. | |
| This script contains significant web page data and can be long, demanding processing from the browser. When you enable lazy runtime, the script is broken into smaller ones to prevent compromising the store website’s total blocking time. This helps to avoid lengthy tasks, leading to a faster store experience. |
| > ⚠️ Enabling this option might cause unexpected behaviors, such as gaps while scrolling. If you notice any side effects on the store website, [open a ticket with VTEX Support](https://help-tickets.vtex.com/smartlink/sso/login/zendesk). | ||
| #### Enable concurrent React mode | ||
|
|
||
| This action helps the store to stay responsive by adjusting to the user’s device capabilities and network speed. This means rendering tasks can be prioritized and interrupted based on your interactions or current network conditions. |
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
- The infinitive 'to' is often redundant after the verb 'help' and can be omitted for conciseness.
- Using 'user interactions' maintains a consistent third-person perspective throughout the technical documentation.
Suggested change
| This action helps the store to stay responsive by adjusting to the user’s device capabilities and network speed. This means rendering tasks can be prioritized and interrupted based on your interactions or current network conditions. | |
| This action helps the store stay responsive by adjusting to the user’s device capabilities and network speed. This means rendering tasks can be prioritized and interrupted based on user interactions or current network conditions. |
|
|
||
| This option adds a `#{Number}` in the HTML title. This helps both users and search engines know exactly which page they’re viewing and avoids duplicated titles, which can harm SEO. | ||
|
|
||
| >⚠️ It’s best suited for stores using traditional pagination. After enabling, review your page titles to make sure they stay clear and consistent. |
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
'Ensure' and 'remain' are more formal and precise verbs suitable for technical documentation, improving the overall tone.
Suggested change
| >⚠️ It’s best suited for stores using traditional pagination. After enabling, review your page titles to make sure they stay clear and consistent. | |
| >⚠️ It’s best suited for stores using traditional pagination. After enabling, review your page titles to ensure they remain clear and consistent. |
|
|
||
| #### Remove store name from title | ||
|
|
||
| This action removes the store name from the end of the page titles on product and category pages, resulting in shorter titles that may highlight product keywords better for SEO. |
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
'More effectively' is a more precise and formal adverbial phrase than 'better' in this context, enhancing clarity.
Suggested change
| This action removes the store name from the end of the page titles on product and category pages, resulting in shorter titles that may highlight product keywords better for SEO. | |
| This action removes the store name from the end of the page titles on product and category pages, resulting in shorter titles that may highlight product keywords more effectively for SEO. |
|
|
||
| #### Enable custom currency symbol | ||
|
|
||
| This action uses the `Currency Symbol` field defined in the trade policy. This ensures that prices are displayed in the format and symbol your customers expect, which is especially important for international or multi-currency stores. |
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
Removing 'your' maintains a consistent third-person perspective, which is standard in technical documentation.
Suggested change
| This action uses the `Currency Symbol` field defined in the trade policy. This ensures that prices are displayed in the format and symbol your customers expect, which is especially important for international or multi-currency stores. | |
| This action uses the `Currency Symbol` field defined in the trade policy. This ensures that prices are displayed in the format and symbol customers expect, which is especially important for international or multi-currency stores. |
|
|
||
| We recommend using the `__fold__` block for scrollable pages. This block allows you to specify which interface components load initially and which load as the user scrolls. Only the first visible blocks are loaded initially, while the ones _below the fold_ are lazy-loaded during scrolling. | ||
| Use the `__fold__` block for scrollable pages. This allows you to specify which interface components load initially(above the fold) and which are lazy-loaded as the user scrolls. |
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
A space is needed between 'initially' and the opening parenthesis for correct punctuation and readability.
Suggested change
| Use the `__fold__` block for scrollable pages. This allows you to specify which interface components load initially(above the fold) and which are lazy-loaded as the user scrolls. | |
| Use the `__fold__` block for scrollable pages. This allows you to specify which interface components load initially (above the fold) and which are lazy-loaded as the user scrolls. |
|
|
||
| In cases where a menu block doesn't have a submenu declared within it, configure it to use `menu-item` blocks as props. | ||
| If a menu block doesn't have a submenu, configure it to use `menu-item` blocks as props instead of children. | ||
|
|
||
| In the example below, the main `menu items` (Apparel & Accessories, Home & Decor, and More) can't be modified in their implementation. They must remain as children since they have a trigger to open a `submenu`. |
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
For consistency with other mentions (e.g., line 216, 222), menu-items should be hyphenated as it refers to a specific technical component or type of item.
Suggested change
| In the example below, the main `menu items` (Apparel & Accessories, Home & Decor, and More) can't be modified in their implementation. They must remain as children since they have a trigger to open a `submenu`. | |
| In the example below, the main `menu-items` (Apparel & Accessories, Home & Decor, and More) can't be modified in their implementation. They must remain as children since they have a trigger to open a `submenu`. |
There was a problem hiding this comment.
📝 [Grammar reviewer] reported by reviewdog 🐶
Using the possessive form 'store's' or rephrasing to 'main store pages' improves grammatical correctness and flow.
|
|
||
| This action enables stores in the Retail Media Network (RMN) pilot to place advertiser-sponsored products alongside organic search results. | ||
|
|
||
| >ℹ️ This action is available only for stores that have joined the RMN pilot. For more information, email **[email protected]**. |
There was a problem hiding this comment.
[markdownlint-fix] reported by reviewdog 🐶
Suggested change
| >ℹ️ This action is available only for stores that have joined the RMN pilot. For more information, email **[email protected]**. | |
| >ℹ️ This action is available only for stores that have joined the RMN pilot. For more information, email **<[email protected]>**. |
|
|
||
| ## Instructions | ||
|
|
||
| ### (Optional) Step 1 - Applying manual optimizations | ||
| ### Step 1 - (Optional) Applying manual optimizations |
There was a problem hiding this comment.
O título menciona "aplicar otimizações manualmente", mas o conteúdo desta seção é voltado para testar essas otimizações em um workspace de desenvolvimento. As instruções de como aplicar otimizações manuais estão em outra seção. Talvez ajustar o título para algo como "Step 1 - (Opcional) Testar otimizações manuais"?
Comment on lines
+15
to
+18
| * [Instructions](#instructions): Implementation details. | ||
| * [Optimization options](#optimization-options): Methods to enhance store performance. | ||
| * [Store settings](#store-settings): Actions that can be performed directly in the VTEX Admin. | ||
| * [Manual optimizations](#manual-optimizations): Additional manual actions that can be made directly in the project source code. |
There was a problem hiding this comment.
Suggested change
| * [Instructions](#instructions): Implementation details. | |
| * [Optimization options](#optimization-options): Methods to enhance store performance. | |
| * [Store settings](#store-settings): Actions that can be performed directly in the VTEX Admin. | |
| * [Manual optimizations](#manual-optimizations): Additional manual actions that can be made directly in the project source code. | |
| * [Instructions](#instructions): Instructions on how to enable and deploy performance optimizations in your store, including workspace setup, Admin configurations, and promoting the changes to production. | |
| * [Optimization options](#optimization-options): Methods to enhance store performance, categorized by: | |
| * [Store settings](#store-settings): Actions that can be performed directly in the VTEX Admin. | |
| * [Manual optimizations](#manual-optimizations): Additional manual actions for advanced performance, requiring direct code changes. |
There was a problem hiding this comment.
Sugerindo adicionar essas descrições para deixar claro que a seção "Instructions" refere-se ao processo de deploy das otimizações, enquanto as demais seções explicam como implementá-las.
| @@ -41,19 +31,19 @@ If you have implemented [manual optimizations](#manual-optimizations), make sure | |||
| >⚠️ Replace the values between the curly braces based on your scenario. | |||
There was a problem hiding this comment.
Suggested change
| >⚠️ Replace the values between the curly braces based on your scenario. | |
| >⚠️ Replace the values between the curly braces based on your scenario. |
There was a problem hiding this comment.
Veja se essa indentação corrige o que o bot está reclamando sobre a lista ordenada (exemplo).
| @@ -41,19 +31,19 @@ | |||
| >⚠️ Replace the values between the curly braces based on your scenario. | |||
|
|
|||
| 3. Using your browser, access the Admin for that workspace. | |||
| 4. From the account's Admin panel, go to Store Settings > Storefront > Store > Advanced. | |||
| 4. In the account's Admin panel, go to **Store Settings > Storefront > Store > Advanced**. | |||
| 5. Follow the instructions in the [Store-settings](#store-settings) section to activate the desired features, then save the changes. | |||
| @@ -118,51 +117,103 @@ | |||
| __RUNTIME__ = {"account":"vtexstore","amp":false,"bindingChanged":false,"binding":{"id":"aacb04t3-a8fa-4bab-b5bd-2d654d20dcd8","canonicalBaseAddress":"vtexstore.vtex.com"},"culture":{"availableLocales":[],"country":"USA","currency":"USD","language":"en","locale":"en-US","customCurrencyDecimalDigits":null,"customCurrencySymbol":"$"},"production":true,"query":{},"settings":{.... | |||
| ``` | |||
|
|
|||
| This script holds a lot of important data about a web page, and it can be long, making it a demanding task for the browser. When lazy runtime is enabled, the script is broken into smaller ones to prevent the total blocking time of the store website from being compromised. | |||
| This script contains significant web page data and can be long, which demands processing from the browser. When you enable lazy runtime, the script is broken into smaller ones to prevent compromising the store website’s total blocking time. This helps to avoid lengthy tasks, leading to a faster store experience. | |||
| > ⚠️ Enabling this option might cause unexpected behaviors, such as gaps while scrolling. If you notice any side effects on the store website, [open a ticket with VTEX Support](https://help-tickets.vtex.com/smartlink/sso/login/zendesk). | ||
| #### Enable concurrent React mode | ||
|
|
||
| This action helps the store to stay responsive by adjusting to the user’s device capabilities and network speed. This means rendering tasks can be prioritized and interrupted based on your interactions or current network conditions. |
|
|
||
| #### Enable page number in meta title | ||
|
|
||
| This option adds a `#{Number}` in the HTML title. This helps both users and search engines know exactly which page they’re viewing and avoids duplicated titles, which can harm SEO. |
|
|
||
| We recommend using the `__fold__` block for scrollable pages. This block allows you to specify which interface components load initially and which load as the user scrolls. Only the first visible blocks are loaded initially, while the ones _below the fold_ are lazy-loaded during scrolling. | ||
| Use the `__fold__` block for scrollable pages. This allows you to specify which interface components load initially(above the fold) and which are lazy-loaded as the user scrolls. |
|
|
||
| The search query won't automatically retrieve any additional facets or show them to the user. Instead, a `Show more` button will be displayed below the rendered facets, allowing users to load the remaining ones. | ||
| This action allows the product page to fetch additional data necessary to render components positioned above the fold. It helps to ensure that product details, images, and any other components in the main view appear together without delays or missing information. |
|
|
||
| #### Enable fetching filters partially | ||
|
|
||
| When you enable this option, search result pages will display a maximum of 10 facets per filter. | ||
| When you enable this action, search result pages display a maximum of 10 facets per filter. |
github-actions
bot
force-pushed
the
main
branch
from
fd49c61 to
bba71c2
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Types of changes
EDU-13773