Checkout using your account
Checkout as a new customer
The one and only cutting-edge extension to avoid render-blocking styles & unused CSS by automatically generating CSS individually per page!
Advanced Core Web Vitals (CWV) optimization for faster FCP (First Contentful Paint) & LCP (Largest Contentful Paint).
Crossing The Final Frontier Of CSS Optimization For Your Magento Store:
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
Hyvä Themes performance is legendary.
But better performance is better, right?
Even though Hyvä Themes performance is outstanding, there are still opportunities for improvement.
For example Hyvä Themes is using TailwindCSS for reducing the amount of CSS used by Magento stores running with Hyvä Themes.
But the CSS still includes styles for the whole site and is still loaded as styles.css file via a separate network request.
The browser has to wait until this file, including unused styles, was downloaded before being able to render the page.
In other words, this styles.css is a render-blocking resource on Hyvä Themes stores.
Now, if you run your Magento store with Hyvä Themes, you probably want Hyvä style performance with no limits,
no render-blocking styles, just pure 100% Hyvä style loading and rendering speed, right?
No problem, we did it for you: Next-Level CSS Optimization for your Hyvä Themes store...
Improve your First Contentful Paint (FCP) & Largest Contentful Paint (LCP) performance KPI's
by speeding up page rendering for your Hyvä Themes Magento store.
Remove unused CSS and move remaining CSS inline with JaJuMa Hyvä Inline CSS extension.
JaJuMa Hyvä Inline CSS works fully automated, generating the CSS on-the-fly on page load,
removing unused CSS and adding it inline to the page on page load.
With this extension you get a level of CSS optimization never seen before.
Developed for maximum performance with flexibility and compatibility in mind:
Read more below on how it works and about all the amazing features - Let's Go CSSless!
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
Auto Generate &
Inline CSS
Per Page
Auto Remove/Cleanup
Unused CSS
For Hyvä Themes
Remove/Avoid
Render-Blocking CSS
On Hyvä Themes
Supports Including
Custom/3rd Party
CSS Files In Inline CSS Generation
Safe List Config For
Missing/Dynamic Classes
To Ensure Compatibility
Include Files With
Dynamic CSS classes
In Inline CSS Generation Process
Compatibility Mode =
100% Compatibility
Out-Of-The-Box Via Optional Fallback
Inline CSS Optionally
Only On 1st Pageload
Load CSS File On Following Requests
Debug Tool
To Easily Verify
And See The Module Works
Inline CSS For Hyvä Themes & Magento 2 by JaJuMa In Detail.
Crossing The Final Frontier Of CSS Optimization
Go Headless They Said...
Going CSSless We Did!
Performance is one of the main reasons for merchants to run their Magento store with Hyvä Themes.
And no
question, anyone using Hyvä Theme is striving to not only keep that outstanding performance, but optimize as
much as possible customizing their stores follow the Hyvä philosophy, going Hyvä "All-In" with taking performance into account with every line of code.
Remember creating and adding "Critical CSS" to avoid render-blocking styles?
A cumbersome, error prone and hard to maintain process, introducing FOUC (Flash Of Unstyled Content) issues...
Luckily, that's a thing of the past now!
This is where Hyvä Inline CSS by JaJuMa comes in.
Crossing the
final frontier in CSS optimization:
You can now run your Magento 2 store
Hyvä Inline CSS Will Save You
And as with all JaJuMa extensions, we developed this extension with lots of care, flexibility and love for
details:
Worried about breaking some styles on your site?
We added
configs that allow you to control how the extension works even with your custom and special cases.
Don't want to spent time with configurations?
Simply enable the
compatibility mode for 100% compatibility with your existing styles (and of course no negative impact on
your performance KPIs).
Worried about the additional overhead having few kb
of CSS on your site?
We got you covered, optionally the extension allows adding CSS inline only
on first load, but use the regular styles.css on subsequent pageloads when the CSS file is already in
browser cache and does not need to be downloaded anymore.
The image on the left is showing a comparsion between a page load waterfall with CSS loaded as styles.css
file as with Hyvä Theme default vs. inline CSS.
The above waterfall is showing the purple bar
representing the loading of styles.css file with a size of 15kb.
The lower waterfall is showing no
purple bar, but the CSS is added inline into the HTML document represented by the blue bar with a size of
~7kb.
The performance difference between both is showing by the First Contentful Paint (FCP) event.
A clear improvement regarding start rendering time & First Contentful Paint KPI.
And with
content showing sooner, the performance is perceived as much better by customers.
As you can see in the image above, the Largest Contentful Paint is only slightly improved by using inline
CSS. This is because the LCP is determined by the time needed for downloading the LCP image.
Now let's have a look at an example where the LCP element is text, not an image.
These examples show that inline CSS does not directly impact your LCP, but it changes how your LCP is determined:
Page loads in examples above have been recorded with slow 3G network throttling using Chrome browser.
How much you can improve your performance KPI's 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.
Remember the hassles to create and inline critical CSS for optimizing performance on Luma?
JaJuMa Inline
CSS for Hyvä Themes is taking it a step further:
Our extension generates and inlines ALL CSS for each
page in your Magento store, fully automated!
Learn more about how the ultimate CSS optimization works:
On page load, all CSS classes are collected.
The list of CSS classes found gets cleaned up by i.
e. removing duplicates and sorted.
For the cleaned up list a hash value is created as
identifier for every unique CSS collection found on a site.
Step 2.a.: Hash Value Exist in Cache
If the hash value from step 1 already exist in cache,
the previously generated CSS will be used. This significantly reduces how often CSS needs to be
generated on-the-fly.
Step 2.b.: New Hash Value
Based on CSS classes found, the CSS is optimized, any unused
styles will be removed and the remaining CSS is minified and saved to cache together with the hash
value.
Before delivering the page to the browser, the generated CSS is added inline.
The CSS inlined
is either loaded from cache (see step 2.a.) or as generated on-the-fly (see step 2.b.)
JaJuMa Inline CSS was build for speed, automatically inlining the smallest CSS possible to avoid any render-blocking CSS file. Caching generated styles in a long-lived cache for avoiding time-consuming processing as much as possible. Optionally inlining CSS only when needed to avoid any unnecessary overhead.
But there is more:
The extension was developed with compatibility in mind,
taking into account different states, i. e. logged in/guest user, different styles per store view etc.,
making sure it also works on customized sites without breaking styles.
Even custom/3rd Party CSS files are supported and can be included in inline CSS
generation process.
Read below to learn about all the amazing and advanced features provided by this extension:
For Missing/Dynamic Classes
Content loaded via API by AJAX/Graphql/REST that is adding new styles to your page?
Add Files For Purge CSS: Configure any files that include dynamically rendered CSS classes. These files will be included in inline CSS generation process and classes found in these files will be added to your inline CSS!
Safe List Config: The extension comes with a safe list config that lets you add any style that can not be discovered automatically!
= 100% Compatibility
Want to be 100% sure there are no styles broken on your site when using inline CSS even for dynamically rendered content?
Compatibility Mode: By enabling the compatibility mode you can still load your normal styles.css - of course with no compromise regarding performance! The inline CSS will still allow the browser to render the page without waiting for the CSS file to be loaded and and the CSS file will be loaded with low priority or only after user interaction with zero impact on your performance KPIs!
Inline CSS Only When Needed
Use style.css File When Already In Browser Cache
The downside: Other than CSS files, inline CSS can not be cached by the browser. So the inline CSS, albeit very small, can be considered unnecessary overhead on subsequent page loads if the regular styles.css file is already present in browser cache. Worried about 7kb or 8kb being too much unnecessary overhead on your pages?
Inline CSS Optionally Only On 1st Pageload: With this option enabled, the extension will only add inline styles while the browser has not downloaded the styles.css file yet. Once styles.css is present in browser cache, based on a cookie, styles will not be added inline anymore, but pages will load normally as without the extension.
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?
Composer Installation? 
