Improve Magento 2 and Adobe Commerce performance in 5 minutes without re-platforming to Hyva and achieve Google Performance Insight Score 90+ on mobile.
This open-source solution was released in 2019. and was actively developed in 2021, but because of the war in Ukraine, all developers went to fight or moved to Western Europe
We have received a request from the Fortune 500 about the Hyva theme. However, they can’t use the Hyva theme because they are partnered with Belarusian. Belarus = Russia = North Korea. Belarus has long been a key ally of Moscow and supported Russian aggression against Ukraine; Belarusian Wagner criminal forces (including fighter pilots) are fighting in Ukraine to kill all developers and their families. European developers will soon learn 1C and Bitrix Commerce if more businesses are like this. Pasta time is over…
I wrote about Magento’s bad performance for a long time when all the agencies and magento influencers just believed in Adobe marketing fairytales. Only Hyva followed our approach to rewrite magento junk; however, just for frontend delivering the same slow web pages response. First, they push you to migrate from M1 to M2 to improve performance after they sell you PWA Studio. Now, they are telling you you need Hyva to improve performance. I hope more agencies can build better Open Source themes following the same approach. It is really easy. However, the biggest issue with Hyva is that they are fixing ONLY the front-end part and are still selling Magento bloated core backend frameworks and telling merchants it is okay; the theme can fix everything, and calling that “future of Magento.”; It could be the future if it were open source, but it is just a marketing scam to sell simple blank themes implementation for 1000$. It is not even a real theme; it is more a blank Page with the menu and product image.
If you add a real theme to Hyva, it will not be so fast. However, it is just a front end. The main problem of M2 is a core backend framework code and Architecture. It is 10 – 40 times slower than Magento 1 and analogs. Image reoptimisation and JS size, minification, and uglification don’t help. TTFB of the uncached page is the only metric that matters. The rest is theme implementation mistakes and user internet connection issues, not Magento-related. Magento 2 is a PHP framework for eCommerce.
Magento performance refers to how efficiently and quickly a Magento-based e-commerce website responds to HTTP requests, handles high traffic, and processes backend operations. Hyva Skin is not part of the magento framework. You can build any theme you want using any JS framework you want.
Hyva uses the same approach that has been around for a while. But they built a new, expensive commercial non-Magento-compatible theme instead of fixing your current store issues without re-platforming. However, Hyva is better than Magento/Adobe PWA studio – headless implementation with the slow Magento API/GraphQL as a backend. Again, the issue is Magento 2 backend API, not a front-end; merchants and agencies can use their own frontends but still need to use slow Magento 2 Core with the slow TTFB. Another good open-source solution is Breez. It is even better than Hyva because it uses the smallest jQuery analog, cash.js, and works with existing websites without re-platforming.
Breeze – is a Magento module that replaces Adobe js stack with it’s own implementation. You can use it on top of any Luma/Blank-based theme.
NextGento approach – next js based Magento 2 static generated fronted (not a React JS) with the direct communication to the magento 2 database using NodeJento Orm.
How does our Magento 2 performance module work?
Our module disables Magento 2 Adobe’s junky JS (KnockoutJS, RequireJS, jQuery widgets, UI components, JS layout, and other nonsense). It can also disable CSS; however, CSS is not the main issue of magento. CSS mostly has network over-the-wire overhead, while JS has compiling, parsing, and executing overhead(blocking time) for slow devices. Also, we have a special NodeJS CSS compiler that removes unused CSS rules and makes CSS files 2–3 times smaller. So, by disabling junky magento JS for product and category pages and replacing it with a more efficient light, one can improve Google page score performance. Checkout, we leave untouchable to allow using magento extensions; however, we are also improving the JS bundle by removing Catalog JS from the Checkout JS bundle. JS Files for Checkout are also prefetched when Added to the cart. After disabling magento JS you can use any JS library for customizations: React JS, VueJS, Angular, or Alpine JS, but we recommend using pure Vanilla JS.
Fortune 500 Magento 2 Adobe Commerce merchant asked to check the frontend performance of the magento 2 after installing the extension and adding missing js functionality. Remember, all this doesn’t affect the backend core Magento framework performance, which is the main magento issue – slow backend and not the frontend image loading speed like many Agencies are trying to sell you. Loading speed is an internet connection issue and not a Magento. You just need fewer JS and CSS files to download and execute.
When you are disabling core magento JS, you need just several features to be implemented:
- Add To Cart — basically, it is just a post request no JS is required
- Cart Widget. The best is to return PHP-HTML on AJAx instead of rendering the cart widget via JS. Reac magneto them he's this implementation.
- Add To Compare (Nobody uses it. You can remove this useless feature). Also, just post the request.
- Menu JS, however, you can render Menu just with the CSS (in my case, it forks 98% because it was designed using CSS and VanillaJS without Magento JS). Example of the CSS only hamburger menu: https://github.com/WebDevSimplified/css-only-hamburger-menu
- Configurable product. Also, the best way will be to replace JS magento approach with pre-rendered HTML by PHP. React magento the m has this.
- New Gallery instead of outdated Photorama. The same static js HTML approach. It's just an image tag printed by PHP and CSS.
- Form Key. Several lines of code are restored from cookies.
formKey: () => {
const formKey = getCookie('form_key');
return formKey;
}- Message, etc. the same from cookies
gettMessages: () => {
const messages = getCookie('mage-messages');
return messages;
}If you have any questions, you can reference the Hyva-based source code.
It is not difficult. Junior front-end developers can implement this in 1–5 days. For Fortune 500 companies, implementing custom JS by hiring a good JS developer for several weeks is not an issue in exchange for a higher quality and better technical architecture using a modern tech stack. As for me, Google’s front-end speed doesn’t make sense. Google Page speed is scum created by frontend consultants; however, using the modern JS libraries you want instead of the outdated Magento JS is a good benefit. All this functionality has already been implemented in our React Magento theme.
It is a truly headless “decoupled” PWA-ready implementation. Headless is not a Single-Page application. Headless is freedom of development without reusing a broken Magento frontend framework.
So let’s check Magento frontend Google score before and after.
Let's install the extension :
You can install it via composer; I prefer to copy it to the app/code. Anyway, it is a code;)
Go To Store Configuration- > ReactJS and VueJS Configuration
Select only Magento JS configuration -> Remove Adobe JS Junk to Yes.
Basically, Hyva uses our approach: a magento .phtml theme without Magento junky JS and custom lightweight CSS, and smaller store images and without custom fonts, So it can’t “turbocharge your Magento store” as many Hyva advertisers claim. Hyva doesn’t have any Magento 2 core framework performace improvement like this approach. It is just a light skin. Compared to Hyva, we do not use custom CSS and theme layout.xml and .phtml files, which is why you can use this approach with your existing store. Our code is open-source, community-driven, and 100% free. You can use it without any subscriptions and contracts.
After enabling this feature, the score becomes 98 with stand-alone jQuery and other features like sliders added.
Before, Google's Performance Score was around 46.
As you can see, after removing Adobe Magento JS junk, the total booking time is much better. 160ms vs 11490ms.
There is also an open-source Luma React theme based on the same magento solution:
It doesn’t use React JS. It could use React for custom modules the same as it could use VueJS. You just need to enable it from the admin. It is a magento headless solution — a magento theme without magento Knockout JS.
Magento 2 frontend Google Score performance of The Open Source Luma React Theme
CSS without any changes. I recommend this tool to remove unused CSS. You need to add HTML, which automatically removes unused rules and selectors.
After telling you this secret, I’m hoping, my friend, you will create a custom open-source magento theme without reusing Adobe junky JS and without the Hyva scam. But just use PHP and JS without Alpine and Knockout JS using your favorite JS library.
The best tools to create a Magento 2 theme:
- preactJS-lightweight react
- jQuery (The issue of Magento 2 JS is not jQuery but how it was abused)
- htmx
- CashJS — lightweight jQuery analog
- Svelte
- Inferno
- VanillaJS — no framework
- AlpineJS — not recommended
But the best even if they are slower:
- ReactJS
- VueJS
However for server side rendered HTML non Critical React component is ok. Just don’t do Gallery (Largest Content Paint element) using react.
Organizations want to improve their UI, so they use React, Vue, or whatever their team wants and are comfortable working with on the front end without being bound by Magento 2 or Hyva design decisions.
ReactJS and VueJS are the leaders. Alpine JS is like modern Knockout JS. Nobody wants to use it. In one more year, it will be legacy code nobody wants to touch.
It is the big issue in Magento 2 is legacy PHP Zend Framework and KnokoutJS with Require JS. Google Page Score doesn’t improve anything, but you can find a better job with React and Vue. Enterprises (businesses) can find better talents for modern stacks.
Remember, PHP websites need minimum JS if you want them to be fast on the front end. Just use old, good “server-side rendered” .phtml. It is just string echo output and not a rendering; there is nothing to render if you have ready HTML already. The rest will be done using your browser. You can quickly make everything on the backend using PHP Laravel (Laragento), NodeJS(NodeJento), or Python(PyGento) microservices.
