It is no secret that the Magento 2 frontend is very outdated and may be difficult to work with. Magento’s approach to frontend development is very different from classic site development. Magento storefront uses classic technologies such as HTML, CSS, JavaScript, and nonstandard technologies such as XML and basic PHP.
Unfortunately, even when it comes to the classic aspects of creating a website design, libraries and solutions which are now considered outdated are used here as well. This makes creating storefronts an unnecessarily difficult and time-consuming process.
Therefore Luma theme for Magento 2 is slow and bloated due to its architecture and overuse of external libraries for JavaScript and CSS output.
PWA (Progressive Web App) for Magento 2
For some time now the Magento Community has been trying to fix this aspect of Magento 2 themes. A very hot topic all the time is creating page storefronts using the PWA standard. Currently, on the market, you can find many solutions prepared for Magento 2 that provide PWA standards for Magento’s store. The most popular are ScandiPWA, Vue Storefront, PWA Studio. As PWA is a young technology it still causes many problems for developers such as: different than default Magento 2 frontend architecture used in these solutions, different libraries used, etc.
Earlier this year, a completely new solution appeared to modernize the Magento 2 frontend, Hyvä Themes
. It is much more similar to the classic Magento 2 frontend, but with a modern approach to storefront creation. This theme is designed to reduce the difficulty of working with Magento and increase the online store’s performance.
Hyvä – a revolution of Magento 2 & PWA Alternative
Hyvä Themes Magento 2 is a better version of Magento’s Luma. Alongside this is an alternative to PWA that doesn’t put you into the boundaries of the JavaScript-only site. We’d like to draw your attention to the new potent asset that claims to deliver outstanding usability and performance.
Hyvä Themes is a new way to build out storefronts for Magento 2. Its primary focus is on speed and UI components, though there are other benefits too.
What’s wrong with the current Magento frontend?
Magento 2 is known for having a lot of necessary and needed functionality to run a successful store. The multitude of these features carries with it a large complexity of the code of this solution. It concerns not only the backend of the store but also the frontend. Magento programmers have to learn the whole application ecosystem in order to efficiently work with this technology stack.
Magento Frontend association with XML and PHP
Developers are faced with a big challenge. Associating classic front-end technologies with XML and PHP is a big problem for developers starting their adventure with Magento. Also, the inconsistency of frontend development can be problematic when
JavaScript libraries for Magento frontend
JavaScript libraries used in Magento don’t help either. Currently, little-used solutions such as Knockout.js, RequireJS, and jQuery (this library is currently mainly used by backend developers), can be replaced by more modern solutions. For styling, we used LESS which is also currently not a standard.
Magento store performance-optimizing according to Google requirements
The results received in page speed insights could also be better. Optimizing a Magneto store using a default theme called Luma, to perform well can be a very challenging and time-consuming task. Adapting a store to Google’s requirements is very important nowadays. High positioning in Google provides a constant flow of new customers who can spend their money in the store. The speed of the website and a high level of UX are also very important for the store to be successful.
According to a Google and Deloitte survey speeding up the page load by 0.1s on average increased conversions by 2% and customers spent 10% more money.
It is a significant advantage for e-commerce business owners. More about how to improve e-commerce site performance speed and User Experience measured by Core Web Vitals, new Google metrics, you will find in our articles:
- Magento Core Web Vitals a new ranking signal for your Magento e-commerce
- Magento Core Web Vitals – improve the score of Magento Largest Contentful Paint (LCP)
- Core Web Vitals – improve the score of Magento First Input Delay (FID) and Cumulative Layout Shift (CLS)
Two different ways of modern Magento frontend. PWA vs Hyvä Themes
Community Magento itself has decided to fix the Magento frontend. Currently, you can see that the frontend is going in two completely different directions. The first direction is PWA, while the second direction is Hyvä Themes.
Progressive Web App (PWA) is a direction that uses the latest technologies and standards. The most popular solutions prepared for Magento use common and loved libraries such as React and Vue. This type of application provides the customer with a very good experience when using the store. The key aspects of PWA are high responsiveness, speed, the ability to work offline, the functionality to send PUSH notifications, and the feature to install the application on smartphones.
PWA Magento frontend complexity and utility
However, the problem is still the high complexity of the project. Many Magento 2 modules are not designed to work with PWA stores. Many projects that were to use PWA did not succeed because it turned out that the technology is not yet as developed or the complexity of the application was too high.
In some stores, PWA may appear to be overkill. For example, if the vast majority of customers use laptops or desktop computers, and not mobile smartphones, then the majority of the biggest advantages of PWA will not be used. The same can be said about the stores which already have a well-working application with the store on the mobile. In this case, merchants may decide that it is not worth investing additional money in such functionalities.
Magento store performance and simplicity with Hyvä
The answer to PWA’s complexity and complex and outdated default Magento 2 frontend is the Hyvä Themes built out in partnership with integer_net, the main technical partner of Hyvä Themes. The main principles of this theme are to make the frontend as simple as possible and to provide the best performance. This theme looks like the current default frontend in Magento 2 should look like.
Less JavaScript in Magento Hyvä frontend
Hyvä uses the same frontend architecture as in the default Magento 2, leaving the biggest advantages of layout files in XML, routing, cookies, private data, and caching. All unnecessary and outdated JavaScript libraries like jQuery, Knockout.js, RequireJS were removed. Reduced complexity of the layout, and amount of CSS. Thanks to these changes, developers who start with Magento and Hyvä will have a much easier way to work efficiently, and developers who previously worked with pure Magento will have no problem adapting toHyvä from the starting point.
Hyvä frontend revolutionary solutions for e-commerce performance
Removed old JavaScript libraries and LESS have been replaced with lightweight Alpine.js and TailwindCSS. This setup works very well together and you can achieve a lot more with these two tools than it seems at first. Its performance achievement exceeds the Luma theme possibilities.
The theme also performs well in the SERP (Search Engine Results Page), so it should be much easier to rank your store than with pure Magento 2 with Luma. In terms of the increasingly important aspect of website positioning, Core Web Vitals, Hyvä also performs very well and complies with the requirements imposed by Google.
The community for Hyvä is growing every day. Currently, the main goal is to adopt as many of the most popular Magento 2 modules as possible to work with Hyvä.
How were Hyvä Themes created?
Hyvä creator Willem Wigman needed to create a simple online store for his wife and decided to do it using Magento 2. He wanted to make it as simple as possible. Willem realized that the easiest way to do it would be to practically rewrite the frontend of Magento. The blocks in the XML files were overwritten, the old JavaScript code that used the default libraries of Magento 2 was rewritten using pure JavaScript and Alpine.js.
Lighter libraries in Hyvä Themes vs. Magento 2 theme
A new, very lightweight library Alpine.js has been added to replace the previous ones. Alpine is very similar to Vue, so developers who previously worked with this framework should have no problem finding themselves in Hyvä Themes. This library also fulfills the most important goals of Hyvä – performance orientation and simplicity.
The weight of minified Alpine is 21.9 kB and for comparison, the same minified jQuery used by default in Magento 2 weighs 87.6 kB.
Utility first styling of Hyvä project
LESS files responsible for styling the page have been replaced by TailwindCSS. It is a utility-first framework that is also very focused on the best possible performance. Tailwind provides tools classes thanks to which the CSS files deployed on the server are as small as possible. This framework limits the number of repetitive rules in CSS and thanks to this tool style files do not grow with the development of the project.
For whom is Hyvä a good solution?
Hyvä is the theme that Luma should become with the development of Magento 2. It is very similar to the classic frontend development in Magento 2, only without the outdated and over-complicated modules. It is also a response to the direction in which Magento 2 was currently heading, i.e. PWA.
The growing interest in Hyvä shows that the direction is good. The vast majority of stores do not need the fancy functionality that PWA provides, and investing in it just to not create a storefront in pure Magento 2 was overkill. Hyvä just fills that gap that has been created with the increasing hype on PWA.
Hyvä can be a very good basis for creating a very fast store that will perform well in the SERPs. If a store relies heavily on customers who found the store through a search engine, then investing in Hyvä can be a good solution. If the developers stick to the standards set by Hyvä creators, the website should meet all the requirements imposed by Google.
(No Ratings Yet)
Loading...