{"id":21655,"date":"2025-09-11T17:37:51","date_gmt":"2025-09-11T12:07:51","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=21655"},"modified":"2025-09-11T17:37:53","modified_gmt":"2025-09-11T12:07:53","slug":"hyva-speed-optimization-steps","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/hyva-speed-optimization-steps\/","title":{"rendered":"8 Key Hyv\u00e4 Speed Optimization Steps to Boost Performance"},"content":{"rendered":"\n

Hyv\u00e4 is lightweight and fast compared to Luma or other storefronts.<\/p>\n\n\n\n

But still, you must fully optimize for your store. As each website has unique requirements and additional factors that impact the overall performance.<\/p>\n\n\n\n

Let\u2019s explore what steps are involved in optimization and why it matters. <\/p>\n\n\n\n

8 Important Hyv\u00e4 Speed Optimization Steps<\/h2>\n\n\n\n

Step 1 – Check Google PageSpeed<\/h3>\n\n\n\n

The first and most important step is to run a Google PageSpeed Insights<\/a> audit.<\/p>\n\n\n\n

This tool provides a detailed report on your site\u2019s performance, highlights key bottlenecks, and gives you a baseline to measure improvements against. It is often the starting point for any performance optimization project. <\/p>\n\n\n

\n
\"Google<\/figure>\n<\/div>\n\n\n

This is the general performance score criteria.<\/p>\n\n\n\n

Score<\/strong><\/td>Indicated <\/strong><\/td>Action <\/strong><\/td><\/tr>
90\u2013100<\/td>Excellent performance <\/td>No action needed <\/td><\/tr>
50\u201389<\/td>Require optimization<\/td>Aim to optimize score 90-100<\/td><\/tr>
0\u201349<\/td>Performance issues <\/td>Actively work on the suggested changes <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

If your score falls under 50\u201389 or 0\u201349, analyze the issue and take the needed action as suggested. Additionally, follow the ones mentioned here. <\/p>\n\n\n\n

Step 2 – Convert Images to WebP<\/h3>\n\n\n\n

Images are often the heaviest assets and one of the primary causes of slow page loads.

To optimize image performance, use a module like Yireo_Webp2<\/a>, which automatically converts your images into the modern and highly compressed WebP format.<\/p>\n\n\n\n

Implementing WebP can significantly reduce image file sizes, resulting in faster loading times and improved Google Lighthouse scores.<\/p>\n\n\n\n

Step 3 \u2013 Optimize CSS & JavaScript<\/h3>\n\n\n\n

Although Hyv\u00e4 is inherently lightweight, adding custom scripts or third-party extensions can add unnecessary bloat.<\/p>\n\n\n\n

Follow these practices to maintain the store performance while adding store-specific customizations.<\/p>\n\n\n\n

    \n
  • Minify CSS & JS files to reduce file size.<\/li>\n\n\n\n
  • When adding custom CSS or JS, ensure the code is clean, minimal, and free of unnecessary components.<\/li>\n\n\n\n
  • Use modern Hyv\u00e4 Approach as Hyv\u00e4 avoids Magento\u2019s traditional bundling and minification process by leveraging Tailwind CSS and Alpine.js.<\/li>\n<\/ul>\n\n\n\n

    Step 4 \u2013 Edit Image Attributes<\/h3>\n\n\n\n

    Ensure all images have proper alt tags and height\/width attributes. <\/p>\n\n\n\n

    Add descriptive alt text to maintain a good SEO. This helps search engines understand the image context better. <\/p>\n\n\n\n

    It is important to not repeat the image alt text as surrounding text to avoid repetition.<\/p>\n\n\n\n

    Example: <\/p>\n\n\n\n

    <p><a href=”index.html”><img src=”images\/home-icon.png” alt=”Home Page<\/strong>” width=”24″ height=”25″>Home Page<\/strong><\/a><\/p><\/p>\n\n\n\n

    As you can notice in the above example, “Home Page” is written twice, affecting the usability.<\/p>\n\n\n\n

    Additionally, missing attributes can cause layout shifts (CLS issues) and negatively impact performance. Always define them to maintain stable rendering.<\/p>\n\n\n\n

    You can use site audit tools or conduct manual inspections to identify images missing these attributes, ensuring improved usability, SEO, and compliance.<\/p>\n\n\n\n

    Step 5 \u2013 Ensure ARIA Labels are Properly Implemented<\/h3>\n\n\n\n

    Make sure ARIA labels are correctly passed to elements. This improves accessibility for users relying on screen readers and ensures better semantic structure for your site.<\/p>\n\n\n\n

    It is important to note that unnecessary aria labels are not added to the code like <button aria-label=”Send”>Send<\/button><\/p>\n\n\n\n

    For example; <\/p>\n\n\n\n

    Do this: <input placeholder=”Enter search term” aria-label=”Enter search term”><\/p>\n\n\n\n

    Avoid this: <button id=”alempty” aria-label=””><\/button><\/p>\n\n\n\n

    Step 6 \u2013 Use WOFF2 for Fonts<\/h3>\n\n\n\n

    Use the Web Open Font Format (WOFF2) to optimize font files.<\/p>\n\n\n\n

    They offer superior compression compared to older formats like TrueType (TTF) or OpenType (OTF). This reduces file sizes and speeds up font loading, leading to faster page rendering and a smoother user experience.<\/p>\n\n\n\n

    Step 7 \u2013 Use Different Images for Desktop and Mobile<\/h3>\n\n\n\n

    In order to avoid a poor Largest Contentful Paint (LCP) score, optimize images for different devices. <\/p>\n\n\n\n

      \n
    • Use smaller, compressed images for mobile screens.<\/li>\n\n\n\n
    • Serve high-resolution images only for desktop where needed.<\/li>\n<\/ul>\n\n\n\n
      <picture>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- Mobile Image -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<source srcset=\"https:\/\/bedwenplants.co.uk\/media\/wysiwyg\/home\/inspirations-shady-plants-banner-PB-mobile.jpg\" type=\"image\/webp\" media=\"(max-width: 768px)\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<source srcset=\"https:\/\/bedwenplants.co.uk\/media\/wysiwyg\/home\/inspirations-shady-plants-banner-PB-mobile.jpg\" media=\"(max-width: 768px)\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- Desktop Image -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<source srcset=\"https:\/\/bedwenplants.co.uk\/media\/wysiwyg\/home\/inspirations-shady-plants-banner-PB.webp\" type=\"image\/webp\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"https:\/\/bedwenplants.co.uk\/media\/wysiwyg\/home\/inspirations-shady-plants-banner-PB.jpg\" width=\"400\" height=\"205\" alt=\"Green shade loving foliage of ferns and hostas.\" class=\"pb-2 w-full h-auto\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/picture><\/pre>\n\n\n\n
      This HTML code with <picture> elements helps to load the correct images based on the device, reducing load time and improving performance.<\/p>\n\n\n\n
      Step 8 \u2013 Optimize Loading of External Scripts<\/h3>\n\n\n\n
      External JavaScript files (e.g., analytics, chat widgets, tracking scripts) can block rendering and significantly reduce PageSpeed scores.<\/p>\n\n\n\n
      The best practice is to use the standard Hyva script code structure:<\/p>\n\n\n\n
      window.addEventListener('init-external-scripts', () => {\n\nPut code here\u00a0\n\n}, {once: true, passive: true});<\/pre>\n\n\n\n
      Key Reasons for Hyv\u00e4 Theme Speed Optimization<\/h2>\n\n\n\n
      By following these steps, you can significantly improve your website’s speed with the Hyv\u00e4 theme. <\/p>\n\n\n\n
      A proper optimization helps you to: <\/p>\n\n\n\n
        \n
      • Go beyond the default theme, most stores include custom scripts, widgets, or third-party extensions. These can add weight and reduce performance if not optimized.
        <\/li>\n\n\n\n
      • Avoid large banners, uncompressed images, and auto-play videos often slow down page load times. Proper optimization ensures speed without compromising quality.
        <\/li>\n\n\n\n
      • Fine-tuning essential SEO elements and scripts to achieve high Lighthouse scores, especially for CLS, LCP, and FID.
        <\/li>\n\n\n\n
      • Add additional server-side caching <\/strong>for stores with large catalogs and higher traffic\u00a0 to maintain peak performance.
        <\/li>\n<\/ul>\n\n\n\n
        Whenever you check your website’s performance using Google PageSpeed Insights, you can use the suggestions generated by Google to guide your optimization efforts as there are a lot of other steps that need to be applied that are different considering your website structure.<\/p>\n\n\n\n
        Simply address each suggestion one by one to further enhance your website’s speed.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Hyv\u00e4 is lightweight and fast compared to Luma or other storefronts. But still, you must fully optimize for your store. As each website has unique requirements and additional factors that impact the overall performance. Let\u2019s explore what steps are involved in optimization and why it matters.  8 Important Hyv\u00e4 Speed Optimization Steps Step 1 – […]<\/p>\n","protected":false},"author":5,"featured_media":21660,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5869],"tags":[],"class_list":["post-21655","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hyva-themes"],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/21655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=21655"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/21655\/revisions"}],"predecessor-version":[{"id":21674,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/21655\/revisions\/21674"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/21660"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=21655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=21655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=21655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}