From eb043599fa40dc6cc65aec0b252e55d3a0b8ce82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Meyer?= Date: Wed, 18 Dec 2024 13:55:37 +0100 Subject: [PATCH] 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 --- .../hosting/performance/performance-tweaks.md | 22 +++++++++++++++++++ .../storefront-reference/plugin-reference.md | 1 + 2 files changed, 23 insertions(+) diff --git a/guides/hosting/performance/performance-tweaks.md b/guides/hosting/performance/performance-tweaks.md index 93f038efb..149b93020 100644 --- 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 index c267106dc..224681ef5 100644 --- 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 `` 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. | --- |