Hyvä Inline CSS for Magento 2

Why Do I Need Hyvä Inline CSS For My Hyvä Theme Magento Store?

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.

Developed With Lots Of Care, Flexibility And Love For Details

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.

In Action: Inline CSS vs. CSS File Comparison
First Contentful Paint (FCP)

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.

In Action: Inline CSS vs. CSS File Comparison
Largest Contentful Paint (LCP)

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.

1. In case of loading the CSS as a file, the LCP event still occurs only after the CSS file has been downloaded.
2. But in case of inline CSS, the LCP event now occurs even before the HTML document was fully downloaded as well.

These examples show that inline CSS does not directly impact your LCP, but it changes how your LCP is determined:

1. With CSS file: Your LCP event will not happen before CSS file & LCP element have been downloaded.
2. With Inline CSS: Your LCP event will happen as soon as your LCP element has been downloaded.

How It Works: Generate & Inline ALL CSS Per Page For Hyvä Themes & Magento 2

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:

Build For Speed & Compatibility

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.

Read below to learn about all the amazing and advanced features provided by this extension:

Have dynamically rendered content on your site?

Content loaded via API by AJAX/Graphql/REST that is adding new styles to your page?

Safe List Config: The extension comes with a safe list config that lets you add any style that can not be discovered automatically!

Don't want to manually configure the safe list?

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!