Hyvä Inline CSS für Magento 2

Hyvä Inline CSS Extension for Magento 2
Hot
Hyvä Compatible Themes Out-of-the-box
Mage-OS Compatible
Composer Installation Composer Installation?
shapes Free Power Toy Available

Betreiben Sie Ihren Hyvä Themes Magento Shop
Ohne Ungenutztes CSS & Ohne CSS File

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

  • CSS Automatisch je Seite generieren und als Inline-CSS hinzufügen
  • Inline CSS Generierung Inkl. Custom/3rd Party CSS Files
  • Flexible & Einfache Konfigs Für Special Cases
  • Render-Blocking-CSS entfernen
  • Ungenutztes CSS entfernen/bereinigen
  • Kompatibilitätsmodus = 100%ige Kompatibilität
  • Inline-CSS optional nur beim 1. Pageload
  • FCP & LCP Optimierung

Alle Highlights Anschauen

Lizenz:


Magento Marketplace Approved by
  • Einmalige Zahlung - Kein Abo
  • Lebenslanger Zugriff auf Quellcode
  • 1 Jahr kostenfreier Support
  • 1 Jahr kostenfreie Updates
awesomeicons6/brands/magento

Geprüft und verifiziert von Magento Marketplace

awesomeicons6/solid/award

1st Extension Provider
     Mit Hyvä Support
     Awesome seit 2021!

awesomeicons6/solid/code-fork

Unverschlüsselt. 100% Open Source & anpassbar

awesomeicons6/solid/code

Coding Standards. Sauberer & lesbarer Code

awesomeicons6/regular/face-smile-beam

Unzählige zufriedene Kunden: Seien Sie der Nächste!

awesomeicons6/regular/heart

Made With Love

Unsere Extensions sind gebaut mit Liebe und Leidenschaft für neue Dinge, Perfektion und Performance.

awesomeicons6/solid/handshake

Praxis Erprobt

Unsere Extensions sind in unseren eigenen Kundenprojekten praxiserprobt.

Kunden Feedback

Lösung

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

DAS PROBLEM
UNUSED CSS &
RENDER BLOCKING
CSS FILE

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...

DIE LÖSUNG
CSS JE SEITE
GENERIEREN &
INLINE EINFÜGEN

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:

  • CSS pro Seite on-the-fly generieren
  • Unterstützt Inline CSS Generierung inkl. custom/3rd Party CSS Dateien
  • Caching des generierten Inline CSS
  • Konfigurationen für Sonderfälle
  • Kompatibilitätsmodus
  • Inline-CSS optional 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!

Highlights

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

awesomeicons6/solid/file-circle-plus

Custom/3rd Party
CSS Dateien

Werden Unterstützt

Safe List Konfig Für
Fehlende/Dynamische

CSS Classes um Kompatibilität zu gewährleisten

awesomeicons6/solid/check-to-slot

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

awesomeicons6/solid/square-check

Debug Tool
Zum Einfachen Prüfen

Und Checken Das Es Funktioniert

awesomeicons6/brands/hyva-colored
Hyvä Theme Compatible
Zur Hyvä Demo
awesomeicons6/brands/mage-os-filled
Mage-OS Compatible
Zur Mage-OS Demo

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!

JaJuMa Hyvä Inline CSS Extension

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.

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

  • ohne jede CSS-Datei ("CSSless") and
  • mit ungenutztem CSS so weit wie möglich entfernt.

Mit Hyvä Inline CSS sparen Sie sich

  • die Netzanfrage zum Herunterladen der Standarddatei styles.css sowie von Custom/3rd Party CSS Dateien
  • 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.
  • Zeit und Aufwand "Critical CSS" zu generieren
  • Probleme mit FOUC (Flash Of Unstyled Content)

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.

Hyvä Inline CSS vs. Hyvä Theme CSS File Comparison First Contentful Paint (FCP)

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.


  1. 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).
  2. 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.

Hyvä Inline CSS vs. Hyvä Theme CSS File Vergleich Largest Contentful Paint (LCP)

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.
awesomeicons6/regular/lightbulb
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.

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:

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.)

JaJuMa Hyvä Inline CSS - Debug Tool & Waterfall

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.
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:

Konfigs & Optionen

Für Fehlende/Dynamische Klassen

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?


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!

Kompatibilitätsmodus

= 100% Kompatibilität

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!

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 Extension.

Kunde Bewertungen

Rating
Fully automatic!
Bewertung von
Well thought out. I am very satisfied and will definitely recommend you!

Schreiben Sie Ihre Bewertung

Ihre Bewertung:
Laden...

Sie haben Ihre Bewertung für die Moderation übermittelt.

Frequently Asked Questions

General Magento Extension Questions
How to install Magento 2 extensions from JaJuMa?

We offer different ways of Magento 2 extension installation:

Before Installing

  • We recommend you to duplicate your live store on a staging/test site and try installation on your staging/test site before deploying to your live store
  • Backup Magento files and the store database


Please Note:
It’s very important to backup all themes and extensions in Magento before installation, especially when you are working on a live server. We strongly recommend you to do not skip this step.

Manual Extension Installation via FTP/SSH:

After purchasing an extension, you can download the module as .zip package in your Customer Account.
After downloading the .zip package, please follow these steps for installation:

  1. Log into your hosting space via a FTP client (e. g. FileZilla, WinSCP, cuteFtp)
  2. Create Folder: /app/code/Jajuma/[ExtensionName]*
  3. Unzip extension package and upload files into: /app/code/Jajuma/[ExtensionName]*
  4. Enter and run the following commands at the command line:
    php bin/magento setup:upgrade
    php bin/magento setup:static-content:deploy

* Note: [ExtensionName] can be found in registration.php file: Jajuma_[ExtensionName]

 

Extension Installation via Composer / Magento Marketplace:

For installation via composer, please get the extension

  • from Github and install as any other extension from Github or
  • from Magento Marketplace and follow this Installation Guide and
    make sure to use the correct key for Marketplace repo (the key that belongs to the account that purchased the module).
    In case of issue with installing via composer, please double-check to use the correct key for Marketplace repo.
    Your key should be in your auth.json file.


Links for composer installation to Github/Marketplace can be found on top of this page in technical info section - Click Here

Error Could not find a matching version of package jajuma/[module-name]. Check the package spelling, your version constraint and that the package

With this error message, most likely the key used for the Marketplace repo is wrong/invalid, i. e. not the key that belongs to the account that purchased the module. Please double-check to use the correct key for the Marketplace repo.

For installing extensions from Magento Marketplace, please follow this guide and make sure to use the correct key for the Marketplace repo:
Installation Guide

Please feel free to get in touch with our support in case you have any further questions or concerns or check with Marketplace support in case the installation issue can not be resolved.

Do you offer free technical support?

After purchasing a (non-free) extension we provide 12 month support via support ticket for free.

Do you offer customization service for your extensions?

Yes, please get in touch with our customer support so we can clarify your requirement and provide a quote.

Where can I download my extension?

You can download your extension from your customer account as soon as the payment has been processed.

Do you offer a free trial period?

Unfortunately, we can not offer a free trial period.

However, we do have demo site for all our extensions. Feel free to test all the features and see how the extensions work.

In case of any questions or concerns regarding compatibility or how some extension works our customer support is also always happy to help.

Do you offer refunds?

All our extensions are non-tangible downloadable goods. Hence we can unfortunately not issue refunds.

Refunds will NEVER be issued for services provided such as installation support, customization and software development work.

Changelog

Version: 1.0.0

  • Initial Release

Version: 1.0.1

  • Improved: Changed load order to avoid conflicts with some other inline CSS
  • Added: Example/Default config for safelist when using glider.js

Version: 1.0.2

  • Fixed: Issue with Tailwind !important prefix
  • Improvement: Hyvä Checkout support

Version: 1.0.3

  • Fixed: Conflict with JaJuMa Hyvä PWA

Version: 1.0.4

  • Updated: Compatibility with upcoming extension

Version: 1.0.5

  • Fixed: Issue with M2.4.6 + Varnish

Version: 2.0.0

  • Added: Option to include files with dynamically rendered CSS classes in inline CSS generation process
  • Added: Option to include custom/3rd party CSS files in inline CSS
  • Added: Option to exclude certain pages from using inline CSS
  • Improved: Add new inline CSS cache type for cached inline styles
  • Updated: Debug bar styles and position
  • Fixed: Minor bugs and issues

Mehr Extensions

Vielleicht auch interessant für Sie?
Weitere wertvolle Extensions und Add-Ons für Ihren Magento-Shop

Unsere Kunden sind begeistert!

Wie gefällt Ihnen die Extension?