Do you find all information about us and our services?
Extensions by Category
4. 📦 Adding Inline CSS: Delivery & Compatibility Strategies
Once your page-specific CSS has been generated, the next step is to deliver it to the browser.
This section provides powerful strategies to control exactly how the optimized CSS is added to your pages,
allowing you to choose between maximum performance, guaranteed compatibility,
or a sophisticated hybrid approach.
4.1 🛡️ Core Delivery Strategies
The extension offers three primary strategies for delivering CSS.
You can choose the one that best fits your store's performance goals and technical requirements.
| Strategy | How It Works | Performance Impact | Best Use Case |
|---|---|---|---|
| Always Inline | Inlines all used CSS on every page load. Does not load an external stylesheet. (This is the default behavior when both options below are disabled). | Highest performance for first-time visitors. Slightly larger HTML payload on every visit. |
For stores prioritizing maximum conversion and Core Web Vitals scores above all else. The recommended production setting. |
| Compatibility Mode | Inlines used CSS for instant paint, but also loads the full stylesheet asynchronously as a 100% reliable fallback. | Excellent performance for first-time visitors. Provides a 100% safe fallback. |
Ideal for initial testing or on complex sites with many third-party scripts to guarantee zero visual regressions. |
| First Page Load Only | Inlines CSS only on the very first page view of a session. Subsequent views use the cached external stylesheet. | Optimal balance. Maximizes first-impression speed while leveraging browser caching for repeat views. | The ultimate strategy for stores that want to optimize for both new and returning visitors, but requires awareness of the FPC implications. |
⚠️ Warning: Impact on Full Page Cache (Varnish)
Enabling the "First Page Load Only" strategy has a critical technical implication:
it requires your Full Page Cache (like Varnish) to store two distinct versions of each page - one with inline CSS for new visitors, and one without for returning visitors.
This will increase the memory required by your FPC and may mean it takes longer for your cache to become fully "warmed."
This is a strategic trade-off between optimal user experience and cache efficiency.
4.2 ⚙️ Fine-Tuning Delivery
These settings allow you to further refine the delivery behavior, especially when using Compatibility Mode or First Page Load Only mode.
- Load styles.css Only After User Interaction:
This option applies if either "Compatibility Mode" or "First Page Load Only" is enabled.
When set toYes, the fullstyles.cssfile will only be loaded after the first user interaction (like a click, scroll, or keypress), ensuring it has absolutely no impact on your initial Page Speed and Core Web Vitals scores.
If disabled, the file is loaded with low priority. - Exclude Pages:
This field allows you to prevent the extension from running on specific pages.
Enter the URLs as relative paths (e.g.,/contact,/my-custom-page), one per line.
For these URLs, CSS will not be inlined, and the standard external stylesheet will be loaded normally.
4.3 📞 Need Help?
Still have questions or need help with your setup? Our expert team is here to assist.
Please don't hesitate to contact our support team for personalized assistance.
Ready to unlock instant rendering for your store?
The JaJuMa Hyvä Inline CSS extension is the definitive solution for a faster, higher-ranking Hyvä store.
Find all you need to know and more valuable insights about Hyvä and Magento.
Expertly curated by JaJuMa:
🚀
Launch the JaJuMa Hyväverse
Your central resource for everything Hyvä.
Explore the Magento Metropolis!
Your central resource for everything Magento.
