Hyvä Theme Performance Tips

Hyvä completely replaces Magento's legacy Luma frontend, dropping over 200 JS files and heavy RequireJS/Knockout configurations in favor of Alpine.js and Tailwind CSS. The baseline loading time instantly drops under 1 second.

By removing the massive Javascript execution overhead of standard Magento, browser main thread blocking time is reduced by over 90%, allowing your site to feel incredibly fast even on low-end mobile devices.

While Alpine.js is highly efficient, nesting too many reactive scopes can cause DOM slowdowns. Keep Alpine components scoped to small HTML elements and avoid deep watchers or heavy loops.

For global state, use custom events or Alpine's `Alpine.store` mechanism. This prevents unnecessary component re-renders and keeps the UI responsive during user interaction.

Ensure your Tailwind configuration in `tailwind.config.js` properly scans all template files in your Hyvä theme. Unpurged styles dramatically inflate stylesheet sizes, adding unnecessary load delay.

Configure the purge purge options to look at all custom XML layouts and `.phtml` templates. A well-optimized Hyvä site should ship less than 15KB of CSS to the client.

Always leverage Magento's image configuration to serve modern formats like WebP or AVIF. Combined with native lazy-loading (`loading="lazy"`), this ensures images do not block page rendering.

Set explicit `width` and `height` attributes on all image tags. This reserves space in the DOM before the image downloads, completely eliminating Cumulative Layout Shift (CLS) and securing a perfect score.