Neu Plugin JTL Speed Optimizer verfügbar

[eRock Marketing]

Halli Hallo,

Version 2.00 ist nun offiziell verfügbar!

Die hauptsächliche Änderung: Alle Optimierungen passieren live ohne dabei mehr PHP Performance zu benötigen.

Im Detail ist passiert:

• Entfernung vom kritischen CSS
  Das kritische CSS hatten wir implementiert um alle anderen CSS Dateien später zu laden. Die CSS Dateien werden nun asynchron geladen (sofort startend, aber nicht blockierend für den Seitenaufbau).
  Dadurch vermeiden wir unnötige zusätzliche Daten und haben trotzdem den Performance Schub. Da es dadurch zu einem kurzen "schlechtem" Aussehen der Seite kommen kann haben wir einen Preloader integriert (kann auf Wunsch abgeschaltet werden)
• Erneute Erweiterung der JavaScript Logik
  Wir fassen nicht mehr zusammen. Schade, aber notwendig.
  Leider gibt es zu viele Skripte die immermal Fehler verursachen, oder auch schlichtweg von Ad-Blockern geblockt werden. Das führt beim Zusammenfassen aller Skripte dazu, dass die Seite nicht mehr richtig funktioniert.
  Wir haben uns daher dagegen entschieden und siehe da: Es klappt genauso gut und teils noch besser!
  Wir liefern 2 Methoden aus (beide nehmen sich nicht viel, einfach einmal durchprobieren!):
  • Variante 1: Laden im Status JS-Complete
    Für den Browser gibt es erstmal gar kein JavaScript. Ist die Seite dann fertig geladen machen wir die unkenntlichen Skripte wieder sichtbar und laden diese.
    Schwierigkeit: Hier übergehen wir Events (wie z.B: "Seite wird geladen") für JavaScript. Wer Plugins mit sauberen Events nutzt hat kein Problem: Wir triggern diese nochmals.
    Diese Variante klappte in über 95% der Fälle. Wer zu komplizierte Seiten und/oder nicht ganz sauber programmierte Plugins nutzt setzt bitte auf Variante 2
  • Variante 2: Alle als Defer laden
    Alle Skripte (auch Inline-Skripte) werden als externe Ressource deklariert (Inline Skripte benötigen dabei keinen zusätzlichen Request, hier haben wir uns eines kleinen Tricks beholfen dass der Browser die Angaben versteht) und definiert dass diese erst ganz am Ende der Seite geladen werden sollen. Dadurch bleiben Reihenfolge und auch Position dennoch gleich und blockieren den Seitenaufbau nicht.
• Bilder Lazy-Loader vollständig neu
  Wir arbeiten nun mit dem Intersection-Observer (und einem Fallback für älter Browser). Hierdurch müssen wir nicht explizit ein Scrollen oder ähnliches überwachen was das Nachladen deutlich performanter macht.
  Hinzukommend versuchen wir auch andere Lazy-Loader zu erkennen, sodass nicht mehr so viele Einschränkungen notwendig sind. Diese Rate werden wir jedoch leider nie zu 100% abdecken können, da wir nicht alle Nachladelogiken für Bilder kennen können (bisher sind aber alle Tests gut verlaufen, auf keine Probleme gestoßen!)

Kurzum: Alle 3 Optimierungsbereiche haben einen Neuanstrich bekommen.
Das uns mögliche ist nach unserer Auffassung damit vollständig erledigt.

In Kürze werden wir auch einen ausführlichen Beitrag veröffentlichen, wie man auf weitere Faktoren eingehen kann (Ressourcen-Caching, Schriftarten, ....) um einen rundumschnellen Shop zu bekommen - auch mit JTL!

Wer dies natürlich über uns realisieren lassen möchte kann uns natürlich gerne kontaktieren - wir bedanken uns für die starke Teilnahme am Plugin und die vielen Anfragen - die es uns auch ermöglichen solch ein Updatetempo hinzulegen.

