Suchen

Dokumentation Speed-Optimizer

Das Plugin optimiert die Ladezeiten Ihres JTL Shops. Dabei wird jede Seite einzeln durchlaufen und optimiert. Dies geschieht über den Cronjob des Optimizers.
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. Passen Sie die Einstellungen nach belieben an unter Plugins->KM Speed Optimizer->Einstellungen
    5. Konfigurieren Sie den Cronjob zur Abarbeitung der Optimierungen und starten Sie diesen anschließend

    Einstellungen

    In den Einstellungen aktivieren und deaktivieren Sie die 4 Funktionen des Speed Optimizers, sowie setzen deren Detaileinstellung und konfigurieren den Ablauf des Cronjobs.

    Wichtig: Deaktivieren Sie bitte die Aufgabenplaner-Blindgrafik in Ihrem Template.


    CSS Optimizer

    Der CSS Optimizer verbessert den Ladevorgang des CSS indem es blockierende CSS Ressourcen entfernt, alle CSS zusammenfasst, sowie die zum Start notwendigen CSS Angaben direkt inline schreibt.

    Seitenaufbau ohne den CSS Optimizer:

    • Seitenquelltext wird heruntergeladen
      • CSS-Datei /templates/mein-template/style.css wird geladen
      • CSS-Datei /templates/mein-template/header.css wird geladen
      • CSS-Datei /templates/mein-template/megamenu.css wird geladen
      • CSS-Datei /templates/mein-template/startseite.css wird geladen
      • CSS-Datei /templates/mein-template/footer.css wird geladen
      • CSS-Datei /includes/plugins/mein-plugin/styles.css wird geladen
      • CSS-Datei https://www.extern.de/styles.css wird geladen
    • Seite wird gerendet und ist fertig

    Seitenaufbau mit dem CSS Optimizer:

    • Seitenquelltext wird heruntergeladen (inkl. kritischem HTML)
    • Seite wird gerendet und ist fertig
    • Minifizierte und zusammegefasste CSS-Datei wird geladen: /includes/plugins/km_optimizer/temp/css/123456.css


    Die Einstellungen im Überblick



    CSS Optimieren
    Hier geben Sie an, ob der CSS Optimizer generell aktiv sein soll. Mit dem Setzen dieser Einstellung werden alle CSS Dateien zu einer Datei zusammengefasst und minifiziert.

    CSS URLs umschreiben
    Wenn Bilder oder Schriften in den CSS Dateien nicht absolut angegeben sind, sind diese später nicht mehr erreichbar, da die zusammengefasst CSS-Datei an einem neuen Speicherort liegen wird. Mit dieser Einstellung werden daher aus relativen URL-Angaben absolute Pfadangaben generiert.
    Beispiel:

    Datei/templates/evo/themes/custom/custom.css
    Angabe in CSSurl(../img/icons/arrow.gif);
    Wird umgewandelt zuurl(/templates/evo/themes/img/icons/arrow.gif);

    Nur notwendige CSS inline laden
    Mit dieser Einstellung wird die generierte CSS Datei und deren Angaben mit der jeweiligen Seite im Auslieferungszustand verglichen. Nicht benötigte CSS-Angaben werden dabei entfernt.
    Das minifizierte Ergebnis wird dann in der Seite inline gespeichert (ohne weiteren Dateiaufruf, was einen zusätzlichen Request spart). Dadurch kann die Seite bereits vollständig dargestellt werden und der Besucher kann diese mit minimalen Daten ansehen. Das vollständige CSS wird nach fertigem Aufbau der Seite nachgeladen um auch dynamische Elemente die per JavaScript nachträglich verändert werden entsprechend gestalten zu können.

    Font-Face in kritischem CSS laden
    Wenn Ihr Template auf eine eigene Schriftart setzt, die per CSS geladen wird, so kann hier definiert werden, ob die Schrift auch im minimalen Inline CSS geladen wird, oder andernfalls erst mit dem Nachladen. Schriften sind in der Regel sehr umfangreich und verzögern damit die Ladezeiten enorm. Wir empfehlen die Schriften im kritischen nicht zu Laden - so werden bis diese geladen werden die Fallbackschriften dem Besucher angezeigt und er kann deutlisch schneller mit der Seite interagieren.

    Dateien ausschließen
    Wenn Sie bestimmte CSS Dateien vom Optimizer ausschließen wollen, so geben Sie die zu durchsuchenden Begriffe per Semikolon getrennt an.
    Beispiel:

    Angabe Dateien ausschließentheme;evo.css
    Überspringt/templates/snackys/themes/custom/custom.css
    Überspringt/templates/evo/themes/base/evo.css


    JavaScript Optimizer

    Der JS Optimizer kombiniert sowohl externe JavaScripts, als auch interne JavaScripts zu einer minifizierten Datei und lädt diese vollständig nach dem Seitenladen um das Rendering nicht zu blockieren und die insgesamte Ladezeit bis zur Seitendarstellung deutlich zu reduzieren.

    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
    • Minifizierte und zusammegefasste JS-Datei wird geladen: /includes/plugins/km_optimizer/temp/js/123456.js
    • JavaScript wird geparsed und ausgeführt


    Die Einstellungen im Überblick



    JavaScript optimieren
    Hiermit aktivieren Sie den JavaScript Optimizer, der alle internen, externen und inline Skripte bündelt, minifiziert und anschließend bis nach dem Seitenladen verschiebt.

    Events die nochmals ausgeführt werden sollen
    Durch das verzögerte Laden der JavaScripts sind Events wie das Seitenladen bereits abgeschlossen, wenn die JavaScripts aktiv werden. Da manche Funktionen an genau diese Events anknüpfen können die mit dieser Einstellung nochmals geladen werden. Als Standard ist JQuery load hinterlegt (ruft alle JQueary Ready-Funktionen auf) und das DomContentLoaded-Event. Kann beliebig erweitert werden.
    Die Standard-Angaben:

    $(window).load();
    window.document.dispatchEvent(new Event('DOMContentLoaded',{bubbles:true,cancelable:true}));

    Dateien ausschließen
    Manche externe JavaScripts können vom Optimizer nicht geladen werden, da diese blockiert werden. Dann klappt diese Verarbeitung nicht. Auch wenn eine saubere Lösung wäre dies per Plugin per Inline-JavaScript nachzuladen besteht dazu nicht immer die Möglichkeit. Hier können diese Dateien ausgeschlossen werden.
    Das Plugin für Shopvote hat z.B.: genau dieses Problem. Geben Sie dazu einfach "widgets.shopvote.de" in der Einstellung an.
    Beispiel:

    Angabe Dateien ausschließenwidgets.shopvote.de;something.js
    Überspringthttps://widgets.shopvote.de/js/reputation-badge-v2.min.js
    Überspringttemplates/mein-template/js/something.js

    Aufgabenplaner-Blindgrafik aktivieren
    Die Aufgabenplaner-Blindgrafik muss im Template deaktiviert sein, da der Optimizer sonst unregelmäßig auf diese stößt und dann die Funktion fest mit einbindet. Wer diese Funktion (statt dem empfohlenen Cronjob von JTL) nutzt, kann diese mit der Einstellung wieder aktivieren - dann übernimmt das Plugin den gelegentlichen Aufruf des Cronjobs von JTL.


    Bilder nachladen (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 dem CSS Optimizer:

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


    Die Einstellungen im Überblick



    Bilder Lazy Loader aktivieren
    Hiermit aktivieren Sie das Nachladen der Bilder. Da manche Templates das bereits recht gut abdecken ist der Einsatz individuell zu prüfen. Wir verarbeiten dabei die Bilder die einen src-Attribut gefüllt haben.
    Beispiel:

    Wird verarbeitetimg alt="Test" src="mein-bild.png"
    Wird nicht verarbeitetimg alt="Test2" data-src="nachladen.png"

    Vor dem Laden ausblenden?
    Da die Bilder beim Lazy-Loading kein src-Attribut vorhanden ist, wird immer der Alternativtext angezeigt und das jeweilige Icon, dass ein Bild nicht gefunden wurde. Das kann per eigenem CSS gelöst werden, oder aber die Bilder werden bis diese geladen sind auf "unsichtbar" gesetzt - mit dieser Einstellung.

    Bilder ausschließen
    Manche Bilder sollen nicht nachgeladen werden wie z.B. das Logo oder weitere Bilder direkt im sichtbaren Bereich. Mit dieser Angabe können die Bilder ausgeschlossen werden.

    Bilder ausschließenshologo;warenkorb.png
    Überspringt/bilder/intern/shoplogo/logo.png
    Überspringt/templates/img/icons/warenkorb.png

    Auf HTML-Elemente beschränken
    Möchte man nur Bilder aus einem bestimmten Block nachladen, da z.B. der Rest bereits recht gut optimiert ist, kann man hier im Stil von JQuery den Selektor angeben.
    Um z.B. nur die Bilder der Artikelbeschreibung nachzuladen wäre im Standard-Template folgende Angabe notwendig:

    #result-wrapper .desc

    DNS Prefetch

    Via DNS Prefetch werden externe Domains (von Ressourcen wie JavaScript und CSS) bereits zum Start angefragt, damit fällt die DNS-Abfrage, sprich die Namensauflösung nach dem Seitenladen weg und die Dateien laden schneller. Da unser Optimizer inzwischen alle Daten selbst verarbeitet erkennen wir keine Domains mehr automatisch - diese können nur durch Skripte nachträglich eingefügt werden. Diese können Sie hier mit einstellen um die Ladezeiten weiter zu optimieren (1 URL pro Zeile).
    Beispiel:

    //www.gstatic.com
    //www.google-analytics.com
    

    Dateien vorladen (Preloading)

    Hier können Dateien bereits beim Start angefangen werden zu laden. Mittels Preloading werden diese bei freien Kapazitäten vorgeladen um auf Ihren "Einsatz" zu warten ohne dabei die Seite zu blockieren. Werden z.B. mittels CSS Schriften eingebunden, würden diese erst geladen werden, sobald das CSS bekannt ist. Mittels Preloading stehen diese bereits vorher zur Verfügung und können dann unmittelbar eingesetzt werden (verhindert einen weiteren Delay nach dem Seitenladen).
    Beispiel:

    https://www.domain.de/templates/Evo/fonts/lato/Lato-Bold.ttf
    https://www.domain.de/templates/Evo/fonts/lato/Lato-Italic.ttf

    Auslieferung via eigener CDN-Domain

    Unsere generierte JavaScript-Datei, sowie diese CSS Datei kann auch von einer anderen Domain geladen werden. Dabei gehen wir von einer gleichen Verzeichnisstruktur aus.
    Beispiel:

    Aushttps://www.domain.de/includes/plugins/km_optimizer/temp/css/xxx.css
    wirdhttps://cdn.domain.de/includes/plugins/km_optimizer/temp/css/xxx.css

    Geben Sie für das Beispiel folgende CDN-Domain in den Einstellungen an:

    https://cdn.domain.de

    Abarbeitung durch den Optimizer

    Die Funktionen DNS Prefetch, Dateien vorladen und Bilder nachladen (Lazy Loading) werden live optimiert.
    Für die Funktionen CSS- und JavaScript-Optimierung muss der Optimizer durchlaufen werden, da die Berechnungen für eine Live Optimierung zu lange dauern würden.

    Einstellungen des Cronjobs (=Abarbeitung des Optimizers)



    Seiten definieren durch
    Hier geben Sie an welche Liste an Seiten der Cronjob abarbeiten soll. Dabei sind 2 Modi möglich:

    • Sitemap
      Hier wird eine Sitemap.xml gelesen - das kann der Shopstandard sein, aber auch eine externe URL die z.B. durch weitere Tools generiert wurde
    • URL-Liste
      Hier können Sie im Tab "URLs und Prefetch" selbst bestimmen welche URLs optimiert werden sollen. Für erste Tests ist dieser Wert empfohlen, für einen langfristigen Automatismus sollte die Einstellung "Sitemap" gewählt werden

    Sitemap
    Geben Sie hier den Pfad zur Sitemap an. Sofern keine externe Domain angegeben wird, wird die Shopdomain vorangetellt um die Sitemap per URL abzurufen. Es werden gezippte Sitemaps unterstützt.

    Auszeit bis Ablauf fortgesetzt wird
    Ist der Optimizer gestartet darf er kein zweites mal gestartet werden, sowohl um Fehler zu vermeiden, als auch zur Sicherheit Ihres Shops. Sollte der Optimizer unerwartet beendet werden (z.B. PHP Ausführungszeit kann nicht angepasst werden), so kann dieser nach dem letzten Start + die angegebene Zeit in Sekunden wieder gestartet werden.

    Auszeit bis kompletter Neustart
    Ist der Optimizer vollständig durchgelaufen kann mit dieser Einstellung die Sperrzeit in Sekunden gesetzt werden, bis dieser neu starten darf. Wer regelmäßige Cronjobs einsetzt kann diesen z.B. recht häufig starten, und über diese Einstellung (und die vorherige) die Häufigkeiten steuern und zugleich sichern gehen dass dieser auch bei einem Abbruch zeitnah weiterarbeitet.

    Pause zwischen Seitenverarbeitungen
    Definiert eine Wartezeit in Sekunden zwischen der Optimierung von einzelnen Seiten um z.B. Serverressourcen zu schonen.

    Cache löschen
    Die Cachezeiten der optimierten JavaScripts und CSS Dateien können sehr hoch sein. Wir bilden aus den Dateinamen eine Prüfsumme - kommt also eine neue Datei dazu, stimmt diese nicht und auch eine optimierte Seite würde dann in den "Standard" (ohne Optimierung) zurückfallen um die Seite nicht einzuschränken.
    Beim Start des Optimizer werden alle Dateien älter als x Tage (mit dieser Einstellung) gelöscht um Datenmüll zu vermeiden.

    Verhalten bei Wiederholung
    Nur im Modus "Sitemap" verfügbar: Wir prüfen beim Starten des Optimizers die letzte Änderung laut der angegebenen Sitemap. Liegt diese höher als der vorherige Start des Optimizer wird die Datei neu optimiert, andernfalls übersprungen. Neue Seiten fallen dabei immer unter "neuer".


    Den Optimizer starten

    Der Optimizer kann über 2 Wege gestartet werden: Per Cronjob oder per Browser.
    Wir empfehlen, sofern möglich, einen Cronjob einzusetzen da dieser minimal schneller arbeitet und es dabei nicht erforderlich ist die ganze Zeit des Optimierungsvorgangs ein Browserfenster geöffnet zu haben (im Schnitt dauert die Optimierung einer einzelnen Seite 8-12 Sekunden).

    Check
    Prüfen Sie vor einem Start ob alle Bedingungen erfüllt sind unter "Optimizer -> Status Check".

    Per Cronjob starten
    Der Cronjob kann sowohl in der Kommandozeilen gestartet werden, als auch per HTTP Request.
    Während die Kommandozeile keine Limits in der Ausführungszeit kennt, versuchen wir bei einer HTTP Anfrage diese hoch zu setzen - ob das Ihr Server unterstützt sehen Sie im Plugin unter "Optimizer -> Status Check -> PHP Ausführungszeit". Beim Aufruf setzen wir ebenfalls, dass ein Abbruch des Aufrufes ignoriert wird. Z.B. Cronjob-Dienste wie cronjob.de brechen den Vorgang nach 20 Sekunden ab - das wird hiermit umgangen.

    Cronjob per Konsole starten
    Erstellen sie einen Cronjob auf Ihrem Server mit der Pfadangabe zum Plugin und der Datei "cron.php".
    Das sieht dann in etwa so aus:

    php /var/www/vhosts/domain.de/domain.de/httpdocs/includes/plugins/km_optimizer/cron.php

    Das Resultat sieht in etwa so aus:



    Cronjob per HTTP-Aufruf starten
    Wenn Sie einen externen Cronjob-Dienst nutzen Sie dazu die URL zur gleichen Datei.
    Beispiel:

    https://www.domain.de/includes/plugins/km_optimizer/cron.php

    Optimizer per Browser aufrufen (Live-Ansicht)
    Wem es leider verwehrt ist die PHP Ausführungszeit anzupassen wird mit den Cronjob keine Freude haben, dieser müsste dann sehr häufig aufgerufen werden um größere Mengen an Seiten zu verarbeiten. Nutzen Sie dann die Funktion der Live-Ansicht. Diese kann aus dem Plugin heraus gestartet werden. Die Voraussetzung hierfür ist ein aktiver Shopadmin-Login.
    Wir empfehlen die Verwendung in einem ungenutzen oder privaten/abgesicherten Browser.
    Ihr verwendeter Browser wird den Server durch die Berechnungen fordern, sodass Sie (aber nur Sie - weitere Besucher sind nicht betroffen) den restlichen Shop ebenfalls nur recht langsam bedienen können.
    Klicken Sie zum Starten im Plugin im Tab "Optimizer" auf den Button "Optimizer starten".

    Das Ergebnis sieht in etwa so aus:


    Kompatibilitäten mit Templates und Plugins

    Hier ist wesentlich der JavaScript Optimizer zu beachten, besonders der Part für die nachträglichen Events und das ausschließen von Dateien (detailreiche Infos im Abschnitt JavaScript Optimizer). Bei externen JavaScripts kommt es manchmal dazu, dass wir diese nicht lesen dürfen (da es ein Aufruf ist der nicht von einem echten Besucher kommt). Dann fehlen diese Funktionen.

    Nachfolgend gehen wir auf die bekannten Kompabilitätsprobleme ein:

    Trustami
    Das Trustami-Widget muss in den Einstellungen ausgeschlossen werden.
    Gehen Sie im Plugin auf Einstellungen -> JS Optimizer -> Dateien ausschließen und fügen folgenden Wert hinzu:

    trustami-widget.js

    Shopvote
    Das Shopvote-Widget muss in den Einstellungen ausgeschlossen werden.
    Gehen Sie im Plugin auf Einstellungen -> JS Optimizer -> Dateien ausschließen und fügen folgenden Wert hinzu:

    widgets.shopvote.de

    Mod-Pagespeed
    Das Mod-Pagespeed Modul von Google erledigt ähnliche Aufgaben. Ein Vergleich beider Lösungen empfiehlt sich allemal! Dazu sollte die Optimierung von JavaScript und CSS ausgeschaltet werden.

    Anbei eine Konfiguration die sich auf das Optimieren von Bilder und den Cachezeiten beschränkt und die JS+CSS Aufgaben dann vom Plugin übernommen werden können.

    #Apache-Konfiguration, z.b. in der .htaccess
    ModPagespeed On
    ModPagespeedRewriteLevel PassThrough
    ModPagespeedEnableFilters rewrite_images,extend_cache
    
    #Nginx-Konfiguration
    pagespeed on;
    pagespeed RewriteLevel PassThrough;
    pagespeed EnableFilters rewrite_images,extend_cache;
    

    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: