Dokumentation Speed-Optimizer
Das Plugin optimiert die Ladezeiten deines JTL Shops in Echtzeit.
Das Ergebnis: Bis zu doppelt so schnelle Ladezeiten!
Schnellanleitung
- Lade die erhaltene ZIP-Datei im Admin deines Shops unter Plugins->Pluginverwaltung im Tab "Upload" hoch.
- Nach dem Upload wechsel in den Tab "Verfügbar" und installiere das Plugin "KM Speed Optimizer"
- Mit der Installation werden die Einstellungen bestmöglich gesetzt, die Testlizenz aktiviert sich automatisch (ebenfalls die Live-Lizenz)
- Generiere das kritische CSS im Tab "Detaileinstellungen"
Einstellungen
In den Einstellungen aktivierst und deaktivierst du die Funktionen des Speed Optimizers.
Template Preload entfernen (Technik)
Manche Templates setzen bereits das Vorladen von Dateien ein. Das basiert jedoch auf deren Programmierstrukturen. Da wir diese ändern kann es sein, dass diese sogar die Ladezeiten blockieren, da der Browser zwingend auf das Laden dieser Dateien wartet. Mit der Einstellung können diese entfernt werden. In den Detaileinstellungen können dann beliebige wieder hinzugefügt werden (siehe Abschnitt Detaileinstellungen).
CSS Optimizer
Der CSS Optimizer schiebt alle CSS Dateien an das Ende, sodass diese Dateien erst nach dem Seitenaufbau geladen werden. Da JTL für jede Seite alle vorhanden CSS Angaben lädt (z.B: auch auf der Startseite die Angaben für den Warenkorb, Checkout, Mein Konto, ....) ist das unnötiger Ballast. Damit die Seite jedoch dennoch ansehlich aussieht während dem Aufbau muss die Funktion "kritisches CSS generiern" im Tab "Detaileinstellungen" ausgeführt werden (siehe Abschnitt Detaileinstellungen).
Seitenaufbau ohne den CSS Optimizer:
- Seitenquelltext wird heruntergeladen
- CSS-Datei /asset/style.css wird geladen
- CSS-Datei /includes/plugins/extra.css wird geladen
- CSS-Datei /includes/plugins/extra2.css wird geladen
- Seite wird gerendet und ist fertig
Seitenaufbau mit dem CSS Optimizer:
- Seitenquelltext wird heruntergeladen (inkl. kritischem CSS)
- Seite wird gerendet und ist fertig
- CSS-Datei /asset/style.css wird geladen
- CSS-Datei /includes/plugins/extra.css wird geladen
- CSS-Datei /includes/plugins/extra2.css wird geladen
JavaScript Optimizer
Hier werden alle Dateien an das Seitenende geschoben, dabei die Reihenfolge beachtet, auch von Inline-JavaScripts (diese werden umgewandelt in Pseudo-Externe Skripte, damit der Browser hier nicht an Probleme stößt und diese nicht zum inneren Quellcode zählt - was ein schnelleres Laden bedeutet). Es gibt leider eine veraltete Technik die JavaScript Inhalte in das Dokument an gleicher Stelle schreiben lässt. Das führt zu Problemen, da dann die Inhalte an falscher Stelle auftauchen.
Das kann man simpel sehen indem man ganz an das Ende der Seite scrollt - stehen dort Elemente die da nicht hingehören wird sehr wahrscheinlich auf die alte Technik gesetzt (W3C bezeichnet diese Technik bereits als deprecated). Sollte das der Fall sein kann die Einstellung "Nur Head Skripte verschieben" helfen: Dann sind alle Skripte im Inhalt an gleicher Stelle und nur die ganz kritischen Skripte werden verschoben.
Seitenaufbau ohne den JavaScript Optimizer:
- Seitenquelltext wird heruntergeladen
- JS-Datei /templates/mein-template/jquery.js wird geladen
- JavaScript wird geparsed und ausgeführt
- JS-Datei /templates/mein-template/evo.js wird geladen
- JavaScript wird geparsed und ausgeführt
- ... mit vielen weiteren Dateien
- Seite wird gerendet
- Nachgelagerte JavaScripts werden ausgeführt, ggf. werden weitere Dateien nachgeladen
- Die Seite ist fertig.
Seitenaufbau mit dem JavaScript Optimizer:
- Seitenquelltext wird heruntergeladen
- Seite wird gerendet und ist fertig
- JS-Datei /templates/mein-template/jquery.js wird geladen
- JavaScript wird geparsed und ausgeführt
- JS-Datei /templates/mein-template/evo.js wird geladen
- JavaScript wird geparsed und ausgeführt
Bilder-Lazy Loader
Die Bilder einer Webseite werden unmittelbar mit dem Laden der Seite geladen und blockieren daher das Rendern dieser Seite. Mittels Lazy Loading werden die Bild-URLs versteckt bis die Seite geladen ist - dann werden die Bilder im sichtbaren Bereich nachgeladen. Die weiteren Bilder werden beim Scrollen zum jeweiligen Bild nachgeladen.
Seitenaufbau ohne Lazy Loading:
- Seitenquelltext wird heruntergeladen
- Bild-Datei /produkt1.png wird geladen
- Bild-Datei /produkt2.png wird geladen
- Bild-Datei /produkt3.png wird geladen
- Bild-Datei /produkt4.png wird geladen
- ...
- Seite wird gerendet und ist fertig
Seitenaufbau mit Lazy Loading:
- Seitenquelltext wird heruntergeladen
- Seite wird gerendet und ist fertig
- Bilder im sichtbaren Bereich werden geladen
- Bild-Datei /produkt1.png wird geladen
- Bild-Datei /produkt2.png wird geladen
- Mit Scrollen werden die weiteren Bilder geladen
- Bild-Datei /produkt3.png wird geladen
JTL arbeitet im Standard-Template bereist mit LazyLoading für die Produktbilder.
Bilder von eigenen Seiten und im weiteren Layout sind jedoch nicht betroffen und können hiermit nachgerüstet werden.
Bilder ausschließen
Manche Bilder - häufig z.B. Kategoriebilder - sitzen in Boxen die im Nachgang in der Höhe angepasst werden.
Das kann dazu führen, dass die Box in der Höhe berechnet wird mit dem noch nicht geladenem Bild. Anschließend wird erst beim Hinscrollen / fertigem Seitenladen das Bild geladen und diese Höhe stimmt nicht.
Mit dieser Einstellung können Bilder die diese Problem verursachen ausgeschlossen werden.
Dabei wird im Dateinamen nach den Angaben gesucht. Möchte man z.B: das Shoplogo und alle Kategoriebilder ausschließen ginge das wie folgt:
shoplogo;kategorien
Detaileinstellungen
Der Tab Detaileinstellungen generiert das kritische CSS und bietet optional die Möglichkeit für weitere Head-Tags zum Vorladen von Dateien und bietet mit dem JavaScript Funktionen die Möglichkeit auf "unsaubere" JavaScript-Programmierungen zu reagieren.
Kritisches CSS generieren
Diese Funktion muss nur einmalig ausgeführt werden - jedoch jeweils Pro Optimizer Version (sprich bei einem Update bitte stets erneut ausführen). Dazu wie nach dem Bild erklärt bitte die Selektoren füllen (oder Template Standards klicken zum automatischen befüllen) und anschließend auf "Jetzt generieren" klicken. Sobald das Fenster fertig geladen ist, kann es geschlossen werden.
Hinweis: Die Selektoren werden nicht gespeichert, es ist nur eine Konfiguration für die Funktion die beim Klick ausgeführt wird und ist daher nicht "Live" im Betrieb.
Selektor für den Inhalt
Hier wird der Inhaltsbereich definiert. Da sich dieser pro Seite unterscheidet bauen wir hier kein kritisches CSS - sonst wären wieder alle Seitenangaben in einer Datei. Hier wird ein Ladeicon drübergelegt. Der Selektor ist im JQuery / PHPQuery Format anzugeben.
Zu entfernende Elemente
Da wir (Inhalt wird automatisch entfernt durch obigen Selektor) die Elemente der Seite mit dem CSS vergleichen ist es empfehlenswert weitere versteckte Elemente zu entfernen. Das sind z.B. Elemente die erst später angezeigt werden, aber bereits beim Seitenladen vorhanden sind, wie z.B. die Boxen des Megamenüs, Popups usw.
Wir haben für 4 Templates bereits die Selektoren vorgefertigt - bei weiteren stehen wir gerne zur Verfügung. Lediglich bei individuell programmierten Templates muss hier ggf. der Templateersteller um Rat gefragt werden, oder per Quelltext Inspektor der richtige rausgesucht werden.
JavaScript nach Seitenladen
Wenn alle JavaScript-Funktionen sauber programmiert werden sollte es keine Probleme geben.
In der Regel sollte man beachten dass äußere Umstände (wie auch z.B: weitere Plugins) Anpassungen am Quellcode vornehmen und somit die Grundlogik verändern. Dazu setzt man in JavaScript auf das ausführen an passenden Events und prüft seine eigenen Vorhaben. Ist das nicht der Fall - oder auch weil Abhängigkeiten zu komplex werden - kann es notwendig sein kleinere Funktionen nach dem Seitenladen nochmal händisch durchzuführen. Diese Funktion sollte aber nur bei Problemen genutzt werden - Sie ist im Prinzip das händische Bugfixing, das Template- und Pluginspezfisch ist (würden wird diese Funktionen für alle einbauen wäre es für viele unnötiger Ballast). Die uns bekannten und notwendigen Funktionen sind unter "Kompabilität mit Templates und Plugins" aufgeführt und werden ständig erweitert.
Kompatibilitäten mit Templates und Plugins
Hinweis: Der JavaScript Optimizer verschiebt die Skripte in seiner Position. Dadurch sind Skripte die an dieser Stelle etwas in den Quellcode schreiben (veraltet und sollte nicht mehr ausgeführt werden, auch laut W3C nicht, manche machen es leider dennoch) an der falschen Stelle und die Ausgaben kommen z.B. alle nach dem Footer. Sollte das der Fall sein muss im JavaScript Optimizer auf "Nur Head Skripte verschieben" gestellt werden.
Insgesamt ist wesentlich der JavaScript Optimizer zu beachten, besonders der Part für "JavaScript nach Seitenladen" im Tab "Detaileinstellungen". Hier können weitere JavaScript Funktionen ausgeführt werden.
Nachfolgend gehen wir auf die bekannten Kompabilitätsprobleme ein:
Hypnos
Hypnos führt eine Funktion zur Angleich der Artikelnamen-Höhen durch die mit Plugin zu früh ausgeführt wird.
Wer hier zu hohe Produktnamen in Slidern hat (Empfehlung: Und nur dann diese Anpassung ausführen)
Muss folgenden Code im Tab Detaileinstellungen unter JavaScript nach Seitenladen einfügen:
window.setTimeout(function(){$("[data-eq-height]").each(function(i,t){var e=$(t).data("eq-height").split(",");$.each(e,function(){var i=this.trim();$(t).find(i).css("height","auto"),$(t).find(i).responsiveEqualHeightGrid(function(){$(t).find("img").unveil(lazyLoad_threshold)})})})},300);
Dropper
Bei Dropper kann es vereinzelt in Kombination mit dem Flexmenü in manchen Browsern Probleme in der Inhaltshöhe geben. Dann (und bitte nur dann) muss folgender Code in dem Tab Detaileinstellungen unter JavaScript nach Seitenladen gepflegt werden:
$(".kk-flexlayout-placeholder").css('display','block');
Mod-Pagespeed
Das Mod-Pagespeed Modul von Google erledigt ähnliche Aufgaben. Ein Vergleich beider Lösungen empfiehlt sich allemal! Es empfiehlt sich die Funktionen die im Speed Optimizer Plugin aktiv sind nicht nochmal von ModPagespeed auszuführen. Ist z.B. der CSS Optimizer aktiv, sollte css_rewrite in ModPagespeed deaktiviert werden. Während ModPagespeed direkt auf Serverebene arbeitet, ist das Plugin auf JTL abgestimmt. Der Unterschied ist daher individuell zu prüfen.
Der Optimizer im Vergleich im EVO Template inkl. 4 Plugins
Typ | Mit Optimizer | Ohne Optimizer |
---|---|---|
Startseite Start Render | 2,0s | 3,2s |
Startseite Ende Render | 3,8s | 6,5s |
Startseite Pagespeed | 95/100 | 84/100 |
Kategorieseite Start Render | 2,4s | 3,6s |
Kategorieseite Ende Render | 3,9s | 8,4s |
Kategorieseite Pagespeed | 90/100 | 70/100 |
Detailseite Start Render | 1,9s | 4,0s |
Detailseite Ende Render | 3,7s | 9,6s |
Detailseite Pagespeed | 92/100 | 65/100 |
Anpassungen durch Knoell Marketing
Für individuelle Anpassungen und weitere Performance Optimierungen kannst du uns gerne kontaktieren:
- Web: www.knoell-marketing.de
- Mail: info@knoell-marketing.de
- Tel: 06431 / 590 43 10
Probleme mit dem Windows Defender beheben
„Das Defender-Update hat den Pfad zum aktualisierten Windows-Defender-Modul geändert. Dies bewirkt die Blockade vieler Downloads durch AppLocker“
Das Problem, kannst du wie folgt beheben:
- Klicke auf Start und geben dort „Lokale Sicherheitsrichtlinie“ ein.
- Mache einen Rechtsklick auf „Lokale Sicherheitsrichtlinie“ und wählen dort „Als Administrator ausführen“ aus.
- Gehe zu dem Punkt Sicherheitseinstellungen > Anwendungssterungsrichtlinien > AppLocker > Ausführbare Regeln und mache wieder einen Rechtsklick auf den Punkt.
- Wähle den Punkt „Neue Regel erstellen“.
- 1. Schritt: Klicke auf weiter.
- 2. Schritt: Klicke auf weiter.
- 3. Schritt: Wähle „Pfad“ aus und klicke auf weiter.
- 4. Schritt: Gib folgenden Pfad ein %OSDrive%\ProgramData\Microsoft\Windows Defender\Platform\* und klicken auf weiter.
- 5. Schritt: Klicke auf weiter.
- 6. Schritt: Klicke auf erstellen.
Jetzt sollte es dir wieder möglich sein, das Plugin herunterzuladen ohne das der Windows-Defender das Plugin in Quarantäne verschiebt.
Siehe auch dazu: