Hyvä Inline CSS für Magento 2

Warum brauche ich Hyvä Inline CSS für meinen Magento-Shop?

Performance ist einer der Hauptgründe für Händler, ihren Magento-Shop mit Hyvä Themes zu betreiben.
Und keine Frage, jeder, der das Hyvä-Theme verwendet, ist bestrebt, nicht nur die hervorragende Performance zu erhalten, sondern so viel wie möglich zu optimieren, indem er seinen Shop nach der Hyvä Philosophie, customized, Hyvä "All-In" mit Berücksichtigung der Performance mit jeder Codezeile.

Entwickelt mit viel Sorgfalt, Flexibilität und Liebe zum Detail

Und wie bei allen JaJuMa-Extensions haben wir auch diese Extension mit viel Sorgfalt, Flexibilität und Liebe zum Detail entwickelt.

Haben Sie Angst, einige Styles auf Ihrer Website zu zerstören?
Wir haben Konfigurationen hinzugefügt, die es Ihnen ermöglichen, zu kontrollieren, wie die Extension auch mit Ihren benutzerdefinierten und speziellen Fällen funktioniert.

Sie haben keine Lust, Zeit mit Konfigurationen zu verbringen?
Aktivieren Sie einfach den Kompatibilitätsmodus, um eine 100-prozentige Kompatibilität mit Ihren bestehenden Stilen zu gewährleisten (und natürlich ohne negative Auswirkungen auf Ihre Performance-Kennzahlen).

Sind Sie besorgt über den Overhead, der entsteht, wenn Sie einige wenige KB CSS auf Ihrer Website haben?
Optional erlaubt die Extension das Hinzufügen von CSS inline nur beim ersten Seitenaufruf, verwendet aber die reguläre styles.css bei nachfolgenden Seitenaufrufen, wenn die CSS-Datei bereits im Browser-Cache ist und nicht mehr heruntergeladen werden muss.

In Action: Inline CSS vs. CSS Datei im Vergleich
First Contentful Paint (FCP)

Das Bild auf der linken Seite zeigt einen Vergleich zwischen einem Seitenlade-Wasserfall mit CSS, das als styles.css-Datei geladen wird, und Inline-CSS.
Der obige Wasserfall zeigt den violetten Balken, der das Laden der Datei styles.css mit einer Größe von 15kb darstellt.
Der untere Wasserfall zeigt keinen violetten Balken, aber das CSS wird inline in das HTML-Dokument eingefügt, was durch den blauen Balken mit einer Größe von ~7 KB dargestellt wird.

In Action: Inline CSS vs. CSS Datei im Vergleich
Largest Contentful Paint (LCP)

Wie Sie in der obigen Abbildung sehen können, wird das Largest Contentful Paint durch die Verwendung von Inline-CSS nur geringfügig verbessert. Dies liegt daran, dass das LCP durch die Zeit bestimmt wird, die für das Herunterladen des LCP-Bildes benötigt wird.

Betrachten wir nun ein Beispiel, bei dem das LCP-Element kein Bild, sondern ein Text ist.

1. Wenn das CSS als Datei geladen wird, tritt das LCP-Ereignis auch erst dann ein, nachdem die CSS-Datei heruntergeladen wurde.
2. Im Falle von Inline-CSS tritt das LCP-Ereignis nun aber auch auf, bevor das HTML-Dokument vollständig heruntergeladen wurde.

Diese Beispiele zeigen, dass sich Inline-CSS nicht direkt auf Ihren LCP auswirkt, aber es ändert die Art und Weise, wie Ihr LCP ermittelt wird:

1. Mit CSS-Datei: Ihr LCP-Ereignis wird nicht stattfinden, bevor die CSS-Datei & LCP-Element heruntergeladen wurde.
2. Mit Inline-CSS: Ihr LCP-Ereignis wird ausgelöst, sobald Ihr LCP-Element heruntergeladen wurde.

Wie es funktioniert: Generierung & Inline einfügen DES GESAMTEN CSS für Hyvä Themes & Magento 2

Erinnern Sie sich noch an die Schwierigkeiten bei der Erstellung und Einbindung von kritischem CSS zur Optimierung der Leistung auf Luma?
JaJuMa Inline CSS für Hyvä Themes geht noch einen Schritt weiter:
Unsere Extension generiert und inlined ALLES CSS für jede Seite in Ihrem Magento-Shop, voll automatisiert!
Erfahren Sie mehr darüber, wie die ultimative CSS-Optimierung funktioniert:

Auf Geschwindigkeit und Kompatibilität ausgelegt

JaJuMa Inline CSS ist auf Geschwindigkeit ausgelegt, indem es automatisch das kleinstmögliche CSS einbindet, um Rendering-blockierende CSS-Dateien zu vermeiden.
Zwischenspeicherung der generierten Stile in einem langlebigen Cache, um zeitaufwändige Verarbeitung so weit wie möglich zu vermeiden.
Optionales Inlining von CSS nur bei Bedarf, um unnötigen Overhead zu vermeiden.

Aber es gibt noch mehr:
Die Extension wurde mit Blick auf Kompatibilität entwickelt und berücksichtigt verschiedene Zustände, z. B. eingeloggter Benutzer/Gast, verschiedene Styles pro Shop-Ansicht usw., um sicherzustellen, dass sie auch auf angepassten Websites funktioniert, ohne Stylings zu zerstören.

Lesen Sie weiter, um mehr über all die erstaunlichen und fortschrittlichen Funktionen dieser Extension zu erfahren:

Haben Sie dynamisch gerenderte Inhalte auf Ihrer Website?

Inhalte, die über eine API per AJAX/Graphql/REST geladen werden und neue Styles zu Ihrer Seite hinzufügen?

Safe List Konfiguration: Die Extension verfügt über eine Safe List Konfiguration, mit der Sie jeden Style hinzufügen können, der nicht automatisch erkannt werden kann!

Sie möchten die Safe List nicht manuell konfigurieren?

Möchten Sie zu 100 % sicher sein, dass auf Ihrer Website keine Styles falsch dargestellt werden, wenn Sie Inline-CSS verwenden, selbst bei dynamisch gerenderten Inhalten?

Kompatibilitätsmodus: Wenn Sie den Kompatibilitätsmodus aktivieren, können Sie weiterhin Ihre normale styles.css laden - natürlich ohne Kompromisse bei der Performance!
Das Inline-CSS ermöglicht es dem Browser, die Seite zu rendern, ohne darauf zu warten, dass die CSS-Datei geladen wird, und die CSS-Datei wird mit niedriger Priorität oder erst nach einer Benutzerinteraktion geladen, ohne dass dies Auswirkungen auf Ihre Performance-KPIs hat!