docs: speculations rules API javascript plugin (#1607)

* docs: speculations rules API javascript plugin * docs: fix markdown lint * docs: fix spell checking * Add info on what the feature does * docs: improve text about speculation rules API feature * docs: eagerness setting --------- Co-authored-by: Micha <[email protected]>
shopware · Dec 18, 2024 · eb04359 · eb04359
1 parent e38dd5d
commit eb04359
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/guides/hosting/performance/performance-tweaks.md b/guides/hosting/performance/performance-tweaks.md
@@ -286,3 +286,25 @@ Disabling the Product Stream Indexer has the following disadvantages:
 - When you change a product in a stream, the category page is not updated until the HTTP cache expires
     - You could also explicitly update the category page containing the stream to workaround if that is a problem
 - Also, the Line Item in the Stream Rule will always be evaluated to `false`
+
+To disable the Product Stream Indexer, you can set the following configuration:
+
+<<< @/docs/snippets/config/product_stream.yaml
+
+## Enable the Speculation Rules API
+
+::: info
+This feature is available starting with Shopware 6.6.10.0
+:::
+
+The Speculation Rules API allows browsers to pre-render pages based on user interactions or immediately, depending on the eagerness setting.
+This can improve the perceived performance of a website by loading pages in the background before the user navigates to them.
+
+You can enable that **experimental feature** via `Admin > Settings > System > Storefront`. The JavaScript Plugin will then
+check if the [Browser supports the Speculation Rules API](https://caniuse.com/mdn-http_headers_speculation-rules) and if so,
+it will add a script tag to the head of the document. For the [eagerness setting](https://developer.chrome.com/docs/web-platform/prerender-pages#eagerness)
+we are using `moderate` everywhere. That means **a user must interact** with a link to execute the pre-rendering.
+
+::: info
+Keep in mind that pre-rendering puts extra load on your server and also can affect your [Analytics](https://developer.chrome.com/docs/web-platform/prerender-pages#impact-on-analytics).
+:::
diff --git a/resources/references/storefront-reference/plugin-reference.md b/resources/references/storefront-reference/plugin-reference.md
@@ -63,6 +63,7 @@ This is a list of available javascript plugins and helpers that can be used and
 | `ScrollUpPlugin`                       | Displays a small button with an "arrow up" icon to scroll back to the top of the page. Used on all pages and only displayed when the user has scrolled down the page.                             | ---                              |
 | `SearchWidgetPlugin`                   | Renders a dropdown with search result suggestions underneath the main headers search input field, as soon as the user starts to type a search term.                                               | ---                              |
 | `SetBrowserClassPlugin`                | Adds CSS classes to the `<body>` element depending on the current device, e.g. `is-ipad`. These classes can be used to add styling for a specific device category.                                 | ---                              |
+| `SpeculationRulesPlugin`               | If this javascript plugin is activated via `Admin > Settings > System > Storefront`, it adds speculation rules for the main navigation, the product listing and the header logo.                       | ---                              |
 | `VariantSwitchPlugin`                  | This plugin submits the variant form with the correct data option. Used on the product detail page to switch between product variants.                                                            | ---                              |
 | `WishlistWidgetPlugin`                 | Shows how many items are currently on the wishlist. Used by the wishlist "heart" icon inside the main header.                                                                                     | ---                              |
 | `ZoomModalPlugin`                      | Opens a full-screen modal window with an image gallery. Can contain multiple images that the user can zoom into. Used on the product detail page.                                                 | ---                              |