Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: speculations rules API javascript plugin #1607

Merged
merged 6 commits into from
Dec 18, 2024
+23 −0
Merged

docs: speculations rules API javascript plugin #1607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8d19772
docs: speculations rules API javascript plugin
BrocksiNet Dec 11, 2024
fd68581
docs: fix markdown lint
BrocksiNet Dec 11, 2024
6baa27b
docs: fix spell checking
BrocksiNet Dec 11, 2024
7677df8
Add info on what the feature does
Isengo1989 Dec 12, 2024
67aa439
docs: improve text about speculation rules API feature
BrocksiNet Dec 12, 2024
1244717
docs: eagerness setting
BrocksiNet Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions guides/hosting/performance/performance-tweaks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
:::
1 change: 1 addition & 0 deletions resources/references/storefront-reference/plugin-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. | --- |
Expand Down
Loading