Magento 2 Critical CSS per Page Type, Inlined in the Head
SKU: CRITICALCSSPERTYPE1
- own critical CSS per page type and store view
- inline in the head, remaining stylesheet non-blocking
- fallback and size limit, no page type without styling
- version check after theme build, test mode for admins
Einmaliger Kauf · inkl. 12 Monate Updates · zzgl. MwSt.
Magento 2 Critical CSS: visible styles first, the rest afterwards
With Magento 2 Critical CSS from Mironsoft your shop delivers, per page type, only the rules needed for the first visible area inline in the head. The full stylesheet then loads without blocking the render. Home page, category, product page, CMS page and cart each get their own critical CSS, because a product page needs different rules than a category. If a page type has no entry, a fallback applies, and the module watches a size limit. Magento 2 Critical CSS is a focused lever for First Contentful Paint and Largest Contentful Paint.
Per page type
Dedicated critical CSS for home, category, product, CMS, cart and checkout, detected through the layout handle.
Inline in the head
The critical CSS is written directly into the head without an extra request and works with the CSP mechanism.
Rest without blocking
The full stylesheet is loaded afterwards without delaying the first render.
Fallback
If a page type has no CSS of its own, the module uses a default template or serves the stylesheet as usual.
Size limit
An adjustable limit in kilobytes keeps inline CSS from bloating the HTML. Entries that are too large are reported.
Automatically refreshed
After a theme build or stylesheet update a version check marks outdated entries.
Why Magento 2 Critical CSS matters for load time and Core Web Vitals
A stylesheet in the head blocks rendering until it is loaded and processed. Even with good servers the visitor then waits on an empty screen. Anyone searching for Magento 2 render blocking CSS or Magento 2 Critical CSS wants to change exactly that: the visible part appears first, the rest follows. The default setup has no such split.
The choice per page type is decisive. A single critical CSS for all pages is either too large or too small. Magento 2 Critical CSS per page type stays small and hits the elements that are actually visible, such as header, navigation, hero area or product image.
Assign Magento 2 Critical CSS per page type
In the admin you create an entry for each page type. The type is detected through the layout handle, for example for home, category, product or custom CMS pages. A separate set per store view is possible if your stores are built differently. Entries can be copied, enabled and disabled. A type without an entry falls back to the default rule.
- Assignment through the layout handle
- Separate set per store view possible
- Copy, enable and disable entries
Generate critical CSS, check it and refine it by hand
For each page type you generate the critical CSS from a sample URL. An admin button or a CLI command analyses the page and suggests the required rules. The result can be reviewed and extended in the editor, for example with rules for a cookie banner. A preview shows the page with only the critical CSS, so you notice layout jumps immediately.
- Suggestion from a sample URL
- Editor for corrections and additions
- Preview with critical CSS only
Load the remaining CSS without blocking
The full stylesheet is included with a non-blocking loading method. A tiny inline snippet registered through the Hyvä CSP mechanism activates it after loading. Visitors without JavaScript get the stylesheet through a noscript entry. For page types without critical CSS a fallback delivers the stylesheet unchanged, so no page ever appears unstyled.
- Non-blocking loading of the stylesheet
- noscript entry for visitors without JavaScript
- Fallback to normal delivery without an entry
Keep size, version and freshness in view
An overview shows size, date of the last generation and the stylesheet version that each entry matches. After a theme build or deployment the module marks entries as outdated so they get regenerated. The size limit warns when an entry holds too much inline CSS. In test mode only signed-in admin users see the result, while visitors still get the previous delivery.
- Size and version per entry
- Outdated flag after deployment
- Test mode for signed-in admins only
Where Magento 2 Critical CSS helps in daily work
Typical starting points for faster pages.
Weak mobile scores
The shop loads noticeably late on smartphones. Magento 2 Critical CSS puts the visible area on the screen first.
Campaign landing pages
For ad destination pages the page type gets a small, clean Magento 2 Critical CSS, because every second counts there.
Large categories
Category pages with many elements receive only the rules for the first screen, not for the whole product grid.
Several store views
Language versions with a different layout use their own set of entries.
Magento 2 Critical CSS: without and with the module
What changes in delivery.
| Topic | Without module | With Mironsoft Critical CSS |
|---|---|---|
| Stylesheet in the head | Blocks the first render | Loaded without blocking |
| Choice of rules | One stylesheet for all pages | Own critical CSS per page type |
| Maintenance | Manual and error prone | Generate, check, outdated flag |
| Safety | Missing rules show up for the visitor | Fallback and preview before activating |
| Size | Uncontrolled | Adjustable limit in kilobytes |
How we set up Magento 2 Critical CSS for you
The process after you order.
Consultation
We decide which page types and store views get critical CSS and how large entries may be at most.
Installation
We install the module, set up Magento 2 Critical CSS for your Hyvä theme and register the inline part in a CSP compliant way.
Generation
For each page type we generate the entry from a sample URL and refine it.
Test
We check Magento 2 Critical CSS in the preview, in the mobile view and in delivery without JavaScript.
Handover
Your team gets an introduction to the overview, version check and regeneration after updates.
Difference to lazy loading, CSS minification and cache warming
The Mironsoft module for lazy loading images defers images, not stylesheets. Magento 2 Critical CSS deals exclusively with the stylesheet in the head. Minifying and bundling files is still done by Magento or your build, and warming the cache is a separate topic. The modules complement each other and can be combined.
All modules can be combined. The module works with the Hyvä theme and the Tailwind stylesheet and needs no additional library.
No download, personal setup instead
Critical CSS is not listed here as a ready-made download file for self-installation. The purchase is a service commission: we get in touch after the purchase, install the module in your shop and agree on page types, size limit and fallback together with you.
Frequently asked questions
Everything about page types, fallback, freshness and how the purchase works.
How do I set up Magento 2 Critical CSS?
Why separate critical CSS per page type?
What happens if a page type has no entry?
How does the critical CSS stay up to date?
Does it interfere with caching?
Does Magento 2 Critical CSS work with Hyvä and CSP?
How large may the critical CSS be?
Does the module guarantee better scores?
How is this different from lazy loading?
Can I download and install the module myself?
Recently Viewed Products
Magento 2 Critical CSS – Mironsoft