1. 📖 Hyvä Inline CSS: Introduction & Core Concepts

The JaJuMa Hyvä Inline CSS extension is the definitive solution for Magento stores using Hyvä Themes to automatically eliminate render-blocking resources, slash page load times, and perfect your Core Web Vitals scores.
By intelligently generating and inlining only the CSS each page needs, it delivers the fastest possible experience for your users from the very first byte.

This documentation provides a comprehensive guide to understanding, configuring, and mastering the extension. It covers everything from the core performance problems it solves to the advanced strategies you can employ to achieve unparalleled storefront speed.

1.1 🚀 What Problem Does Hyvä Inline CSS Solve?

The single biggest performance bottleneck on modern websites, especially for first-time visitors on mobile devices, is render-blocking CSS.
By default, when a browser receives a page's HTML, it sees a link to an external styles.css file.
The browser must then stop everything and make a new network request to fetch this file.
It cannot render - or "paint" - any content on the screen until that CSS file is fully downloaded and parsed.

This process introduces a critical delay known as Round Trip Time (RTT)-the time it takes for a request to travel to the server and back.
On mobile networks, this delay can easily add 200-400ms of dead time before your page even begins to appear.
This delay directly harms your store's most important performance metrics:

• First Contentful Paint (FCP):
  The time it takes for the first piece of content to appear on the screen.
  A long delay here makes the page feel broken.
• Largest Contentful Paint (LCP):
  The time it takes for the largest element (often a banner image or text block) to become visible.
  This is a core metric for perceived loading speed.

To understand this, consider the "Delivery Truck Analogy":

Imagine your website is a package being delivered. Traditionally, two trucks are sent:

1. The first truck delivers the HTML (the structure of the house).
2. Upon arrival, the browser sees it also needs the CSS (the paint and furniture) and sends the truck all the way back to the warehouse for a second trip.

No matter how fast your connection (the size of the truck), that second trip takes time (latency/RTT).
Our extension puts all the necessary paint and furniture for that specific room directly into the first box, eliminating the second trip entirely.
The box is slightly heavier, but the delivery is dramatically faster.

💡 Pro Tip:
For a detailed exploration of the "Delivery Truck Analogy", technical data, business case, and performance benchmarks behind this inline CSS strategy, read our in-depth article:
Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS.

1.2 ⭐ Key Benefits at a Glance

By solving the render-blocking CSS problem, the extension delivers a suite of powerful benefits for your Hyvä store:

• Go Truly CSS-less:
  Automatically generates and inlines only the CSS used by each specific page, eliminating the need for an external stylesheet request on the initial view.
• Instant First Paint:
  Eradicates the render-blocking CSS bottleneck to dramatically improve First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
• 100% Risk-Free:
  A unique Compatibility Mode ensures your design remains perfect while still delivering massive performance gains, making it completely safe to implement.
• Intelligent & Automated:
  The system is fully automated. It intelligently handles custom and third-party CSS, manages dynamic content through a "Safe List," and features a dedicated cache to ensure zero server overhead on repeat page views.

1.3 🤔 How It Works: The Automated Process

The extension's power lies in its simple yet sophisticated automated workflow, which is exceptionally effective due to Hyvä's modern architecture.

1. Analyze & Collect:
   On the first uncached visit to any page, the extension scans the full HTML output to identify every single CSS class that is actually used to render that page.
2. Generate & Cache:
   It uses the powerful purgecss library to create a new, minimal stylesheet containing only the necessary classes. This perfectly tailored CSS is then stored in a dedicated, long-lived cache, identified by a unique hash for that page's content.
3. Inline & Deliver:
   On all subsequent visits, this optimized CSS block is retrieved instantly from the cache and injected directly into the HTML <head> inside a <style> tag. This delivers all necessary styling in the very first server response.

This process is a perfect match for Hyvä Themes.
Hyvä's use of TailwindCSS already produces a highly optimized, utility-first stylesheet.
Our extension takes this lean foundation and perfects it on a per-page basis, removing the final network-related bottleneck and fulfilling the "performance-first" philosophy of the Hyvä ecosystem.

1.4 📝 How This Documentation is Structured

This documentation is designed to be a complete resource for users of all skill levels.

• All Users:
  Start with this Introduction to understand the core concepts.
• Configuration Deep Dive:
  The Configuration sections provide a detailed look into every setting, broken down by function:
  • General Configuration
  • Handling Dynamic Content with Inline CSS
  • Advanced CSS Delivery and Compatibility Strategies
• Developers & Advanced Users:
  Refer to the Using the Storefront Debug Tool section for details on verifying the extension's behavior in real-time.

1.5 🔎 How To Navigate The Extension

All configuration settings for the Hyvä Inline CSS extension can be found in the Magento Backend under:

• JaJuMa -> Hyvä Inline CSS -> Configuration

This central configuration area is divided into three sections, which are covered in detail in the following documentation pages:

• General Configuration
• Generating Inline CSS and Handling Dynamic Content
• Advanced CSS Delivery and Compatibility Strategies

1.6 📞 Need Help?

Still have questions or need help with your setup? Our expert team is here to assist.
Please don't hesitate to contact our support team for personalized assistance.