Skip to content

JaJuMa - Hyvä Inline CSS

Works out of the box

Hyvä Inline CSS for Magento 2 with Hyvä Themes extension by JaJuMa 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 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ä compatibility module is not required since the module does not have store front elements or provides native compatibility for Hyvä Stores.

Link to original module

Full Description of extension scope:
Hyvä Inline CSS for Magento 2 with Hyvä Themes

Extension in Magento Marketplace:
Hyvä Inline CSS for Magento 2 with Hyvä Themes

Demos

Magento & Hyvä Demo
Mage-OS & Hyvä Demo

Features to be implemented

  • Inline CSS gets generated on page load on-the-fly, removing unused styles
  • Inline CSS gets cached to avoid repeated generation on pages with same styles
  • Module comes with configurations for special cases (i. e. dynamically rendered content) &
  • Compatibility Mode to avoid any broken styles (-> load styles.css with low prio/after user interaction with no impact on CWV) &
  • Option to Inline CSS only on 1st page load for avoiding overhead due to uncached inline CSS on subsequent page views &
  • Debug Tool showing inline CSS + Cache status, time needed for processing & size of inline CSS, option to clear caches from frontend for easy testing
Edited by Oli Jaufmann
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information