Der Standardlink ist gleich geblieben und kann im Shop gefunden werden (Doku-Update im Laufe des Tages): https://shop.knoell-marketing.de/JTL-Speed-Performance-Optimierung
Doku wird in etwa sein: Hochladen, installieren - fertig! (natürlich dann mit Erklärung aller 7 Selectbox-Einstellungen - mehr sind nicht mehr notwendig).

Wer explizit die Version haben möchte (auch ggf. für spätere Zugriffe): https://shop.knoell-marketing.de/zips/km_speed_optimizer_v200.zip

Noch ein Hinweis zum Update: Es empfiehlt sich vorher das alte Plugin zu entfernen - so wird sicher jegliche "Alt-Last" entfernt.


P.S.: Wir haben alle Testlizenzen entfernt, sodass gerne die V2.00 erneut getestet werden kann.

 

[swiss-sale.ch]

Liebes Team von KnoellMarketing

Herzlichen Dank für die neue Version und den super Service/Support. Sehr empfehlenswert!
Ihr macht da einen sehr guten Job, weiter so!

Ich wünsche bereits jetzt ein angenehmes Wochenende.

 

[saw]

Hi,
also Version 1 gelöscht, deinstalliert, V2 installiert und ein wenig getestet mit Prefetch Ja/Nein usw., mit Lazyload und ohne...
Dabei auch den geänderten Quelltext im Browser gesehen, aber page speed ist nun lange nicht mehr so happy mit unseren Artikelseiten wie vorher.
Bei solchen Seiten kam ich in V1 auf rund 90 Punkte
https://www.softairwelt.de/Krytac-Trident-MK2-PDW-05-J-battle-grey
Jetzt 76

Dito
https://www.softairwelt.de/H-K-MP7A1-S-AEG
https://www.softairwelt.de/1250-Dominator-FT-Pressluft-Gewehr-45-mm-Diabolo
usw.

Die waren vorher alle bei rund 90, jetzt rund 75

 

[MichaelH]

Hm, was mich bei diesen Seiten erstaunt - mein Page-Speed-Plugin sagt 0.99 Sekunden, aber gefühlt und leise gezählt (21, 22, 23) sind es > 2 Sekunden.
Auch wird das Fenster gelöscht, dann kommt eine Art Sanduhr und dann die Anzeige.
"Gefühlt" wartet man und die Anzeige ist nicht flüssig.

Mein Shop (ohne Plugin) hat aktuell 1.5-2.0 Sekunden, aber die Anzeige wird nicht gelöscht und die erste Bewegung am Schirm mit neuen Daten ist "gefühlt" sofort.

 

[eRock Marketing]

Hallo,

wir haben in V1 festgestellt, dass das nachgelagerte CSS von PageSpeed nicht erkannt wurde - und damit auch nicht das schrecklichste: Die Schriften.
Wie ein paar Beiträge vorher geschrieben: Jetzt sind wir in Wahrheit schneller.
Einfach mal mit einem etwas ausführlicherem Tool wie webpagetest.org testen - hier sieht man die Unterschiede.

Ansonsten kann ich hier nur empfehlen, die letzten wenigen Punkte aus Pagespeed anzugehen:
- Nicht verwendete CSS auschieben: Ohne Templateanpassung wird das nicht möglich sien - hier geht es um die gesamt geladenen CSS, da muss richtig rausgelöscht werden
- Bilder in modernen Formaten bereitstellen: Benötigt eine Erweiterung auf dem Server der die Bilder umwandelt - dieser Bemessungsgrundlage spielt allerdings keine große Rolle
- Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt: Hier muss man in den CSS-Dateien das "@font-face{...}" suchen und erweitern um "font-display: swap;"
- Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen: Hier mittels Serverkonfiguration (z.B: in der .htaccess) für die möglichen Dateitypen eine lange Lebensdauer einstellen
- Übermäßige DOM-Größe vermeiden: Nicht lösbar ohne gravierende Templateanpassung
- Aufwand für Hauptthread minimieren: Zeigt er zwar an und kann auch verbessert werden, aber der Wert ist letztendlich für einen Shop in Ordnung. Hier müsste man mit JavaScript Optimierungen dran (z.B.: Mal nicht jede Kleinigkeit über jQuery sondern auch mal per Vanilla-JS lösen).

