Trader Information
Back to topOverview
Back to topJaJuMa Hyvä Inline CSS enables store owners to run their Magento 2 site with Hyvä Theme frontend without any CSS file by inline all CSS used per page.
Performance optimization by taking CSS optimization to the next level!
Hyvä Theme is using TailwindCSS which provides optimized and very small file sizes for CSS.
However, even with TailwindCSS, the CSS is generated globally for the whole site. The styles.css file includes any style that is used anywhere on the website.
This means, when the customer visits your Magento store, the browser first has to download a CSS file including styles unused on the page requested.
And this file is render-blocking, the browser can only start rendering the page after this file was downloaded.
When it comes to CSS, the only way to address its render-blocking time is by inlining the CSS.
And this is what Hyvä Inline CSS by JaJuMa is doing, avoid any render-blocking CSS to speed up the page rendering and FCP (First Contentful Paint) in your Hyvä store - and more:
On page load, CSS is generated on the-the-fly, unused styles are removed to have the smallest possible CSS and the result is added as non render-blocking CSS inline.
The generated inline CSS gets cached. When a page with the same styles is requested, the inline CSS does not need to be generated again but will be fetched from cache.
There is no need to worry about broken styles caused by inlining the generated and cleaned up CSS.
The extension comes with configs that allow you to control how the extension works even with your custom and special cases.
Just in case you do not want to bother about configuration, you may simply
use the compatibility mode we included for 100% compatibility with your existing styles (and of course no negative impact on your performance KPIs).
You want to use inline CSS only on first page load, but rely on styles.css file when already present in browser cache?
With Hyvä Inline CSS you can do just that, 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.
### This Extension Was Developed For Hyvä Themes ###
### Please see the manual for additional NodeJS installation step needed for this extension to work ###
Feature Highlights
- Generate & Inline CSS On-The-Fly On Page Load
incl. cleaning up and removing any unused CSS - No More Render-Blocking CSS File
by inlining all (and only used) CSS - Faster Page Rendering
for a better user experience in your store - First Contentful Paint (FCP) event
even before HTML was fully downloaded - Optimized Largest Contentful Paint (LCP) event
as soon as LCP element was downloaded - Dedicated Inline CSS Cache
to reduce the times inline CSS needs to be generated - Option to Include Custom/3rd Party CSS Files
in inline CSS processing - Compatibility Mode
for ensuring 100% compatibility - Option To Inline CSS Only on 1st Page Load
and use styles.css file when already present in browser cache - Hyvä Theme Compatible
No compat module required - Mage-OS Compatible
- Quality Extension
Developed following Magento Coding Standards and with security in mind
Additional Information
Deutsch / German:
Weitere Infos zu Hyvä Inline CSS finden Sie auf unserer Extension Homepage:
Über JaJuMa Hyvä Inline CSS für Magento 2 mit Hyvä Theme
English / Englisch:
Further info about Hyvä Inline CSS may be found on our extension homepage:
About JaJuMa Hyvä Inline CSS for Magento 2 with Hyvä Theme
Extension Demos:
See Demo with Magento & Hyvä Theme
See Demo with Mage-OS & Hyvä Theme
Technical Specifications
Back to topSeller profile
Seller contact
Current Version
2.0.2
Adobe Commerce platform compatibility
Adobe Commerce (cloud): 2.4 (current)
Adobe Commerce (on-prem): 2.4 (current)
Magento Open Source: 2.4 (current)
Type
Stable Build
Updated
02 October, 2024
Categories
Extensions, Site Optimization, Performance
Quality Report
Back to topAll tests were conducted on the latest versions of Adobe Commerce that existed for the compatible release lines at the moment of the extension submission. Latest versions of all other software were used, as applicable.
Release Notes
Back to top2.0.2:
- Compatible with Adobe Commerce (cloud) : 2.4
- Compatible with Adobe Commerce (on-prem) : 2.4
- Compatible with Magento Open Source : 2.4
- Stability: Stable Build
-
Description:
- Improved: Compatibility with Varnish
2.0.1:
- Compatible with Adobe Commerce (cloud) : 2.4
- Compatible with Adobe Commerce (on-prem) : 2.4
- Compatible with Magento Open Source : 2.4
- Stability: Stable Build
-
Description:
Fixed: Issue with relative path background image
2.0.0:
- Compatible with Adobe Commerce (cloud) : 2.4
- Compatible with Adobe Commerce (on-prem) : 2.4
- Compatible with Magento Open Source : 2.4
- Stability: Stable Build
-
Description:
- Added: Option to include files with dynamically rendered CSS classes in inline CSS generation process
- Added: Option to include custom/3rd party CSS files in inline CSS
- Added: Option to exclude certain pages from using inline CSS
- Improved: Add new inline CSS cache type for cached inline styles
- Updated: Debug bar styles and position
- Fixed: Minor bugs and issues
1.0.5:
- Compatible with Adobe Commerce (cloud) : 2.4
- Compatible with Adobe Commerce (on-prem) : 2.4
- Compatible with Magento Open Source : 2.4
- Stability: Stable Build
-
Description:
- Fixed: Issue with M2.4.6 + Varnish
1.0.4:
- Compatible with Adobe Commerce (cloud) : 2.4
- Compatible with Adobe Commerce (on-prem) : 2.4
- Compatible with Magento Open Source : 2.4
- Stability: Stable Build
-
Description:
- Updated: Compatibility with upcoming extension
1.0.3:
- Compatible with Adobe Commerce (cloud) : 2.4
- Compatible with Adobe Commerce (on-prem) : 2.4
- Compatible with Magento Open Source : 2.4
- Stability: Stable Build
-
Description:
- Fixed: Conflict with JaJuMa Hyvä PWA
1.0.2:
- Compatible with Adobe Commerce (cloud) : 2.4
- Compatible with Adobe Commerce (on-prem) : 2.4
- Compatible with Magento Open Source : 2.4
- Stability: Stable Build
-
Description:
- Fixed: Issue with Tailwind !important prefix
- Improvement: Hyvä Checkout support
1.0.1:
- Compatible with Adobe Commerce (cloud) : 2.4
- Compatible with Adobe Commerce (on-prem) : 2.4
- Compatible with Magento Open Source : 2.4
- Stability: Stable Build
-
Description:
- Improved: Changed load order to avoid conflicts with some other inline CSS
- Added: Example/Default config for safelist when using glider.js
1.0.0:
- Compatible with Adobe Commerce (cloud) : 2.4
- Compatible with Adobe Commerce (on-prem) : 2.4
- Compatible with Magento Open Source : 2.4
- Stability: Stable Build
-
Description:
- Initial Release
Support
Back to topThe best place to start if you need help with a specific extension is to contact the developer. All Adobe Commerce developers have both a contact email and a support email listed.
Contact Vendor