JaJuMa Services
Description
Run Your Hyvä Themes Magento Store Without CSS File
with Hyvä Inline CSS by JaJuMa!
Say Good-Bye To Your styles.css File
Speed Up Page Rendering By Removing Blocking Styles
Improve FCP & LCP Performance KPIs
The Problem
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?
The Solution
Using
Inline CSS
Improve your First Contentful Paint (FCP) & Largest Contentful Paint (LCP) performance KPI's by speeding up page rendering for your Hyvä Themes Magento store by moving your CSS inline and at the same time remove unused CSS 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
- Caching Inline CSS
- 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!.
Further Questions? Have a Feature-Request?
Or need some individual customization?
Lets get in touch:
Highlights
Hyvä Inline CSS for Hyvä Themes & Magento 2 by JaJuMa-Develop
Inline CSS =
Run your Hyvä Themes Magento store without CSS file - Faster Page Rendering
Avoid Unused CSS
Auto Inline CSS
For Hyvä Themes
Auto Remove/Cleanup
Unused CSS
For Hyvä Themes
No Render-Blocking
CSS
On Hyvä Themes
Safe List Config
For Missing/Dynamic Classes
Compatibility Mode
= 100%
Compatibility
Inline CSS
Optionally
Only On 1st Pageload
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!
Why Do I Need Hyvä Inline CSS For My 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.
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 and
- with unused CSS removed as much as possible.
Saving
- the network request to download the default styles.css
- 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.
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 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.
- 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).
- 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.
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.
- In case of loading the CSS as a file, the LCP event still occurs only after the CSS file has been downloaded.
- 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:
- With CSS file: Your LCP event will not happen before CSS file & LCP element have been downloaded.
- With Inline CSS: Your LCP event will happen as soon as your LCP element has been downloaded.
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.
Generate & Inline ALL CSS
for Hyvä Themes & Magento 2
How It Works:
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 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.)
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:
Safe List Config
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?
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!
Compatibility Mode
= 100% Compatibility
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.
Configuration Menu & Screenshots
Hyvä Inline CSS Debug Tool
Hyvä Inline CSS Configs
Manual
As easy as it can get::
- Install Extension & node package,
- Enable & Configure Hyvä Inline CSS &
- Check how it works with the debug tool...
...thats it!
Changelog
Version: 1.0.0
- Initial Release
More Extensions
Maybe also interesting for you?
More valuable Extensions and Add-Ons for your Magento Store
Magento Extensions - Discover Now!
We get back to you as soon as possible!
