JaJuMa - Hyvä Inline CSS
## Works out of the box [Hyvä Inline CSS for Magento 2 with Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/extensions/inline-css-for-hyva-themes-magento-extension) extension by [JaJuMa](https://www.jajuma.de) allows running your Magento store without any CSS file. [By using only inline CSS and avoiding unused CSS, render-blocking styles.css file is eliminated](https://www.jajuma.de/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization) and as a result * FCP event occurs even before the HTML document was fully downloaded instead of after CSS file was downloaded * LCP event will happen as soon as your LCP element has been downloaded and does not depend on downloading CSS file anymore [Hyvä](https://www.jajuma.de/en/hyvaverse-guide) compatibility module is not required since the module does not have store front elements or provides native compatibility for [Hyvä Stores](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes). ## Link to original module Full Description of extension scope: [Hyvä Inline CSS for Magento 2 with Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/extensions/inline-css-for-hyva-themes-magento-extension) Extension in Magento Marketplace: [Hyvä Inline CSS for Magento 2 with Hyvä Themes](https://commercemarketplace.adobe.com/jajuma-module-hyva-inline-css.html) ## Demos [Magento & Hyvä Demo](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes) [Mage-OS & Hyvä Demo](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes) ## Features to be implemented - [x] Inline CSS gets generated on page load on-the-fly, removing unused styles - [x] Inline CSS gets cached to avoid repeated generation on pages with same styles - [x] Module comes with configurations for special cases (i. e. dynamically rendered content) & - [x] Compatibility Mode to avoid any broken styles (-> load styles.css with low prio/after user interaction with no impact on CWV) & - [x] Option to Inline CSS only on 1st page load for avoiding overhead due to uncached inline CSS on subsequent page views & - [x] Debug Tool showing inline CSS + Cache status, time needed for processing & size of inline CSS, option to clear caches from frontend for easy testing
issue