JaJuMa Services
Beschreibung
Betreiben Sie Ihren Hyvä Themes Magento-Shop ohne CSS-Datei
mit Hyvä Inline CSS by JaJuMa!Optimierung der FCP & LCP Performance KPIs
Verabschieden Sie sich von Ihrer styles.css-Datei
Beschleunigung des Seiten-Renderings durch Entfernen von Render-Blocking Styles
Das Problem
Render Blocking
CSS Datei
Die Performance von Hyvä Themes ist legendär.
Aber bessere Performance ist besser, richtig?
Auch wenn die Leistung von Hyvä Themes hervorragend ist, gibt es immer noch Möglichkeiten zur Verbesserung.
Hyvä Themes zum Beispiel nutzt TailwindCSS, um die Menge an CSS zu reduzieren, die von Magento-Shops verwendet wird, die mit Hyvä Themes laufen.
Das CSS enthält jedoch weiterhin Styles für die gesamte Website und wird als Datei styles.css über eine separate Netzwerkanforderung geladen.
Der Browser muss warten, bis diese Datei, einschließlich der nicht verwendeten Stile, heruntergeladen wurde, bevor er die Seite rendern kann. Mit anderen Worten, diese styles.css ist eine Rendering-Blocking-Ressource in den Hyvä-Themes-Shops.
Nun, wenn Sie Ihre Magento-Shop mit Hyvä Themes betreiben, wollen Sie wahrscheinlich Hyvä-Style Performance ohne Grenzen, keine Render-Blocking-Styles, nur reine 100% Hyvä Style Lade-und Rendering-Geschwindigkeit, nicht wahr?
Die Lösung
Inline CSS
Nutzen
Optimieren Sie Ihre First Contentful Paint (FCP) & Largest Contentful Paint (LCP) Performance KPI'S durch Beschleunigung des Seiten-Rendering für Ihren Hyvä Themes Magento-Shop, indem Sie Ihr CSS inline verschieben und gleichzeitig ungenutztes CSS entfernen, indem Sie
JaJuMa Hyvä Inline CSS extension nutzen.
JaJuMa Hyvä Inline CSS arbeitet vollautomatisch, generiert das CSS on-the-fly beim Laden der Seite, entfernt ungenutztes CSS und fügt es beim Laden der Seite inline in die Seite ein.
Mit dieser Erweiterung erhalten Sie ein nie dagewesenes Maß an CSS-Optimierung. Entwickelt für maximale Leistung mit Flexibilität und Blick auf Kompatibilität:
- CSS pro Seite on-the-fly generieren
- Caching des Inline CSS
- Konfigurationen für Sonderfälle
- Kompatibilitätsmodus
- Inline-CSS nur beim 1. Seitenaufbau, um Overhead durch nicht gecachte Inline-CSS zu vermeiden
Lesen Sie weiter unten mehr über die Funktionsweise und all die erstaunlichen Funktionen -
Let's Go CSSless!.
Sie haben noch Fragen? Einen Feature-Request?
Oder benötigen individuelle Anpassungen?
Schreiben Sie uns:
Highlights
Hyvä Inline CSS für Hyvä Themes & Magento 2 by JaJuMa-Develop
Inline CSS =
Betreiben Sie Ihren Hyvä Themes Magento-Shop ohne CSS-Datei - Schnelleres Rendering der Seite
Ungenutztes CSS vermeiden
Auto Inline CSS
Für Hyvä Themes
Auto Entfernen/Bereinigen
von ungenutztem CSS
Für Hyvä Themes
Kein Render-Blocking
CSS
Mit Hyvä Themes
Safe List Konfig
Für fehlende/dynamische Klassen
Kompatibilitätsmodus
= 100%
Kompatibilität
Inline CSS
optional
nur beim 1. Pageload
Details
Inline CSS für Hyvä Themes & Magento 2
by JaJuMa Im Detail.
Die letzte Grenze der CSS-Optimierung überschreiten
Macht Headless sagten sie... CSSless haben wir gemacht!
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.
An dieser Stelle kommt Hyvä Inline CSS von JaJuMa ins Spiel.
Überschreiten der letzten Grenze in der CSS-Optimierung:
Sie können jetzt Ihren Magento 2-Shop betreiben
- ohne jede CSS-Datei und
- mit ungenutztem CSS so weit wie möglich entfernt.
und sparen
- die Netzanfrage zum Herunterladen der Standarddatei styles.css
- die Zeit, die der Browser wartet, bis die Styles heruntergeladen sind, bevor er die Seite rendert
- einige weitere Kilobyte an Daten, die von Ihren Kunden heruntergeladen werden müssen, um Ihren Shop zu sehen.
Und wie bei allen JaJuMa-Erweiterungen haben wir auch diese Erweiterung 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 Leistungskennzahlen).
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.
Der Performanceunterschied zwischen beiden wird durch das First Contentful Paint-Ereignis (FCP) deutlich.
- Im Falle des Ladens des CSS als Datei tritt das FCP-Ereignis erst nach dem Herunterladen der CSS Datei auf (-> CSS file ist render-blocking).
- Im Falle von Inline-CSS tritt das FCP-Ereignis bereits ein, bevor das HTML-Dokument vollständig heruntergeladen wurde (-> Inline CSS ist nicht render-blocking).
Eine deutliche Verbesserung hinsichtlich der Startzeit des Rendering sowie der First Contentful Paint (FCP) KPI. Und da die Inhalte früher angezeigt werden, wird die Performance von den Kunden als viel besser empfunden.
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.
- Wenn das CSS als Datei geladen wird, tritt das LCP-Ereignis auch erst dann ein, nachdem die CSS-Datei heruntergeladen wurde.
- 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:
- Mit CSS-Datei: Ihr LCP-Ereignis wird nicht stattfinden, bevor die CSS-Datei & LCP-Element heruntergeladen wurde.
- Mit Inline-CSS: Ihr LCP-Ereignis wird ausgelöst, sobald Ihr LCP-Element heruntergeladen wurde.
Die Seitenladevorgänge in den obigen Beispielen wurden bei langsamer 3G-Netzdrosselung mit dem Chrome-Browser aufgezeichnet.
Wie sehr Sie Ihre Leistungskennzahlen mit dieser Erweiterung verbessern können, hängt weitgehend von der Geschwindigkeit des Client-Netzes sowie von der Größe Ihres LCP-Elements ab.
Um maximale Vorteile zu erzielen, wird empfohlen, auch die Belastung der LCP-Elemente zu optimieren, z. B. durch die Verwendung von Next-Generation Bildformate (WebP & AVIF) mit unserem Ultimate Image Optimizer und sicherzustellen, dass das LCP-Image mit höchster Priorität geladen wird, z. B. durch Verwendung unserer Preload Critical Resources & Assets Extension
Generierung & Inline einfügen DES GESAMTEN CSS
für Hyvä Themes & Magento 2
Wie es funktioniert:
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 Erweiterung 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:
Step 1:
Verwendete CSS-Klassen sammeln
Beim Laden der Seite werden alle CSS-Klassen gesammelt. Die Liste der gefundenen CSS Klassen wird bereinigt, d. h. Duplikate werden entfernt und sortiert.
Für die bereinigte Liste wird ein Hash-Wert als Kennung für jede eindeutige CSS-Sammlung auf einer Website erstellt.
Step 2:
Generate CSS
Step 2.a.: Hash-Wert im Cache vorhanden
Wenn der Hash-Wert aus Schritt 1 bereits im Cache vorhanden ist, wird das zuvor generierte CSS verwendet.
Dadurch wird die Häufigkeit, mit der CSS on-the-fly generiert werden muss, erheblich reduziert.
Step 2.b.: Neuer Hash-Wert
Auf der Grundlage der gefundenen CSS-Klassen wird das CSS optimiert, alle nicht verwendeten Stile werden entfernt und das verbleibende CSS wird minimiert und zusammen mit dem Hash-Wert im Cache gespeichert.
Step 3:
Inline CSS
Bevor die Seite an den Browser ausgeliefert wird, wird das generierte CSS inline hinzugefügt.
Das inline CSS wird entweder aus dem Cache geladen (siehe Schritt 2.a.) oder on-the-fly generiert (siehe Schritt 2.b.)
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 unten, um mehr über all die erstaunlichen und fortschrittlichen Funktionen dieser Extension zu erfahren:
Safe List Konfig
For Missing/Dynamic Classes
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 Erweiterung 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!
Kompatibilitätsmodus
= 100% Compatibility
Inline-CSS nur bei 1. Pageload
Inline CSS nur bei Bedarf einbinden
Die Datei style.css verwenden, wenn sie sich bereits im Browser-Cache befindet
Aus Sicht der Performance ist es eine perfekte Lösung, nur das benötigte CSS als Inline-CSS hinzuzufügen - beim ersten Laden einer Seite...
Der Nachteil: Anders als CSS-Dateien kann Inline-CSS nicht vom Browser gecached werden. Daher kann das Inline-CSS, auch wenn es sehr klein ist, als unnötiger Overhead bei nachfolgenden Seitenaufrufen angesehen werden, wenn die reguläre styles.css-Datei bereits im Browser-Cache vorhanden ist.
Machen Sie sich Sorgen, dass 7kb oder 8kb zu viel unnötiger Overhead auf Ihren Seiten sind?
Inline-CSS optional nur bei 1. Pageload: Wenn diese Option aktiviert ist, fügt die Extension nur Inline-Styles hinzu, solange der Browser die Datei styles.css noch nicht heruntergeladen hat. Sobald die Datei styles.css auf der Grundlage eines Cookies im Browser-Cache vorhanden ist, werden die Stile nicht mehr inline hinzugefügt, sondern die Seiten werden normal geladen, wie ohne die Erweiterung.
Konfigurations-Menu & Screenshots
Hyvä Inline CSS Debug Tool
Hyvä Inline CSS Konfigs
Manual
Einfacher geht's nicht:
- Extension & node Package installieren,
- Hyvä Inline CSS aktivieren und konfigurieren &
- mit dem Debug Tool testen wie es funktioniert...
...das war's!
Changelog
Version: 1.0.0
- Initial Release
Weitere Extensions
Vielleicht auch interessant für Sie?
Weitere wertvolle Extensions und Erweiterungen für Ihren Magento Shop
Magento Extensions - Jetzt Entdecken!
Wir werden uns umgehend mit Ihnen in Verbindung setzen!
