Wind & Kite Page Builder Core Web Vitals Module

Wind & Kite has seen the positivity and success of working together with the development community to enhance and improve existing code for all Magento developers to ensure that Magento is as effective and efficient as it can be. 

When developers write code they have two options; to make it proprietary, or Open Source. Open Source projects allow anyone to see the code, and push fixes and new features to it to improve the overall project. Magento is Open Source, which is part of the reason for the huge amount of features, and quick resolution of issues found.

Wind & Kite have been active contributors in the Open Source space right from the start, including being officially recognised as Hyvä Contributors last year.

We’re very pleased to announce our first Open Source module, giving back to the community to improve Magento.

In our persistent goal to achieve the best possible SEO rankings and page speed scores, we are always on the lookout for areas of sites we can improve. Our latest efforts improve an issue in Magento’s Page Builder system, to improve performance across the store.

When a page loads the browser is first given the instructions of what to do. Images which are in this code should have a width and height set so that the browser knows to hold this space once they load.

Magento’s Page Builder does not have this ability, resulting in content jumping around when images are loaded. Google calls this ‘Cumulative Layout Shift’. Pages with significant amounts of this movement are marked down by Google, resulting in a negative SEO benefit.

Images which are not visible straight away result in additional downloads for the end-user, with no net benefit. This content can be set to ‘lazy load’ - a process telling the browser to only load it when it is required, reducing downloads and improving page speed.

Our new module addresses both of these problems and gives the control back to the administrator. We have added parameters for height, and width, and to control if the content is loaded instantly (Eager Loaded) or when required (Lazy Loaded). We have written this so that it can be configured independently for the Desktop and Mobile image allowing admins to customise the behaviour of the different devices as required.

These changes make a huge difference to page performance and in turn to the score Google gives to the page.

Installation of the module is simple and free, we have made the package available via Packagist so installing is as simple as running:

‍composer require windandkite/module-page-builder-core-web-vitals

Our code is also publicly available at: https://github.com/windandkite/module-page-builder-core-web-vitals

We welcome feedback and suggestions, and in the spirit of the community please feel free to raise any issues or even contribute yourselves by forking and raising a new pull request.

‍