{"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…<\/p>\n","protected":false},"author":5,"featured_media":21660,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5869],"tags":[],"class_list":["post-21655","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hyva-themes"],"acf":[],"_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}]}}