Auschecken über Ihr Konto
Als Neukunde auschecken
Beseitigen Sie renderblockierende Ressourcen, reduzieren Sie die FCP/LCP-Zeiten drastisch und perfektionieren Sie Ihre Core Web Vitals.
Überschreiten Sie die letzte Grenze der Performance-Optimierung. Dies ist die definitive Lösung für Hyvä Themes, um ungenutztes CSS automatisch zu entfernen und vollständig ohne CSS auszukommen, und Ihren Nutzern vom allerersten Byte an das schnellstmögliche Erlebnis zu bieten.
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 von JaJuMa!
Verabschieden Sie sich von Ihren CSS-Dateien & ungenutztem CSS
Beschleunigen Sie das Seiten-Rendering durch Entfernen blockierender Styles
Verbessern Sie die FCP & LCP Performance-KPIs
Sie haben in Hyvä wegen seiner legendären Performance investiert, und doch bleibt dieser perfekte 100/100 PageSpeed-Score unerreichbar.
Der Übeltäter ist ein versteckter Geschwindigkeitskiller, der jede Seite betrifft, egal wie optimiert sie ist:
Verstehen Sie die...
Renderblockierende CSS-Datei:
Unsere Hyvä Inline CSS Extension beseitigt diesen Engpass vollständig.
Sie transformiert die Architektur Ihrer Seite, indem sie automatisch einen
perfekt optimierten Satz von Stilen für jede einzelne Seite generiert und dieses CSS direkt in das HTML einbettet.
So funktioniert es...
Kein renderblockierendes CSS - Sofortiger First Paint:
Das Ergebnis:
keine externe CSS-Datei, keine renderblockierende Netzwerkanfrage und ein sofortiges First Paint.
Composer Installation? 
<head>
des HTML-Dokuments injiziert.
Der Browser erhält alles, was er zum perfekten Rendern der Seite benötigt, in der allerersten Antwort,
ohne eine einzige zusätzliche Netzwerkanfrage für Stile zu stellen.
Hyvä Inline CSS für Hyvä Themes & Magento 2 von JaJuMa-Develop Inline CSS =
Schnelleres Seiten-Rendering
Betreiben Sie Ihren Hyvä Themes Magento-Shop ohne renderblockierende CSS-Datei
Vermeiden Sie ungenutztes CSS
Werden Sie wirklich CSS-los. Generieren und integrieren Sie automatisch nur das CSS, das auf jeder einzelnen Seite verwendet wird.
Hören Sie auf, toten Code auszuliefern. Unser Prozess entfernt automatisch alle ungenutzten Stile für die schlankstmögliche Datenmenge bei jeder Anfrage.
Erreichen Sie nahezu sofortige FCP- und LCP-Werte, indem Sie die Anfrage für externe CSS-Dateien entfernen – die Hauptursache für Render-Blocking.
Ihr gesamtes Frontend, vereinheitlicht. Die Extension kann Stile von anderen Drittanbieter-Modulen finden, verarbeiten und inline einfügen.
Sorgen Sie für perfektes Styling bei dynamischen Inhalten. Konfigurieren Sie die Extension einfach so, dass sie niemals CSS-Klassen entfernt, die durch JavaScript hinzugefügt werden.
Gehen Sie über die Safe-List hinaus. Verweisen Sie die Extension auf bestimmte PHTML- oder JS-Dateien, um eine 100% genaue CSS-Generierung für komplexe Komponenten sicherzustellen.
Profitieren Sie von den Geschwindigkeitsvorteilen ohne Risiko. Unser einzigartiger Kompatibilitätsmodus garantiert perfektes Styling, während das Haupt-Stylesheet weiterhin zurückgestellt wird.
Maximieren Sie die Geschwindigkeit beim ersten Besuch und nutzen Sie das Browser-Caching für wiederholte Besuche mit dieser intelligenten, automatisierten Optimierungsstrategie.
Erhalten Sie sofort Einblicke in das Verhalten der Extension direkt im Frontend, einschließlich Cache-Status, Verarbeitungszeiten und Gzip-Größe.
Beschleunigen Sie Ihren Workflow mit unserem kostenlosen Power Toy, das ein persistentes Dashboard zur Überwachung des Inline-CSS-Status bietet, ohne den Debug-Modus aktivieren zu müssen.
Von Grund auf für Hyvä Themes entwickelt. Kein Kompatibilitätsmodul erforderlich.
Vollständig kompatibel und getestet mit Mage-OS, um sicherzustellen, dass Ihr Shop zukunftssicher ist.
Die Hyvä Inline CSS Extension verändert grundlegend, wie Styles an den Browser ausgeliefert werden. Anstatt auf externe CSS-Dateien zu warten, fügt sie kritische Styles direkt in die HTML-Antwort ein, wodurch Render-Blocking und Netzwerklatenz eliminiert werden. Der folgende Vergleich zeigt, wie sich dieser Ansatz auf wichtige Performance-Kennzahlen auswirkt.
| Metrik | Standard Hyvä (Externes CSS) | Mit Hyvä Inline CSS Extension | Auswirkung auf die Performance |
|---|---|---|---|
| Render-blockierende Ressourcen | 1 (styles.css) | 0 | ✅ Eliminiert |
| Netzwerk-RTT für Styles | ~200–400ms (Mobil) | 0ms | ✅ Eliminiert |
| First Contentful Paint (FCP) | Verzögert durch CSS-Download | Nahezu sofort | 🚀 Drastisch beschleunigt |
| Largest Contentful Paint (LCP) | Verzögert durch CSS-Download | Nahezu sofort | 🚀 Drastisch beschleunigt für Text-LCPs |
| Unbenutztes CSS pro Seite | Vorhanden | Entfernt | 📉 Kleinere Datenmenge |
| Nachfolgende Navigation | Memory Cache Treffer (~0ms) Disk Cache Treffer (Disk-Lookup + Parse ~5–15ms) |
Inline CSS (20Kb ~16ms Download + 0–2ms Inline-Overhead) |
⚖️ Nachteil ~10–20ms / Unentschieden |
Zusammenfassend lässt sich sagen, dass die Hyvä Inline CSS Extension kritische Engpässe beseitigt, indem sie
render-blockierende Ressourcen und kostspielige RTT-Verzögerungen eliminiert.
Das Ergebnis ist
schnelleres FCP, LCP und eine insgesamt bessere Reaktionsfähigkeit der Seite.
Für mobile Nutzer mit langsameren Verbindungen kann dies hunderte von Millisekunden pro Anfrage einsparen.
Erhalten Sie beispiellose Kontrolle und Automatisierung über die CSS-Auslieferung Ihres Shops. Unsere Extension bietet ein robustes, flexibles Toolkit, um jedes Szenario zu bewältigen, von komplexen dynamischen Inhalten bis hin zu Extensions von Drittanbietern, und gewährleistet maximale Performance ohne Kompromisse.
Liefern Sie nie wieder render-blockierendes und ein einziges Byte ungenutztes CSS aus.
Unsere Engine analysiert das DOM jeder Seitenanfrage, sammelt alle verwendeten CSS-Klassen,
und generiert in Echtzeit ein perfekt optimiertes, minimales Stylesheet.
Wenn eine Seite angefordert wird, fängt die Extension die Antwort ab, bevor sie an den Browser gesendet wird. Sie scannt das gesamte HTML-Dokument und sammelt jede einzelne CSS-Klasse, die tatsächlich verwendet wird.
Für die bereinigte Liste der Klassen wird ein eindeutiger Hash-Wert erstellt. Wenn dieser Hash bereits in unserem dedizierten, langlebigen Cache vorhanden ist, wird das optimierte CSS sofort bereitgestellt. Wenn nicht, wird diese Liste der verwendeten CSS-Klassen auf dem Server von purgecss verarbeitet, einem hocheffizienten Werkzeug, das alle ungenutzten Styles aus Ihrem Haupt-Stylesheet entfernt, um ein neues, hyper-optimiertes CSS für diese spezifische Seite / diesen Satz von CSS-Klassen zu generieren, das dann mit seinem Hash-Wert im Cache gespeichert wird.
Dieser CSS-Block, der perfekt auf die jeweilige Seite zugeschnitten ist, wird dann direkt in einen <style>-Block im HTML-<head> eingefügt, bevor die Seite an den Browser ausgeliefert wird. Dieser Prozess identifiziert und inkludiert auch intelligent Styles von anderen kompatiblen Drittanbieter-Modulen, um ein einheitliches und optimiertes Frontend ohne manuelle Eingriffe zu gewährleisten.
Stylen Sie selbst dynamisch per JavaScript geladene Inhalte einwandfrei.
Fügen Sie dynamische CSS-Klassen (z.B. von Alpine.js Komponenten oder Slidern) zu einer "Safe List" hinzu oder
beziehen Sie ganze JS/PHTML-Dateien in den Scan ein, um sicherzustellen, dass sie niemals entfernt werden.
Moderne Shop-Frontends verlassen sich stark auf JavaScript, um dynamische Erlebnisse wie Bilder-Slider, Pop-ups oder per AJAX geladene Inhalte zu schaffen. Diese Elemente und die zugehörigen CSS-Klassen sind oft nicht im ursprünglichen HTML-Quellcode vorhanden, den unsere Extension scannt.
Um dies zu lösen, bieten wir Entwicklern zwei leistungsstarke Optionen:
Profitieren Sie von den Geschwindigkeitsvorteilen ohne Risiko.
Aktivieren Sie den Kompatibilitätsmodus, um das verwendete CSS für ein sofortiges Rendering inline einzubinden,
während gleichzeitig das vollständige Stylesheet asynchron im Hintergrund als Fallback geladen wird.
Wir verstehen, dass die Einführung einer neuen Performance-Optimierung bei einem komplexen, live geschalteten Shop riskant erscheinen kann.
Deshalb haben wir den Kompatibilitätsmodus als ultimatives Sicherheitsnetz entwickelt.
Wenn er aktiviert ist, führt die Extension weiterhin ihren vollständigen Optimierungsprozess durch - das Generieren und Inlinen des verwendeten CSS für ein sofortiges erstes Rendering. Allerdings fügt sie auch die ursprüngliche, vollständige styles.css-Datei wieder der Seite hinzu, aber auf eine nicht-render-blockierende Weise.
Sie können sie so konfigurieren, dass sie mit niedriger Priorität oder, für maximale Performance, erst nach der ersten Benutzerinteraktion (wie Scrollen oder Klicken) geladen wird.
Dies gibt Ihnen Geschwindigkeit und Sicherheit:
Den sofortigen Rendering-Vorteil von Inline-CSS und die 100%ige Garantie, dass jeder einzelne Style verfügbar sein wird, genau wie vom Designer beabsichtigt.
Maximieren Sie die Geschwindigkeit beim ersten Besuch und nutzen Sie das Browser-Caching für wiederholte Besuche.
Diese intelligente Option bindet CSS nur für die erste Seite, die ein Benutzer besucht, inline ein.
Für alle nachfolgenden Seiten verwendet sie das standardmäßige externe Stylesheet, das sich dann bereits im Cache des Browsers befindet.
Dies ist eine fortgeschrittene Strategie für Händler, die die ultimative Geschwindigkeit des ersten Eindrucks mit den langfristigen Vorteilen des Browser-Cachings in Einklang bringen möchten.
Wenn dieser Modus aktiv ist, prüft die Extension, ob der Browser des Benutzers die Haupt-styles.css-Datei bereits zwischengespeichert hat. Wenn nicht (d.h. es ist ihr erster Besuch), bindet sie das CSS für maximale Geschwindigkeit inline ein.
Wenn die Datei bereits im Cache ist, tut die Extension nichts und ermöglicht dem Browser, die schnelle, lokale Kopie zu verwenden. Dies bietet ein unvergleichliches Erlebnis für neue Besucher und reduziert gleichzeitig die HTML-Größe für wiederkehrende Kunden.
Verlassen Sie sich nicht nur auf unser Wort. Sehen Sie die deutliche, messbare Verbesserung Ihrer Core Web Vitals.
Indem der CSS-Download aus dem kritischen Rendering-Pfad entfernt wird, beginnen Ihre Seiten sofort mit dem Darstellen von Inhalten, sobald das HTML ankommt - zur Freude von Nutzern und Suchmaschinen.
Die Wasserfalldiagramme unten veranschaulichen den Unterschied.
Der Browser beginnt sofort mit dem Rendern, was sowohl den First Contentful Paint (FCP) als auch den Largest Contentful Paint (LCP) drastisch verbessert.
Diese einfache Änderung kann Ihre mobilen Ladezeiten leicht um über 200 ms verkürzen - ein massiver Gewinn für Konversion und SEO.
Der Browser muss warten, bis die `styles.css`-Datei vollständig heruntergeladen ist, bevor das Rendering beginnen kann (Beachten Sie den violetten Balken im Wasserfallbild, der die `styles.css`-Datei darstellt.). Dies ist die renderblockierende Verzögerung in Aktion, verursacht durch eine zusätzliche Netzwerkanfrage (RTT-Engpass).
Im Standardfall tritt das FCP-Ereignis erst nachdem die CSS-Datei heruntergeladen wurde auf, da sie renderblockierend ist.
Die `styles.css`-Anfrage ist verschwunden.
Dadurch findet das FCP-Ereignis fast sofort statt, da die notwendigen Stile im ursprünglichen HTML-Dokument enthalten sind.
Im Falle von Inline-CSS tritt das FCP-Ereignis sogar auf, bevor das HTML vollständig heruntergeladen wurde, da Inline-CSS nicht renderblockierend ist.
Der Vorteil erstreckt sich direkt auf Ihren Largest Contentful Paint (LCP).
Durch die Beseitigung der anfänglichen CSS-Download-Verzögerung kann der Browser Ihr LCP-Bild entdecken und
mit dem Herunterladen beginnen oder Ihren LCP-Textblock hunderte von Millisekunden früher rendern.
Wenn das LCP-Element ein Textblock ist, erleidet es das gleiche renderblockierende Schicksal wie der FCP. Er kann nicht angezeigt werden, bis die CSS-Datei vollständig heruntergeladen ist.
Beim Laden des CSS als Datei tritt das LCP-Ereignis immer noch erst nach dem Herunterladen der CSS-Datei auf.
Durch das Inlinen des CSS wird der kritische Rendering-Pfad beschleunigt, sodass der LCP-Textblock dargestellt werden kann, sobald das HTML eintrifft.
Aber im Falle von Inline-CSS tritt das LCP-Ereignis nun ebenfalls auf, noch bevor das HTML-Dokument vollständig heruntergeladen wurde.
Die Seitenladezeiten in den obigen Beispielen wurden mit einer langsamen 3G-Netzwerkdrosselung im Chrome-Browser aufgezeichnet.
Wie stark Sie Ihre Performance-KPIs mit dieser Extension verbessern können, hängt maßgeblich von der Netzwerkgeschwindigkeit des Clients sowie der Größe Ihres LCP-Elements ab.
Für maximale Vorteile wird empfohlen, auch das Laden von LCP-Elementen zu optimieren, z. B. durch die Verwendung von Bildern der nächsten Generation (WebP & AVIF) mit unserem Ultimate Image Optimizer und sicherzustellen, dass das LCP-Bild mit höchster Priorität geladen wird, z. B. mit unserer Preload Critical Resources & Assets Extension.
Investieren Sie in eine Lösung von anerkannten Marktführern.
Als
Hyvä Gold Partner und einer der frühesten Pioniere im Ökosystem,
nutzen wir Hyvä nicht nur – wir helfen, es zu bauen und zu definieren.
Diese Extension ist das Ergebnis von vier Jahren intensiver, praktischer Erfahrung bei der Optimierung der anspruchsvollsten Hyvä-Shops.
Wir besitzen eine der höchsten Auszeichnungen für Expertise und Beitrag im Hyvä-Ökosystem, verdient durch nachgewiesenen Projekterfolg und enge Zusammenarbeit.
Wir waren der erste Extension-Anbieter, der eine offizielle Hyvä-Kompatibilität anbot, und damit vom ersten Tag an den Weg für den gesamten Marktplatz ebnete.
Unser Team trägt aktiv zur Hyvä-Core-Codebasis bei. Wir haben ein grundlegendes Verständnis davon, wie Hyvä funktioniert, weil wir helfen, es funktionsfähig zu machen.
Wir unterstützen unsere Extensions mit kostenlosen Tools wie dem Hyvä Inline CSS Power Toy und dem enthaltenen Debug-Tool, die Händlern und Entwicklern die nötige Transparenz geben, um mit Zuversicht und Effizienz zu optimieren.
Alle unsere Extensions werden in unseren eigenen anspruchsvollen realen Kundenprojekten auf Herz und Nieren geprüft, bevor sie veröffentlicht werden.
Dies stellt sicher, dass sie robust und zuverlässig sind und praxisnahe Ergebnisse liefern, hinter denen wir stehen.
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?
