Core Web Vitals Revolutionary Solution - Hyvä Themes

Hyvä Revolutionary Solution

Magento 2 default theme - Luma, currently fails to meet the requirements thrown up by the Google SERP. Magento 2 frontend uses outdated libraries that unnecessarily slow down the online store and doesn’t follow good Core Web Vitals practices. It’s possible to achieve satisfactory results using pure Magento 2 but it is very laborious and thus expensive. We wrote about it in the previous chapter of this e-book. The solution to the above problems may turn out to be the use of recently released Magento frontend - Hyvä Themes.

Core Web Vitals Hyvä Results

The default Hyvä Themes out of box achieves very good Core Web Vitals scores in PageSpeed Insights, which shows that this theme can be a very good foundation for store design. Below Real User Metrics results of Hyvä demo store:

pandagroup.co

When it comes to Lab Data, Hyvä also performs very well.

Mobile:

Desktop:

For comparison, the results Core Web Vitals of Magento 2 using Luma theme:

As you can see in the screenshots pure Magento without any modification already does not pass Core Web Vitals assessment - while also pure Hyvä has no problem with it.

To modify pure Magento so it passes the Core Web Vitals metrics you need to optimize it on a regular basis according to the checklist in the previous chapter.

pandagroup.co

What is Hyvä?

Hyvä is an answer to the outdated Magento 2 frontend, which is not adjusted to the current needs, and to a much more modern but also more complicated direction – PWA (Progressive Web App) in which Magento 2 is currently heading. The main principles of this theme are simplicity of its creation and the best possible performance.

It was invented by Willem Wigman, then built out in partnership with integer_net, the main technical partner of Hyvä Themes.

The big advantage of Hyvä is that it has the same architecture (multi page application) and is very similar to the Magento 2 frontend, so developers who have previously worked on Magento 2 will not need as much time to adapt to working with Hyvä as they would with PWA.

The idea of the creator of this theme Willem Wigman has been received with great enthusiasm by the Magento Community. More and more merchants and Magento solution specialists are interested in this idea. The number of developers on the official Hyvä Slack is growing from day to day as is the number of Merchants who decided to use Hyvä.

pandagroup.co

Currently most attention is devoted to adapting the most popular Magento 2 modules to work with Hyvä. Modules are prepared by the core Hyvä team and the Community.

Although Hyvä is a very young project, you can already check out existing stores using this theme. List of running stores can be seen here https://Hyva.io/showcases

How have such results been achieved?

To achieve such results it was necessary to practically rewrite the frontend in Magento 2. Outdated and currently unneeded JavaScript libraries such as jQuery, requireJS, Knockout were discarded. They were replaced with a very light alpine.js library. Classic Magento styling with LESS was replaced by styling using TailwindCSS. It is a framework that aims to reduce the amount of CSS that ends up on the store page. The above mentioned changes strongly influenced the speed of the store and thus better Core Web Vitals results.

Currently, Hyvä is the best theme to start with if you want to achieve good performance and SERP results.

So Hyvä solves all the problems associated with Core Web Vitals?

Hyvä is not a magic solution. It provides a very good tool and a stable foundation to create a very fast and modern storefront. If the project is carried out in a proper way, it is possible to achieve very good results with much less effort than in the case of pure Magento 2.

However, you should be aware that it requires skilled developers that will keep in mind that at the end we should comply with Core Web Vitals. If during the development you start adding a lot of modules from the market that use external, heavy JavaScript libraries, you will quickly get into bad Page Speed Insights results.

pandagroup.co

So what should be done to ensure that the results on Hyvä remain good?

Remember, keep it simple. Throwing a lot of fancy features on the page will significantly affect Core Web Vitals results. It is also worth noting that the amount of unnecessary and unused JavaScript on the page greatly decreases the Core Web Vitals results. Very often the results are worse because too many third-party scripts were added to the page.

It not only affects the Core Web Vitals results, but most importantly affects your customer’s experience, as nobody wants to wait seconds until the page loads.

Try to follow the standards set by the Hyvä Themes. The combination of TailwindCSS with alpine.js does a very good job, and you can do a lot more with these two pieces than you might think at first.

Files that land on the production server should be minified. Especially when it comes to mobile, this is very important as cell phones often have slower internet connections. The CSS minification scripts have been prepared by Hyvä, so using them is as simple as calling one NPM command.

Images should be loaded using lazy loading. In Hyvä just add in “loading=’lazy’” in “img” HTML tag like the example below.

<img src=”source” alt=”Alt text” width=”1024” height=”576” loading=”lazy”/>

pandagroup.co

Please remember that the images on the web page need to be optimized and space should be provided for them, so that when they load, content on the page does not change its position, spoiling the CLS result.

Exactly the same should be done for every other element on the web page. Beside the Core Web Vitals aspect, jumping content on the page is one of the worst aspects when it comes to User Experience. It probably happened to everyone to click by mistake a different link than wanted because the link changed position due to reloading content above it.

If you are still not satisfied with the results, remember, Page Speed Insights is your best friend. After testing your page you will get suggestions on what to do to improve your store’s performance.

pandagroup.co

Adrian Wyganowski

Frontend Developer awyganowski@pandagroup.co