December 18, 2025
Hyvä has quickly become a popular choice for Magento merchants thanks to its performance-first approach and simplified frontend architecture. Out of the box, a Hyvä theme will typically pass Core Web Vitals, which already puts it ahead of many traditional Magento builds. However, passing Core Web Vitals once doesn’t mean your site is set forever (unfortunately).
What we often see during Hyvä development and ongoing Hyvä optimisation work is that small issues slowly creep in over time. Individually, these issues may seem insignificant; however, collectively, they can push a site into failing Core Web Vitals thresholds. This can negatively impact both user experience and eCommerce optimisation performance, which can affect your conversion rate.
With extensive experience in optimising Core Web Vitals for Magento and Hyvä sites, we have identified four common issues that we regularly encounter. We’re here to tell you what to do about them to achieve the best results from your eCommerce store.
Why Hyvä optimisation still matters
Hyvä’s lightweight approach reduces JavaScript and removes much of the frontend complexity Magento is known for. But performance is not just about the framework; it’s also about how features are implemented over time.
As sites grow, so do templates, components, scripts, and third-party integrations. Without regular audits, performance debt builds up, which can directly affect Core Web Vitals metrics like LCP, CLS, and INP. This in turn impacts SEO, conversion rate optimisation (CRO), and overall customer satisfaction.
1. DOM size and bloated HTML
Hyvä encourages keeping JavaScript close to the markup, often inline within templates. This works well initially, but it can quickly lead to very large DOMs and bloated HTML if not handled correctly.
Large DOM sizes increase browser parsing and rendering time. Even if compression reduces the transfer size, the browser still needs to decompress and process the full HTML payload.
What to watch out for
Repeated inline JavaScript on list items
Large blocks of duplicated markup
Page transfer sizes are growing unnoticed
Google recommends keeping HTML under roughly 500KB. As part of Hyvä optimisation, you should regularly audit page sizes and DOM depth as best practice.
How to fix it
Move repeated JavaScript logic from child elements to a parent element where possible
Declare JavaScript once instead of repeating it per list item
Remove unused markup and conditionally render only what is needed
Smaller DOMs mean faster rendering, better Core Web Vitals scores, and a smoother user experience.
2. Fonts and layout shifts
Fonts are a common but often overlooked cause of layout shift. On a user’s first visit, web fonts need to be downloaded. During that time, the browser will render a fallback font and then swap to the custom font once it loads.
If the fallback font is not similar to the final font, this swap can cause noticeable layout changes and negatively impact Cumulative Layout Shift.
How to optimise fonts
Always declare a sensible fallback font
Choose a fallback font with similar metrics to the custom font
Avoid dramatic font swaps that change line height or spacing
This small detail can make a big difference to perceived stability and is an important part of both Hyvä optimisation and CRO.
3. Dynamic CSS and JavaScript-driven layout changes
It's common for JavaScript to add classes to elements once the page has loaded. Problems arise when those classes change the layout rather than enhance it.
If an element renders incorrectly until JavaScript runs, users will see content jumps or reflow, which hurts Core Web Vitals and overall usability.
Best practice
Ensure elements render correctly without JavaScript
Use JavaScript to enhance behaviour, not fix layout issues
If a class affects layout, apply the correct styling by default
From an eCommerce optimisation perspective, layout stability builds trust and reduces friction, especially during key moments like product discovery or checkout.
4. Dynamic elements and unexpected content shifts
Many modern eCommerce sites rely on dynamic elements such as recommendations, banners, or personalised content that is not included in the initial server response.
If space is not reserved for these elements, the page layout will shift when they load.
How to prevent layout shifts
Reserve space for dynamic content in the initial layout
Use skeleton loaders or placeholders to indicate incoming content
Where possible, render dynamic elements below the fold
This gives users a clearer sense of structure and avoids sudden content movement that can be frustrating and distracting.
Final thoughts on Hyvä website optimisation
Hyvä gives Magento merchants a strong foundation, but long-term performance still requires care and discipline. Regular audits, thoughtful frontend decisions, and a focus on real user experience are essential.
By keeping DOM size under control, handling fonts carefully, avoiding JavaScript-driven layout fixes, and accounting for dynamic content, you can protect your Core Web Vitals and support better CRO outcomes.
Good Hyvä development is not just about building fast pages on day one. It's about maintaining performance as your eCommerce site grows and evolves.
Last updated: December 24, 2025
