Endertech Logo
Endertech
Author
Chinh Nguyen
Chinh Nguyen
Published
10/17/2024
Categories
E-Commerce, Web Development
Tags
Magento, Hyva

iSClinical.com Core Web Vitals on Magento 2: Before and After

Summary 

If you’ve ever tried to seriously optimize your e-commerce website, you will know that quick load times and interaction responses are crucial to a satisfying user experience and good SEO. Your site’s performance in these metrics will influence your search engine ranking position and the sales your website generates. 

But how can we know those performance metrics? That’s why Google Lighthouse was born and achieving high scores in Lighthouse has become the standard of great websites.

Our client, Innovative Skin Care (a company that supplies skincare products to medical spas), found themselves with underwhelming scores that are common with Magento e-commerce websites. Here is how we improved iS Clinical Lighthouse scores.

We focused on a comprehensive optimization approach using Hyvä themes. The work involved three main areas:

  • Theme Migration from Magento Luma to Hyva.

  • Extensions Optimization to let it work perfectly on the new theme.

  • Customizations

Theme Migration to Hyva 

We replaced our existing Magento Luma theme with Hyva, which is designed for performance with minimal JavaScript and CSS bloat. This transition was crucial in reducing page load times and improving overall site performance without losing the old layout.

Extensions

We used several Hyva-enabled extensions that played a critical role in optimizing our Magento store. Here are the extensions we used:

  • Amasty Xsearch: Helps customers smoothly navigate through the website and quickly find desired products. Show related, recent, and popular keywords to upsell via flexibly customizable autocomplete popup.

  • Amasty Mega Menu: Improve customer shopping experience by providing mega menu, dropdown, custom menu.

  • Aheadwork Subscription: Repeat purchases, autoship, and recurring payments will all be available in your store with just order. Offer different prices for different customer groups, bulk purchases, or discounts based on catalog price rules.

We ensured that all third-party extensions were Hyva-compatible, either by selecting Hyva-enabled extensions or by refactoring and customizing existing ones. But sometimes they may not support the site’s features. We have to read & understand the module and custom it.

Customizations

At the time we developed, Hyva was a new Theme, most of the 3rd modules did not support Hyva and we had to do a lot of customization options. One of the things that I can’t forget, it makes me stressed during two days. 

That is custom the Mega menu, on that mega menu, it renders both data for both Desktop & Mobile on load. That makes the page have to load html & images and script of mobile although we were on the Desktop. And when I check the lighthouse, the score is 6x, that really is not good for what we spent and the client's hope. We expect more… Yes we expect more than this score. I dug and debugged for a long time and finally found the above reason. And that’s amazing when Hyva has a solution, it has the AlpineJs on the theme.

My brain was blown after that, I wish I knew it sooner. With x-if for desktop & mobile, the page now renders only for specific screens. And after that, the scores increase.

Other Details

To improve your Magento website lighthouse scores, it’s not only the code or Hyva, we have to improve the image optimization. Imagine, if we let an image with size is 1 mb+, the image's resolution is good but the resource to load it is huge. If an image is served as 1000x1000px but is rendered in a 500x500px box it's 4 times larger than necessary. That’s why we have to optimize them and also keep the resolution. We can use Webp for images, it will increase the page load a lot.

Don’t forget the CDN, page cache, https,… that will affect the page loading & site’s performance too.

Conclusion

Hyva is a really great theme for Magento, it was built with a focus on performance and reduced complexity, meaning you get a faster webshop while saving development hours on customizations. The deploy command will be used very rarely, I clear cache, just clear cache.

Optimally the site is a long way, you may face difficulties and obstacles, but the results you get will be truly amazing. Connect with us to see if we can help forward your business goals.