Table of Contents & Menu
On this page
Navigation

Critical CSS

Critical CSS is not supported by Hyvä

Enabling this feature without understanding the potential impact may cause loading and performance issues!

What is Critical CSS?

Critical CSS is an older technique for inlining essential CSS to speed up initial page load (above-the-fold content). However, it's often unnecessary and can even hurt performance today, with very few exceptions.

With Hyvä, avoid Critical CSS. This is mainly due to the integration of TailwindCSS, which is designed to be lightweight and efficient.

Why TailwindCSS Makes Critical CSS Obsolete

TailwindCSS automatically includes only necessary styles per page, minimizing CSS file size and unused CSS. This significantly reduces render-blocking time, unlike traditional large global CSS files.

Understanding Critical CSS in Magento

Magento's Luma Theme (not Blank) introduced Critical CSS because its large global CSS often loaded unnecessary styles, creating performance bottlenecks.

Hyvä solves this with CSS utilities for global styles, nearly eliminating unused CSS.

To better understand why Critical CSS is rarely needed today (not just in Hyvä), we recommend reading this article from CSS Wizardry.

Why Was Critical CSS Used in the Past?

Critical CSS aimed to eliminate render-blocking CSS, which delays page interactivity.

However, a "render-blocking CSS" warning in tools like Google Lighthouse often indicates excessive unused CSS or a large CSS file, not necessarily a fundamental error.

Inline CSS: Not Always the Best Solution

Inlining all critical styles can resolve render-blocking warnings but may result in excessively large HTML files. There's no universal solution; balance is key for your site.

Our recommendation:
Use a single global CSS file for most styles, inlining only component/page-specific CSS. Our JIT CMS module exemplifies this by loading CSS only for the current page's content.

Adding Critical CSS in Hyvä (If Absolutely Necessary)

If, despite our recommendations, you *must* implement Critical CSS due to unresolvable issues with existing CSS, follow these steps:

  1. Add the following XML to your theme in the Magento_Theme/layout/default_head_blocks.xml file:

    <?xml version="1.0"?>
<page
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"
>
    <body>
        <referenceBlock name="head.additional">
            <block
                name="critical_css_block" as="critical_css"
                template="Magento_Theme::html/header/criticalCss.phtml"
                ifconfig="dev/css/use_css_critical_path"
            >
                <arguments>
                    <argument
                        name="criticalCssViewModel"
                        xsi:type="object"
                    >Magento\Theme\Block\Html\Header\CriticalCss</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

  2. Create a critical.css file inside your theme’s web/css directory.

  3. Once the file is created, enable Critical CSS in the Magento 2 Admin by navigating to:

    Stores → Configuration → Advanced → Developer → CSS Settings → Use CSS critical path.