Suchen

Dokumentation Speed-Optimizer

Das Plugin optimiert die Ladezeiten Ihres JTL Shops in Echtzeit.
Das Ergebnis: Bis zu doppelt so schnelle Ladezeiten!


    Schnellanleitung

    1. Laden Sie die erhaltene ZIP-Datei im Admin Ihres Shops unter Plugins->Pluginverwaltung im Tab "Upload" hoch.
    2. Nach dem Upload wechseln Sie in den Tab "Verfügbar" und installieren Sie das Plugin "KM Speed Optimizer"
    3. Mit der Installation werden die Einstellungen bestmöglich gesetzt, die Testlizenz aktiviert sich automatisch (ebenfalls die Live-Lizenz)
    4. Generieren Sie das kritische CSS im Tab "Detaileinstellungen"

    Einstellungen

    In den Einstellungen aktivieren und deaktivieren Sie 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.


    Zusätzliche Head-Tags
    Mittels der Funktion "Template Preload entfernen" im Tab "Grundeinstellungen" werden alle Preloads des Templates entfernt, da diese z.B. nicht mehr sinnvoll sind mit Ablauf des Optimizers. Wer diese Funktion aktiviert und dennoch 1-2 Dateien (z.B. die Hauptschriftart) vorladen möchte kann hier eigene Preloads angeben.
    Die Angabe muss im HTML-Format sein und ist auf keine Elemente beschränkt - wir empfehlen dies aber wirklich nur für Preloads, Prefetch und DNS Prefetch zu nutzen.
    Ein Beispiel um eine Schrift vorzuladen:

    <link as="font" href="templates/mein-template/fonts/schriftart.woff" rel="preload" />
    <link as="image" href="templates/mein-template/img/shoplogo.png" rel="preload" />
    

    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

    TypMit OptimizerOhne Optimizer
    Startseite Start Render2,0s3,2s
    Startseite Ende Render3,8s6,5s
    Startseite Pagespeed95/10084/100
    Kategorieseite Start Render2,4s3,6s
    Kategorieseite Ende Render3,9s8,4s
    Kategorieseite Pagespeed90/10070/100
    Detailseite Start Render1,9s4,0s
    Detailseite Ende Render3,7s9,6s
    Detailseite Pagespeed92/10065/100

    Anpassungen durch Knoell Marketing

    Für individuelle Anpassungen und weitere Performance Optimierungen können Sie uns gerne kontaktieren: