Checkout using your account
Checkout as a new customer
Eliminate render-blocking resources, slashing FCP/LCP times, and perfecting your Core Web Vitals.
Cross the final frontier of performance optimization. This is the definitive solution for Hyvä Themes to automatically remove unused CSS and go completely CSS-less, delivering the fastest possible experience for your users from the very first byte.
License:
Approved & Verified by Magento Marketplace
1st Extension Provider
With Hyvä Support
Awesome since 2021!
Unencrypted. 100% Open Source & Customizable
Coding Standards Applied. Clean & Readable Code
Countless Satisfied Customers: Be The Next One!
Our extensions are made with love & passion for building new things, perfection & performance in mind.
Our extensions are field-proven in our own client projects.
We use the Ultimate Image Optimizer extension. The performance has improved considerably. The tool has been running smoothly right from the start.
We commissioned a really tricky adjustment to an extension that other agencies couldn't manage...and the guys at JaJuMa did a fantastic job! We are happy to continue working with JaJuMa.
We are very satisfied with this module. It reduces the sizes of our images and so the loading of our pages are much more faster now. We recommand this module for everybody!!!
Run Your Hyvä Themes Magento Store Without CSS File With Hyvä Inline CSS by JaJuMa!
Say Good-Bye To Your CSS Files & Unused CSS
Speed Up Page Rendering By Removing Blocking Styles
Improve FCP & LCP Performance KPIs
You've invested in Hyvä for its legendary performance, yet that perfect 100/100 PageSpeed score remains elusive.
The culprit is a hidden speed killer that affects every site, no matter how optimized:
Understand the...
Render-Blocking CSS file:
Our Hyvä Inline CSS extension eradicates this bottleneck entirely.
It transforms your site's architecture by automatically generating a
perfectly optimized set of styles for every single page and embedding this CSS directly into the HTML.
Here is how it works...
No render-blocking CSS - Instant First Paint:
The Result:
no external CSS file, no render-blocking network request, and an instantaneous first paint.
Composer Installation? 
<head>
of the HTML document.
The browser receives everything it needs to render the page perfectly in the very first response,
without making a single extra network request for styles.
Hyvä Inline CSS for Hyvä Themes & Magento 2 by JaJuMa-Develop Inline CSS =
Faster Page Rendering
Run Your Hyvä Themes Magento Store Without Render-Blocking CSS File
Avoid Unused CSS
Go truly CSS-less. Automatically generate and inline only the CSS used on each individual page.
Stop shipping dead code. Our process automatically purges all unused styles for the leanest possible payload on every request.
Achieve near-instant FCP and LCP by removing the external CSS file request, the #1 cause of render-blocking.
Your entire frontend, unified. The extension can find, process, and inline styles from other third-party modules.
Maintain perfect styling for dynamic content. Easily configure the extension to never remove CSS classes added by JavaScript.
Go beyond the Safe List. Point the extension to specific PHTML or JS files to ensure 100% accurate CSS generation for complex components.
Get the speed benefits with zero risk. Our unique compatibility mode guarantees perfect styling while still deferring the main stylesheet.
Maximize first-visit speed and leverage browser caching for repeat visits with this intelligent, automated optimization strategy.
Get instant insights into the extension's behavior directly on the frontend, showing cache status, processing times, and gzipped size.
Supercharge your workflow with our free Power Toy, providing a persistent dashboard to monitor inline CSS status without enabling debug mode.
Built from the ground up for Hyvä Themes. No compatibility module required.
Fully compatible and tested with Mage-OS, ensuring your store is future-proof.
The Hyvä Inline CSS Extension fundamentally changes how styles are delivered to the browser. Instead of waiting on external CSS files, it injects critical styles directly into the HTML response, eliminating render-blocking and network latency. The following comparison highlights how this approach impacts key performance metrics.
| Metric | Standard Hyvä (External CSS) | With Hyvä Inline CSS Extension | Performance Impact |
|---|---|---|---|
| Render-Blocking Resources | 1 (styles.css) | 0 | ✅ Eliminated |
| Network RTT for Styles | ~200–400ms (Mobile) | 0ms | ✅ Eliminated |
| First Contentful Paint (FCP) | Delayed by CSS Download | Near-Instant | 🚀 Drastically Accelerated |
| Largest Contentful Paint (LCP) | Delayed by CSS Download | Near-Instant | 🚀 Drastically Accelerated For Text LCPs |
| Unused CSS per Page | Present | Removed | 📉 Smaller Payload |
| Subsequent Navigation | Memory Cache Hit (~0ms) Disk Cache Hit (Disk lookup + parse ~5–15ms) |
Inline CSS (20Kb ~16ms download + 0–2ms inline overhead) |
⚖️ Penalty ~10–20ms / Draw |
In summary, the Hyvä Inline CSS Extension removes critical bottlenecks by
eliminating render-blocking resources and costly RTT delays.
The result is
faster FCP, LCP, and overall page responsiveness.
For mobile users on slower connections, this can mean hundreds of milliseconds saved per request.
Gain unparalleled control and automation over your store's CSS delivery. Our extension provides a robust, flexible toolkit to handle any scenario, from complex dynamic content to third-party extensions, ensuring maximum performance without compromise.
Never ship render-blocking and a single byte of unused CSS again.
Our engine analyzes the DOM of every page request, collects all used CSS classes,
and generates a perfectly optimized, minimal stylesheet in real-time.
When a page is requested, the extension intercepts the response before it's sent to the browser. It scans the entire HTML document, collecting every single CSS class that is actually used.
A unique hash value is created for the cleaned list of classes. If this hash already exists in our dedicated long-lived cache, the optimized CSS is served instantly. If not, this list of used CSS classes is then processed on the server by purgecss, a highly efficient tool that removes all unused styles from your main stylesheet to generate a new, hyper-optimized CSS for this specific page / set of CSS classes that is then saved to the cache with its hash value.
This block of CSS that is perfectly tailored to that specific page then gets added directly into a <style> block in the HTML <head> before the page is delivered to the browser. This process also intelligently identifies and includes styles from other compatible third-party modules, ensuring a unified and optimized frontend without manual intervention.
Flawlessly style even content dynamically loaded by JavaScript.
Easily add dynamic CSS classes (e.g., from Alpine.js components or sliders) to a "Safe List" or
include entire JS/PHTML files in the scan to ensure they are never purged.
Modern storefronts rely heavily on JavaScript to create dynamic experiences, such as image sliders, pop-ups, or content loaded via AJAX. These elements, and their associated CSS classes, are often not present in the initial HTML source code that our extension scans.
To solve this, we provide two powerful options for developers:
Get the speed benefits with zero risk.
Enable Compatibility Mode to inline the used CSS for an instant paint,
while also loading the full stylesheet asynchronously in the background as a fallback.
We understand that launching a new performance optimization can feel risky on a complex, live storefront.
That's why we built Compatibility Mode as the ultimate safety net.
When enabled, the extension still performs its full optimization process - generating and inlining the used CSS for an instant first paint. However, it also adds the original, full styles.css file back to the page, but in a non-render-blocking way.
You can configure it to load with low priority or, for maximum performance, only after the first user interaction (like a scroll or click).
This gives you speed and peace of mind:
The immediate rendering benefit of inline CSS and the 100% guarantee that every single style will be available, just as the designer intended.
Maximize first-visit speed and leverage browser caching for repeat visits.
This smart option inlines CSS only for the first page a user visits.
For all subsequent pages, it uses the standard external stylesheet, which is now already in the browser's cache.
This is an advanced strategy for merchants who want to balance the ultimate first-impression speed with the long-term benefits of browser caching.
When this mode is active, the extension checks if the user's browser has already cached the main styles.css file. If not (i.e., it's their first visit), it inlines the CSS for maximum speed.
If the file is already cached, the extension does nothing, allowing the browser to use the fast, local copy. This provides an unparalleled experience for new visitors while reducing HTML size for returning customers.
Don't just take our word for it. See the dramatic, measurable improvement in your Core Web Vitals.
By eliminating the CSS download from the critical rendering path, your pages begin painting content the moment the HTML arrives, delighting users and search engines.
The waterfall charts below illustrate the difference.
The Browser begins rendering instantly, dramatically improving both First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
This simple change can easily shave over 200ms off your mobile load times - a massive win for conversion and SEO.
The browser must wait for the `styles.css` file to download completely before rendering can begin (Notice the purple bar in the waterfall image representing the `styles.css` file.). This is the render-blocking delay in action, caused by an extra network request (RTT bottleneck).
In the default case, the FCP event occurs only after the CSS file has been downloaded, as it is render-blocking.
The `styles.css` request is gone.
As a result, the FCP event happens almost immediately as the necessary styles are included in the initial HTML document.
In the case of inline CSS, the FCP event occurs even before the HTML was fully downloaded, as inline CSS is not render-blocking.
The benefit extends directly to your Largest Contentful Paint (LCP).
By eliminating the initial CSS download delay, the browser can discover and
start downloading your LCP image or rendering your LCP text block hundreds of milliseconds sooner.
When the LCP element is a text block, it suffers the same render-blocking fate as the FCP. It cannot be displayed until the CSS file is fully downloaded.
In case of loading the CSS as a file, the LCP event still occurs only after the CSS file has been downloaded.
By inlining the CSS, the critical rendering path is accelerated, allowing the LCP text block to be painted as soon as the HTML arrives.
But in case of inline CSS, the LCP event now occurs even before the HTML document was fully downloaded as well.
Page loads in the examples above were recorded with slow 3G network throttling using Chrome browser.
How much you can improve your performance KPIs using this extension largely depends on client network speed as well as the size of your LCP element.
For maximum benefits, it is recommended to also optimize loading of LCP elements by e.g. using next-generation images (WebP & AVIF) with our Ultimate Image Optimizer and making sure the LCP image is loaded with highest priority, e.g. by using our Preload Critical Resources & Assets extension.
Invest in a solution built by recognized leaders.
As a
Hyvä Gold Partner and one of the earliest pioneers in the ecosystem,
we don't just use Hyvä - we help build and define it.
This extension is the product of four years of deep, hands-on experience optimizing the most demanding Hyvä stores.
We hold one of the highest distinctions for expertise and contribution in the Hyvä ecosystem, earned through proven project success and deep collaboration.
We were the first extension provider to offer official Hyvä compatibility, leading the way for the entire marketplace from day one.
Our team actively contributes to the Hyvä core codebase. We have a fundamental understanding of how Hyvä works because we help make it work.
We support our extensions with free tools like the Hyvä Inline CSS Power Toy and the included Debug Tool, giving mechants and developers the visibility they need to optimize with confidence and efficiency.
All our extensions are battle-tested in our own demanding real-world client projects before they are ever released.
This ensures they are robust, reliable, and deliver real-world results that we stand behind.
Version: 1.0.0
Version: 1.0.1
Version: 1.0.2
Version: 1.0.3
Version: 1.0.4
Version: 1.0.5
Version: 2.0.0
Version: 2.0.1
Version: 2.0.2
Maybe also interesting for you?
More valuable Extensions and Add-Ons for your Magento Store
How do you like this extension?
