Hyvä Inline CSS for Magento 2

Hyvä Inline CSS Extension for Magento 2
Hot
Hyvä Compatible Themes Out-of-the-box
Mage-OS Compatible
Composer Installation Composer Installation?
shapes Free Power Toy Available

Run Your Hyvä Themes Magento Store
Without Unused CSS & Without CSS File

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:

  • Automatically Generate CSS Per Page & Add As Inline CSS
  • Supports Inline CSS Generation Including Custom/3rd Party CSS Files
  • Flexible & Easy Configs For Special Cases
  • Remove Render-Blocking CSS
  • Remove/Cleanup Unused CSS
  • Compatibility Mode = 100% Compatibility
  • Inline CSS Optionally Only On 1st Pageload
  • FCP & LCP Optimization

See All Highlights

License:


Magento Marketplace Approved by
  • One-Time Payment
  • Lifetime Access To Source Code
  • 1 Year Free Support
  • 1 Year Free Updates
awesomeicons6/brands/magento

Approved & Verified by Magento Marketplace

awesomeicons6/solid/award

1st Extension Provider
     With Hyvä Support
     Awesome since 2021!

awesomeicons6/solid/code-fork

Unencrypted. 100% Open Source & Customizable

awesomeicons6/solid/code

Coding Standards Applied. Clean & Readable Code

awesomeicons6/regular/face-smile-beam

Countless Satisfied Customers: Be The Next One!

awesomeicons6/regular/heart

Made With Love

Our extensions are made with love & passion for building new things, perfection & performance in mind.

awesomeicons6/solid/handshake

Field Tested

Our extensions are field-proven in our own client projects.

Customer Feedback

Solution

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

THE PROBLEM
UNUSED CSS &
RENDER BLOCKING
CSS FILE

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...

THE SOLUTION
GENERATE &
INLINE CSS
PER PAGE

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:

  • Generate CSS per page on-the-fly
  • Supports including custom/3rd Party CSS files in inline CSS generation process
  • Caching Inline CSS
  • Flexible & easy configurations for special cases
  • Compatibility Mode
  • Inline CSS only on 1st pageload for avoiding overhead due to uncached inline CSS

Read more below on how it works and about all the amazing features - Let's Go CSSless!

Highlights

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

awesomeicons6/solid/file-circle-plus

Supports Including
Custom/3rd Party

CSS Files In Inline CSS Generation

Safe List Config For
Missing/Dynamic Classes

To Ensure Compatibility

awesomeicons6/solid/check-to-slot

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

awesomeicons6/solid/square-check

Debug Tool
To Easily Verify

And See The Module Works

awesomeicons6/brands/hyva-colored
Hyvä Theme Compatible
See Hyvä Demo
awesomeicons6/brands/mage-os-filled
Mage-OS Compatible
See Mage-OS Demo

Details

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!

JaJuMa Hyvä Inline CSS Extension

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.

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

  • without any CSS file ("CSSless") and
  • with unused CSS removed as much as possible.

Hyvä Inline CSS Will Save You

  • the network request to download the default styles.css file as well as custom/3rd Party CSS Files
  • the time for the browser to wait for the styles to be downloaded before rendering the page
  • another few kilobyte of data that need to be downloaded by your customers to view your store.
  • time and efforts for creating "Critical CSS"
  • from struggling with FOUC (Flash Of Unstyled Content)issues

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.

Hyvä Inline CSS vs. Hyvä Theme CSS File Comparison First Contentful Paint (FCP)

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.

The performance difference between both is showing by the First Contentful Paint (FCP) event.


  1. In case of loading the CSS as a file, the FCP event occurs only after the CSS file has been downloaded (-> CSS file is render-blocking).
  2. In case of inline CSS, the FCP event occurs even before the HTML document was fully downloaded (-> Inline CSS is not render-blocking).

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.

Hyvä Inline CSS vs. Hyvä Theme CSS File Comparison Largest Contentful Paint (LCP)

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.
awesomeicons6/regular/lightbulb
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.

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:

Step 1:
Collect CSS Classes Used

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:
Generate CSS

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.

Step 3:
Inline CSS

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 Hyvä Inline CSS - Debug Tool & Waterfall

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.
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:

Configs & Options

