Siteation - Magento 2 Pagespeed

A Magento 2 module that leverages modern web performance technologies including Back/Forward Cache (bfcache), Page Prerendering, and View Transitions API to dramatically improve Core Web Vitals and overall page speed performance.

This module provides optimizations to enhance your store's loading times and create seamless user experiences.

Installation

Install the package via;

composer require siteation/magento2-pagespeed
bin/magento module:enable Siteation_Pagespeed

How to use

The Pagespeed has the bfcache feature enabled by default.

For the speculation rules and view transitions you need to enable them from the configuration.

each option can be found in the Magento admin panel under Stores > Configuration > Siteation > Pagespeed.

Use with Hyvä Themes

This module is fully compatible with Hyvä Themes, allowing you to take advantage of its performance optimizations while using this modern frontend solution.

But do note Hyvä Themes has its own speculation rules and view transitions, so for Hyvä it is best to disable the default speculation rules and view transitions provided by Hyvä in favor of this module.

Improved UX with bfcache

While this module makes sure to reload the customer data, it can not close the menus and other modals automatically.

This requires a update in the code of this component to handle the closing of these elements when the page is restored from the bfcache.

For this you can use the following snippets:

Hyvä Code Snippet

In your copy of vendor/hyva-themes/magento2-default-theme/Magento_Theme/templates/html/header/menu/mobile.phtml edit the follwing:

<nav
    x-data="initMenuMobile<?= $escaper->escapeHtml($uniqueId) ?>()"
    @keydown.window.escape="closeMenu()"
    class="z-20 order-2 sm:order-1 lg:order-2 navigation lg:hidden w-12 h-12"
    aria-label="<?= $escaper->escapeHtmlAttr(__('Site navigation')) ?>"
    role="navigation"
+++ x-bind="eventListeners"
>

const initMenuMobile<?= $escaper->escapeHtml($uniqueId) ?> = () => {
    return {
        mobilePanelActiveId: null,
        open: false,
        init() {
            this.setActiveMenu(this.$root);
        },
+++     eventListeners: {
+++		    ['@pageshow.window'](event) {
+++             if (event.persisted) {
+++                 this.open = false
+++             };
+++         }
+++     },

Breeze Code Snippet

In your copy of vendor/swissup/module-breeze/view/frontend/web/js/components/menu.js edit the follwing:

    this._on(document, 'keydown', e => {
        if (e.key === 'Escape' && $('html').hasClass('nav-open')) {
            this.close();
        }
    });

+++ this._on(window, "pageshow", e => {
+++     if (e.persisted) {
+++         this.close();
+++     }
+++ });
},

For Luma sadly we have no equivalent solution available at this time.