Es fällt auf, dass die Schriften recht stark reinhauen - die wurden vorher ebenfalls von PageSpeed nicht als schwerwiegend erkannt, da diese ja über das CSS geladen werden.
Nachgeladen wurden diese ja dennoch: Sodass der Besucher warten musste - und zwar länger als er es jetzt tut.

Simple Lösung: Die Woff Dateien vorladen lassen (mittels z.B. <link rel="preload" src="/templates/Hypnos/bootstrap/fonts/glyphicons-halflings-regular.woff" as="font"> ).
Entweder per Template-Einbau oder mittels z.B: unserem Plugin Individual Code.


Uns war es wichtig eine ehrliche Verbesserung zu erreichen (war es natürlich stets, dass Pagespeed das bisher nicht ausreichend erkannt hat haben wir auch erst in letzter Zeit bemerkt).

@MichaelH Die "Sanduhr" kann ausgeschaltet werden. Preloader (Style) auf "nicht aktiv" setzen.

Edit: @saw Für Hypnos-Nutzer hat bei unseren Tests die JavaScript Variante "Defer" (also Nr. 2) bessre geklappt.

 

[saw]

Hm, was mich bei diesen Seiten erstaunt - mein Page-Speed-Plugin sagt 0.99 Sekunden, aber gefühlt und leise gezählt (21, 22, 23) sind es > 2 Sekunden.
Auch wird das Fenster gelöscht, dann kommt eine Art Sanduhr und dann die Anzeige.
"Gefühlt" wartet man und die Anzeige ist nicht flüssig.

Danke Michael, genauso sehe ich es auch. Perfekt beschrieben.
Ich wollte nicht gleich rund um schlagen und erst mal nur auf die Werte eingehen

 

[saw]

Simple Lösung: Die Woff Dateien vorladen lassen (mittels z.B. <link rel="preload" src="/templates/Hypnos/bootstrap/fonts/glyphicons-halflings-regular.woff" as="font"> ).
Entweder per Template-Einbau oder mittels z.B: unserem Plugin Individual Code.
Für Hypnos-Nutzer hat bei unseren Tests die JavaScript Variante "Defer" (also Nr. 2) bessre geklappt.

Danke, ich werde so viel umsetzen wie ich kann und gebe feed back

 

[MichaelH]

Danke Michael, genauso sehe ich es auch. Perfekt beschrieben.
Ich wollte nicht gleich rund um schlagen und erst mal nur auf die Werte eingehen

Ich habe hier schon länger nicht mehr mitgelesen, bin aber interessiert wenn das Plugin "perfekt" ist - habe also nach längerer Zeit wieder mal etwas angesehen.

 

[eRock Marketing]

Auch wenn wir natürlich einen Marathon vermeiden wollen, so haben wir die Version explizit V2 genannt, da die Herangehensweise etwas anders ist.
Ansätze und Lösungen finden wir immer gut und wollen natürlich ein gutes Plugin nutzen. Für "perfekt" muss ich gestehen: Ab an bessere Templates!
Das wir nicht bei .00 bleiben ist mir klar

Aber mit dem CSS lasse ich mir nochmal durch den Kopf gehen. Es kann eben sein, dass das "normale" CSS lange lädt und in der Beta kam dabei die Rückmeldung dass dies komisch aussähe - daher der Preloader.
Der Preloader ist auch eine einfache CSS-Datei. Wer mag kann diese gerne anpassen (Pluginordner: version/200/frontend/css/preloader-css).
Ggf. machen wir hier noch eine Lösung dass man in diese Datei (Errechnet aus der "alten" Logik des Cronjobs) auch eine Kritische CSS generieren kann, statt nur dem "Ladebalken" - der verschwindet nunmehr wenn alles geladen ist (onLoad) - da sind im Hintergrund aber schon recht schnell Daten. Wen das nicht stört (micht stört es nicht, aber verständlicherweiße einige Tester) einfach mal den Preloader (Style) deaktivieren.

 

[woot123]

@KnoellMarketing

Ich muss auch sagen, dass es mich persönlich sehr stört, wie das Laden der Seite aussieht. Sei es nun mit Preloader-Grafik oder ohne. Dieser kurze Stilbruch bei jedem Seitenaufruf ist für mich nicht tragbar. Mir macht das Surfen über die Webseite so auf jeden Fall keinen Spaß. Es mag so vielleicht etwas schneller sein, aber es muss nicht alles bis ins letzte für Google optimiert sein. Bei manchen Punkten sollte man eine schöne Darstellung für den Kunden über die geringe Verbesserung bei Google stellen.

Bitte als konstruktives Feedback aufnehmen, denn es ist auf keinen Fall böse gemeint Ich würde mich sehr freuen, eine abgeänderte Version des Plugins nochmal in unserem Shop zu testen.

 

[saw]

Ich muss auch sagen, dass es mich persönlich sehr stört, wie das Laden der Seite aussieht. Sei es nun mit Preloader-Grafik oder ohne. Dieser kurze Stilbruch bei jedem Seitenaufruf ist für mich nicht tragbar. Mir macht das Surfen über die Webseite so auf jeden Fall keinen Spaß.

Ja, das surfen in unserem Shop macht mir mit der Darstellungsweise auch keinen rechten Spaß.
Egal was bei prefetch eingestellt ist und Javascript, wie empfohlen, Version 2 eingestellt ist.

 

[saw]

Ich habe V2 jetzt erst mal deaktiviert.
Vielleicht ist es Zufall aber seit Freitag ist der Umsatz eingebrochen.

 

[peterwill]

Ich habe V2 jetzt erst mal deaktiviert.
Vielleicht ist es Zufall aber seit Freitag ist der Umsatz eingebrochen.

Hallo saw bei uns ist der Umsatz auch eingebrochen seit Freitag !!!!! Benutze aber noch die 1.09 Version
Hat dann wohl nix mit dem Speed Plugin zu tun.
Teste gerade im Testshop die 2.0 Version seit Tagen was auffällt das nerfige von links rein flaschen haben wir nur im Firefox Browser bei Chrome und IE ist alles gut !!!!

 

[saw]

Hallo saw bei uns ist der Umsatz auch eingebrochen seit Freitag !!!!! Benutze aber noch die 1.09 Version
Hat dann wohl nix mit dem Speed Plugin zu tun.

Danke für die Info. Bist Du auch auf jtl- hosting?
Ausser katastrophalem Umsatz blockt uns auch gmail ohne Ende. Ticket bei JTL beantwortet mit: da muss man warten...

 

[MichaelH]

Es ist schönes Wetter, Frühling, und die Leute haben anderes im Sinn als shoppen ..

 

[eRock Marketing]

Vielen Dank für die Rückmeldungen.

Wir werden das Thema CSS nochmals durchleuchten. Das wesentliche Problem: Es ist für die Gestaltung der Seite erforderlich. Nach JTL Standard Logiken bekommt aber jede Seite das volle CSS. Daraus zu unterscheiden können wir durch dynamische Inhalte nicht.

Wir müssen also alles nachladen um den Faktor zu verbessern. Das kritische CSS was vorher generiert wurde macht zwar die Zahl in Pagespeed schöner, aber in Wahrheit ist es nicht so - als uns das aufgefallen ist haben wir dazu viele Tests gefahren.
Auf einem Desktop-PC bekommt man das nicht mit, aber in 3G merkt man das schon - die Seite ist schön schnell da, aber entweder ist die Interaktionsrate hoch oder man wechselt z.B: eine Varkombi und die zerschießt es noch kurz, da das Haupt-CSS fehlt.

Das ist für uns einfach keine Lösung - was nicht schlimm ist: Ein ganz kleines Mini-kritisches CSS. Das was z.B. der Preloader gerade ist.
Aber wir schauen mal, wir hatten ja schonmal was vorgeschlagen a la "Kritisches CSS vom Header laden, dass man das schonmal sieht und den Rest dann nachladen" - das wäre eine Option.

Hier hilft uns natürlich Feedback wie ihr es euch wünscht!


Wen die Funktion soweit nervt: Der kann den CSS Optimizer auch ausstellen. Eine Lösung werden wir finden, versprochen.

 

[saw]

Wen die Funktion soweit nervt: Der kann den CSS Optimizer auch ausstellen. Eine Lösung werden wir finden, versprochen.

Ich habe das plugin wieder aktiviert, CSS Optimizer auf nicht aktiv, aber im firefox "wischt" die Seite immer noch rein.
Und es gibt hier und da Bild Probleme, beim Aufruf des Artikels wird ab und an das zweite Bild unvollständig gezeigt. Wechsel ich nur das Programm, sagen wir mit Alt-Tab und kehre zurück, stimmt die Darstellung.
Siehe screenshot.

 

[MichaelH]

Bei mir kommt "SQLSTATE[HY000] [1040] Too many connections " von deinem Shop, liegt wohl am Interesse aus dem Forum ?

 

[eRock Marketing]

Habe mir das mal angeschaut. Es scheint so, als sei die Seite mit dem "Fertig geladen" zu schnell und das CSS braucht länger.
Firefox scheint die seite dann schon auszuliefern, auch wenn das CSS noch nicht fertig ist, das JavaScript hingegen bremst.
Sprich ist das JavaScript "normal" in der Seite blockiert es so stark, dass man den Sprung nicht mitbekommt. Auch zu sehen ist: Ist das CSS noch nicht im Cache vom Nutzer wird die SEite ohne "einspringen" geladen.
Sobald das CSS im Cache ist, wird es jedoch so komisch geladen.
Wir haben hier keinen Einfluss drauf! Das passiert (so meine ersten Schlussfolgerungen) nur dadurch dass das JavaScript "nach dem Seitenladen" ausgeführt wird, somit nicht blockt und die Seite verdammt schnell ist.
Ehm.... das ist nochmal was ganz neues: Denn das wiederspricht eigentlich dem Aufbau des HTML-Baumes.
Analysiert man z.B. via webpagetest.org sieht man dass durch das nachgelagerte JS die Seite unmittelbar mit herunterladen interaktiv ist: Dann werden erst die Ressourcen geladen.
Ggf. hängt sich der Firefox nun bereits in das "Interaktiv" mit der Darstellung statt in "geladen". Da muss ich mich mal einlesen.
Fazit wäre hier: Ohne kritisches CSS (zumindest im Ansatz) würde es gar nicht funktionieren...

Zu den Bildsachen: Darf ich einmal die vollständige Konfiguration sehen? Sind dort Produktbiler ausgeschlossen? (also im Prinizip mindestens: shoplogo;product -> So ist die aktuelle Standardeinstellung, bei Update statt Neuinstallation bleibt der alte Wert von vorher bestehen)

P.S.: Während dem Testen bekam ich auch ab und an: SQLSTATE[HY000] [1040] Too many connections
Herje...

 

[saw]

Bei mir kommt "SQLSTATE[HY000] [1040] Too many connections " von deinem Shop, liegt wohl am Interesse aus dem Forum ?

Eher nicht, seit Freitag gibt es Probleme mit unserem JTL Hosting.
Die SQL Fehlermeldung habe ich noch nicht gesehn.