For Missing/Dynamic Classes

Have dynamically rendered content on your site?

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!

Compatibility Mode

= 100% Compatibility

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!

Inline CSS Only On 1st Pageload

Inline CSS Only When Needed
Use style.css File When Already In Browser Cache

From a performance perspective, adding only the CSS that is needed as inline CSS is a perfect solution - on a first page load...

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.

Customer Reviews

Rating
Fully automatic!
Review by
Well thought out. I am very satisfied and will definitely recommend you!

Write Your Review

Your Rating:
Loading...

You submitted your review for moderation.

Frequently Asked Questions

General Magento Extension Questions
How to install Magento 2 extensions from JaJuMa?

We offer different ways of Magento 2 extension installation:

Before Installing

  • We recommend you to duplicate your live store on a staging/test site and try installation on your staging/test site before deploying to your live store
  • Backup Magento files and the store database


Please Note:
It’s very important to backup all themes and extensions in Magento before installation, especially when you are working on a live server. We strongly recommend you to do not skip this step.

Manual Extension Installation via FTP/SSH:

After purchasing an extension, you can download the module as .zip package in your Customer Account.
After downloading the .zip package, please follow these steps for installation:

  1. Log into your hosting space via a FTP client (e. g. FileZilla, WinSCP, cuteFtp)
  2. Create Folder: /app/code/Jajuma/[ExtensionName]*
  3. Unzip extension package and upload files into: /app/code/Jajuma/[ExtensionName]*
  4. Enter and run the following commands at the command line:
    php bin/magento setup:upgrade
    php bin/magento setup:static-content:deploy

* Note: [ExtensionName] can be found in registration.php file: Jajuma_[ExtensionName]

 

Extension Installation via Composer / Magento Marketplace:

For installation via composer, please get the extension

  • from Github and install as any other extension from Github or
  • from Magento Marketplace and follow this Installation Guide and
    make sure to use the correct key for Marketplace repo (the key that belongs to the account that purchased the module).
    In case of issue with installing via composer, please double-check to use the correct key for Marketplace repo.
    Your key should be in your auth.json file.


Links for composer installation to Github/Marketplace can be found on top of this page in technical info section - Click Here

Error Could not find a matching version of package jajuma/[module-name]. Check the package spelling, your version constraint and that the package

With this error message, most likely the key used for the Marketplace repo is wrong/invalid, i. e. not the key that belongs to the account that purchased the module. Please double-check to use the correct key for the Marketplace repo.

For installing extensions from Magento Marketplace, please follow this guide and make sure to use the correct key for the Marketplace repo:
Installation Guide

Please feel free to get in touch with our support in case you have any further questions or concerns or check with Marketplace support in case the installation issue can not be resolved.

Do you offer free technical support?

After purchasing a (non-free) extension we provide 12 month support via support ticket for free.

Do you offer customization service for your extensions?

Yes, please get in touch with our customer support so we can clarify your requirement and provide a quote.

Where can I download my extension?

You can download your extension from your customer account as soon as the payment has been processed.

Do you offer a free trial period?

Unfortunately, we can not offer a free trial period.

However, we do have demo site for all our extensions. Feel free to test all the features and see how the extensions work.

In case of any questions or concerns regarding compatibility or how some extension works our customer support is also always happy to help.

Do you offer refunds?

All our extensions are non-tangible downloadable goods. Hence we can unfortunately not issue refunds.

Refunds will NEVER be issued for services provided such as installation support, customization and software development work.

Changelog

Version: 1.0.0

  • Initial Release

Version: 1.0.1

  • Improved: Changed load order to avoid conflicts with some other inline CSS
  • Added: Example/Default config for safelist when using glider.js

Version: 1.0.2

  • Fixed: Issue with Tailwind !important prefix
  • Improvement: Hyvä Checkout support

Version: 1.0.3

  • Fixed: Conflict with JaJuMa Hyvä PWA

Version: 1.0.4

  • Updated: Compatibility with upcoming extension

Version: 1.0.5

  • Fixed: Issue with M2.4.6 + Varnish

Version: 2.0.0

  • 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

More Extensions

Maybe also interesting for you?
More valuable Extensions and Add-Ons for your Magento Store

Our Customers Are Excited!

How do you like this extension?