Magento 2 Critical CSS je Seitentyp im Head einbetten
SKU: CRITICALCSSPERTYPE1
- eigenes Critical CSS je Seitentyp und Store-View
- Inline im Head, restliches Stylesheet nicht blockierend
- Fallback und Größenlimit, kein Seitentyp ohne Styling
- Versionsprüfung nach Theme-Build, Test-Modus für Admins
Einmaliger Kauf · inkl. 12 Monate Updates · zzgl. MwSt.
Magento 2 Critical CSS: das sichtbare CSS zuerst, der Rest danach
Mit Magento 2 Critical CSS von Mironsoft liefert Ihr Shop pro Seitentyp nur die Regeln inline im Head aus, die für den ersten sichtbaren Bereich nötig sind. Das große Stylesheet lädt anschließend ohne Render-Blockade nach. Startseite, Kategorie, Produktseite, CMS-Seite und Warenkorb erhalten jeweils ihr eigenes Critical CSS, denn eine Produktseite braucht andere Regeln als eine Kategorie. Fehlt für einen Seitentyp ein Eintrag, greift ein Fallback, und das Modul achtet auf ein Größenlimit. Magento 2 Critical CSS ist damit ein gezielter Hebel für First Contentful Paint und Largest Contentful Paint.
Je Seitentyp
Eigenes Critical CSS für Startseite, Kategorie, Produkt, CMS, Warenkorb und Checkout, erkannt über den Layout-Handle.
Inline im Head
Das Critical CSS wird direkt in den Head geschrieben, ohne zusätzliche Anfrage, und mit dem CSP-Mechanismus vertragen.
Rest nicht blockierend
Das vollständige Stylesheet wird nachgeladen, ohne das erste Rendering zu verzögern.
Fallback
Hat ein Seitentyp kein eigenes CSS, nutzt das Modul eine Standardvorlage oder liefert das Stylesheet normal aus.
Größenlimit
Ein einstellbares Limit in Kilobyte verhindert, dass das Inline-CSS den HTML-Code aufbläht. Zu große Einträge werden gemeldet.
Automatisch neu
Nach einem Theme-Build oder Stylesheet-Update markiert eine Versionsprüfung veraltete Einträge.
Warum Magento 2 Critical CSS für Ladezeit und Core Web Vitals zählt
Ein Stylesheet im Head blockiert das Rendering, bis es geladen und verarbeitet ist. Selbst bei guten Servern wartet der Besucher dann auf einen leeren Bildschirm. Wer nach Magento 2 render blocking CSS oder Magento 2 Critical CSS sucht, will genau das ändern: Zuerst erscheint der sichtbare Teil, danach folgt der Rest. Im Standard fehlt eine solche Aufteilung.
Entscheidend ist die Auswahl pro Seitentyp. Ein einziges Critical CSS für alle Seiten ist zu groß oder zu knapp. Magento 2 Critical CSS je Seitentyp bleibt klein und trifft die tatsächlich sichtbaren Elemente, etwa Header, Navigation, Hero-Bereich oder Produktbild.
Magento 2 Critical CSS pro Seitentyp zuordnen
Im Admin legen Sie für jeden Seitentyp einen Eintrag an. Der Typ wird über den Layout-Handle erkannt, zum Beispiel für Startseite, Kategorie, Produkt oder eigene CMS-Seiten. Pro Store-View ist ein eigener Satz möglich, falls Ihre Stores unterschiedlich aufgebaut sind. Einträge lassen sich kopieren, aktivieren und deaktivieren. Ein Typ ohne Eintrag fällt auf die Standardregel zurück.
- Zuordnung über Layout-Handle
- Eigener Satz je Store-View möglich
- Einträge kopieren, aktivieren, deaktivieren
Critical CSS erzeugen, prüfen und von Hand nachbessern
Für jeden Seitentyp erzeugen Sie das Critical CSS aus einer Beispiel-Adresse. Ein Admin-Button oder ein CLI-Befehl wertet die Seite aus und schlägt die benötigten Regeln vor. Das Ergebnis lässt sich im Editor prüfen und ergänzen, etwa um Regeln für ein Cookie-Banner. Eine Vorschau zeigt die Seite nur mit dem Critical CSS, sodass Sie Sprünge im Layout sofort erkennen.
- Vorschlag aus einer Beispiel-Adresse
- Editor für Korrekturen und Ergänzungen
- Vorschau nur mit Critical CSS
Das restliche CSS nicht blockierend nachladen
Das vollständige Stylesheet wird mit einem nicht blockierenden Ladeverfahren eingebunden. Ein winziger Inline-Schnipsel, der über den Hyvä-CSP-Mechanismus registriert wird, schaltet es nach dem Laden scharf. Wer JavaScript deaktiviert hat, erhält das Stylesheet über einen noscript-Eintrag. Für Seitentypen ohne Critical CSS gilt ein Fallback, der das Stylesheet unverändert ausliefert, damit keine Seite ohne Styling erscheint.
- Nicht blockierendes Nachladen des Stylesheets
- noscript-Eintrag für Besucher ohne JavaScript
- Fallback auf normale Auslieferung ohne Eintrag
Größe, Version und Aktualität im Blick behalten
Eine Übersicht zeigt je Eintrag die Größe, das Datum der letzten Erzeugung und die Version des Stylesheets, zu dem er passt. Nach einem Theme-Build oder Deployment markiert das Modul Einträge als veraltet, damit sie neu erzeugt werden. Das Größenlimit warnt, wenn ein Eintrag zu viel Inline-CSS enthält. Im Test-Modus sehen nur angemeldete Admin-Benutzer das Ergebnis, die Besucher bekommen weiterhin die bisherige Auslieferung.
- Größe und Version je Eintrag
- Veraltet-Markierung nach Deployment
- Test-Modus nur für angemeldete Admins
Wo Magento 2 Critical CSS im Shop-Alltag hilft
Typische Ausgangslagen für schnellere Seiten.
Schwache Mobilwerte
Der Shop lädt auf dem Smartphone spürbar verzögert. Magento 2 Critical CSS bringt den sichtbaren Bereich zuerst auf den Bildschirm.
Kampagnen-Landingpages
Für Anzeigen-Zielseiten bekommt der Seitentyp ein kleines, sauberes Critical CSS, weil dort jede Sekunde zählt.
Große Kategorien
Kategorieseiten mit vielen Elementen erhalten nur die Regeln für den ersten Bildschirm, nicht für den gesamten Produktraster.
Mehrere Store-Views
Sprachversionen mit abweichendem Layout nutzen ihren eigenen Satz an Einträgen.
Magento 2 Critical CSS: ohne und mit Modul im Vergleich
Was sich in der Auslieferung ändert.
| Thema | Ohne Modul | Mit Mironsoft Critical CSS |
|---|---|---|
| Stylesheet im Head | Blockiert das erste Rendering | Wird nicht blockierend nachgeladen |
| Auswahl der Regeln | Ein Stylesheet für alle Seiten | Eigenes Critical CSS je Seitentyp |
| Pflege | Manuell und fehleranfällig | Erzeugen, prüfen, Veraltet-Markierung |
| Sicherheit | Fehlende Regeln zeigen sich beim Besucher | Fallback und Vorschau vor dem Aktivieren |
| Größe | Unkontrolliert | Einstellbares Limit in Kilobyte |
So richten wir Magento 2 Critical CSS für Sie ein
Der Ablauf nach Ihrer Beauftragung.
Abstimmung
Wir legen fest, welche Seitentypen und Store-Views Critical CSS erhalten und wie groß die Einträge höchstens sein dürfen.
Installation
Wir installieren das Modul, richten Magento 2 Critical CSS für Ihr Hyvä Theme ein und registrieren den Inline-Anteil CSP-konform.
Erzeugung
Je Seitentyp erzeugen wir den Eintrag aus einer Beispiel-Adresse und bessern ihn nach.
Test
Wir prüfen Magento 2 Critical CSS in der Vorschau, in der Mobilansicht und bei der Auslieferung ohne JavaScript.
Übergabe
Ihr Team erhält eine Einweisung in Übersicht, Versionsprüfung und Neuerzeugung nach Updates.
Abgrenzung zu Lazy Loading, CSS-Minimierung und Cache-Aufwärmen
Das Mironsoft-Modul für Lazy Loading von Bildern verschiebt Bilder, nicht Stylesheets. Magento 2 Critical CSS kümmert sich ausschließlich um das Stylesheet im Head. Die Minimierung und das Bündeln von Dateien erledigt weiterhin Magento beziehungsweise Ihr Build, und das Aufwärmen des Caches ist ein eigenes Thema. Die Module ergänzen sich und lassen sich kombinieren.
Alle Module lassen sich kombinieren. Das Modul arbeitet mit dem Hyvä Theme und Tailwind-Stylesheet und braucht keine Zusatzbibliothek.
Kein Download, sondern persönliche Einrichtung
Critical CSS ist hier nicht als fertige Download-Datei zum Selbst-Installieren gelistet. Der Kauf ist eine Beauftragung: Wir melden uns nach dem Kauf, installieren das Modul in Ihrem Shop und stimmen Seitentypen, Größenlimit und Fallback gemeinsam mit Ihnen ab.
Häufige Fragen
Alles Wichtige zu Seitentypen, Fallback, Aktualität und zum Ablauf des Kaufs.
Wie kann ich in Magento 2 Critical CSS einrichten?
Warum ein eigenes Critical CSS je Seitentyp?
Was passiert, wenn ein Seitentyp keinen Eintrag hat?
Wie bleibt das Critical CSS aktuell?
Wird das Cache-System gestört?
Funktioniert Magento 2 Critical CSS mit Hyvä und CSP?
Wie groß darf das Critical CSS sein?
Garantiert das Modul bessere Messwerte?
Was unterscheidet das von Lazy Loading?
Kann ich das Modul selbst herunterladen und installieren?
Zuletzt angesehene Artikel
Magento 2 Critical CSS – Mironsoft