Auschecken über Ihr Konto
Als Neukunde auschecken
Die einzige innovative Extension zur Vermeidung von Render-Blocking-Styles und ungenutztem CSS durch automatische Generierung von CSS individuell je Seite!
Erweiterte Core Web Vitals (CWV) Optimierung für schnellere FCP (First Contentful Paint) & LCP (Largest Contentful Paint).
Überschreiten der letzten Grenze der CSS-Optimierung für Ihren Hyvä Theme Magento 2 Shop
Lizenz:
Geprüft und verifiziert von Magento Marketplace
1st Extension Provider
Mit Hyvä Support
Awesome seit 2021!
Unverschlüsselt. 100% Open Source & anpassbar
Coding Standards. Sauberer & lesbarer Code
Unzählige zufriedene Kunden: Seien Sie der Nächste!
Unsere Extensions sind gebaut mit Liebe und Leidenschaft für neue Dinge, Perfektion und Performance.
Unsere Extensions sind in unseren eigenen Kundenprojekten praxiserprobt.
Wir haben eine wirklich knifflige Anpassung einer Erweiterung in Auftrag gegeben, die andere Agenturen nicht bewältigen konnten...und die Jungs von JaJuMa haben einen fantastischen Job gemacht! Wir freuen uns, weiterhin mit JaJuMa zusammenzuarbeiten.
Wir sind sehr zufrieden mit diesem Modul. Es verkleinert die Größe unserer Bilder und somit ist das Laden unserer Seiten viel schneller geworden. Wir empfehlen dieses Modul für jeden!!!
Betreiben Sie Ihren Hyvä Themes Magento-Shop ohne CSS-Datei mit Hyvä Inline CSS by JaJuMa!
Verabschieden Sie sich von Ihren CSS-Dateien & Ungenutztem CSS
Beschleunigung des Seiten-Renderings durch Entfernen von Render-Blocking Styles
Optimierung der FCP & LCP Performance KPIs
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?
Kein Problem, wir haben es für Sie getan: Next-Level CSS-Optimierung für Ihren Hyvä Themes-Shop...
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.
Entfernen Sie unbenutztes CSS und verschieben Sie das verbleibende CSS inline mit der
JaJuMa Hyvä Inline CSS Extension.
JaJuMa Hyvä Inline CSS funktioniert voll automatisiert, 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 Extension erhalten Sie ein nie dagewesenes Maß an CSS-Optimierung.
Entwickelt für maximale Leistung unter Berücksichtigung von Flexibilität und Kompatibilität:
Lesen Sie weiter unten mehr über die Funktionsweise und all die erstaunlichen Funktionen - Let's Go CSSless!
Hyvä Inline CSS für Hyvä Themes & Magento 2 by JaJuMa-Develop =
Schnelleres Rendering der Seite
Betreiben Sie Ihren Hyvä Themes Magento-Shop ohne CSS-Datei
Ungenutztes CSS vermeiden
Automatisch
Generiertes CSS
je Seite
Automatische
Bereinigung von
ungenutztem CSS für Hyvä Themes
Render-Blocking CSS
Entfernen/Vermeiden
mit Hyvä Themes
Custom/3rd Party
CSS Dateien
Werden Unterstützt
Safe List Konfig Für
Fehlende/Dynamische
CSS Classes um Kompatibilität zu gewährleisten
Inline CSS Generierungs-
prozess Inklusive
Dateien Mit Dynamischen CSS classes
Compatibility Mode =
100% Kompatibilität
Out-Of-The-Box via optionalem Fallback
Inline CSS Optional
Nur Beim 1. Pageload
Nutzung der CSS-Datei bei folgenden Anfragen
Debug Tool
Zum Einfachen Prüfen
Und Checken Das Es Funktioniert
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!
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.
Erinnern Sie sich an das Erstellen und Hinzufügen von "Critical CSS", um Rendering-blockierende Stile zu vermeiden?
Ein mühsamer, fehleranfälliger und schwer zu pflegender Prozess, der FOUC-Probleme (Flash Of Unstyled Content) mit sich brachte...
Zum Glück gehört das jetzt der Vergangenheit an!
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
Mit Hyvä Inline CSS sparen Sie sich
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.
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.
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.
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.
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:
Die Seitenladevorgänge in den obigen Beispielen wurden bei langsamer 3G-Netzdrosselung mit dem Chrome-Browser aufgezeichnet.
Wie sehr Sie Ihre Leistungskennzahlen mit dieser Extension 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.
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:
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.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.
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.)
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.
Sogar custom/3rd Party CSS Dateien werden unterstützt und
können in den Inline-CSS-Generierungsprozess einbezogen werden.
Lesen Sie weiter, um mehr über all die erstaunlichen und fortschrittlichen Funktionen dieser Extension zu erfahren:
Für Fehlende/Dynamische Klassen
Inhalte, die über eine API per AJAX/Graphql/REST geladen werden und neue Styles zu Ihrer Seite hinzufügen?
Add Files For Purge CSS: Konfigurieren Sie alle Dateien, die dynamisch gerenderte CSS-Klassen enthalten. Diese Dateien werden in den Inline-CSS-Generierungsprozess einbezogen und die in diesen Dateien gefundenen Klassen werden zu Ihrem Inline-CSS hinzugefügt!
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!
= 100% Kompatibilität
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!
Inline CSS nur bei Bedarf einbinden
Die Datei style.css verwenden, wenn sie sich
bereits im Browser-Cache befindet
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 Extension.
Version: 1.0.0
Version: 1.0.1
Version: 1.0.2
Version: 1.0.3
Version: 1.0.4
Version: 1.0.5
Version: 2.0.0
Version: 2.0.1
Version: 2.0.2
Vielleicht auch interessant für Sie?
Weitere wertvolle Extensions und Add-Ons für Ihren Magento-Shop
Wie gefällt Ihnen die Extension?
Composer Installation? 
