Neu Template Snackys - verdammt schnell, inkl. Endless Scrolling, Checkout Funneling & Co.

[eRock Marketing]

Hallo JTLer,

unsere Kunden haben wir versprochen bis Jahresende wird es fertig - daher haben wir in den letzten Tagen den Endspurt hingelegt und sind nun endlich soweit:
Unser erstes Template für die Allgemeinheit (sonst erstellen wir stets individuelle Templates) ist einsatzbereit.

Die Live-Demo: https://snackys.knoell-marketing.de

Der Clou: Wir haben hier ein sehr großen Fokus auf Performance gelegt.
Auf Grund unseren Erfahrungen mit AMP und dem diesjährigen starken Fokus von Google auf Geschwindigkeit (finden wir toll: Damit denken auch die Betreiber an das Thema und surfen fängt wieder an Spaß zu machen!) haben wir recht viele Berührungspunkte gehabt die wir allesamt in der Templateumsetzung mit beachtet haben.

Das Ergenis: Ein schnelles Template - das nach unserer Auffassung auch noch richtig gut aussieht.

Auch im Design/Funktionalitäten haben wir uns ein paar Besonderheiten gewidmet:

• Sidebar Warenkorb
• Optimierter Checkout (Funneling)
• Endless Scrolling
• Bilderzoom
• Lightbox mit Gallerie
• Integrierter Cookie Hinweis

Ein paar Beispiele wie wir eine bessere Performance erreichen:

• Minifizierte Bootstrap (statt einfach dem kompletten Framework)
• CSS nach Seitentypen (Styling von der Artikelseite sind auf der Startseite unnötig)
• CSS wird vollständig intern geladen (Vermeiden von Requests)
• JavaScript wird optimiert und verzögert geladen (auch inline-Skripts werden ausgelagert)

Zu guter Letzt haben wir auf exakt dem gleichen Shop mit identischen Einstellungen einmal unser Template und einmal das EVO-Template geprüft.

Der Performance-Check:
Startseite - Seite erscheint:
2,50s Snackys Template
3,30s EVO Template

Kategorieseite - Seite erscheint:
2,00s Snackys Template
3,60s EVO Template

Detailsseite - Seite erscheint:
2,30s Snackys Template
3,60s EVO Template

Und das sagt Pagespeed Insights:
Startseite
81/100 Mobil - 88/100 Desktop - Snackys Template
56/100 Mobil - 80/100 Desktop - EVOTemplate

Kategorieseite
94/100 Mobil - 97/100 Desktop - Snackys Template
78/100 Mobil - 98/100 Desktop - EVOTemplate

Detailseite
82/100 Mobil - 100/100 Desktop - Snackys Template
41/100 Mobil - 97/100 Desktop - EVOTemplate

Selbstverständlich haben wir auch andere Optimierungen wie den Objekt- Cache, Mod-Pagespeed usw. aktiviert: im Test jedoch natürlich für beide Templates!

Demo-Shop: https://snackys.knoell-marketing.de/

Installation:
Das Template kommt mit einem Plugin - um alle Performance Optimierungen zu realisieren.
Es gibt eine kostenlose 14 tägige Testphase - auf Bedarf (z.B. in Entwicklungsumgebung) kontaktiert uns gerne für einen längeren Testzeitraum.

Die ZIP entpacken und einfach in das Hauptverzeichnis des Shops laden (Struktur ist nach JTL ausgerichtet) und beinhaltet das Template + das Plugin.
Das Template funktioniert mit dem 4.06er Shop.

Download

Beim Plugin die Abfrage des Lizenzkeys kann einfach mit weiter bestätigt werden - dann aktiviert sich die Testlizenz.


P.S.: Unser eigener Shop wird dafür gerade fertiggestellt, sodass es dann auch nach der Testphase gekauft werden kann.

 

[Roddi]

Im Beitrag sollte vllt. noch der Hinweis stehen, das Ioncube installiert sein muss sonst bekommt man eine weiße Seite nach dem aktivieren zu sehen.

 

[eRock Marketing]

Wir haben das Thema nochmals überdacht, auch auf Grund erster Rückmeldungen.
Dabei haben wir uns dazu entschlossen eine Version ohne ionCube herauszubringen, die nun heruntergeladen werden kann unter:
https://shop.knoell-marketing.de/zips/snackys.zip

 

[eRock Marketing]

Danke für das viele Feedback.
Wir haben dies zum Anlass genommen noch mehr rauszuholen: Und sind nun nochmal rund 10% schneller!
Zudem gibt es ein paar Updates:

- Template ist nun vollständig eigenständig (kein Child des EVO-Templates mehr)
- Reduzierung von PHP Ausführungen (alle Template eigenen CSS und JS Angaben sind soweit optimiert, dass diese ohne PHPQuery optimal eingebunden werden, nur noch Drittanbieter durchlaufen die Prozesse)
- weiteres Theme: Darkmode
- Custom-Theme für eine schnelle Anpassung
- config.ini für die Anpassung von eigenen Farben
- Dokumentation, siehe: https://shop.knoell-marketing.de/Doku-Snackys-Template
- Vorgefertiges Child-Template zum Download: https://www.knoell-marketing.de/snackys-child.zip
- Bugfixes

Die aktuelle Version ist unter gleichem Link zum Download mit 14 Tagen Testzeitraum verfügbar.
Zum Template: https://shop.knoell-marketing.de/Snackys-Template

 

[peterwill]

Was soll das template denn kosten?

 

[okh]

payment wall (paypal plus Zahlungsarten) erscheinen nicht. Keine Zahlungsart möglich.

 

[eRock Marketing]

Welche PayPal Plus Version wird hier verwendet?
Da hatten wir einen Fix eingebaut, gerne prüfen wir das nochmal - das sollte natürlich funktionieren.

Zur Preisgestaltung: Das Template soll 599,00 € netto inkl. 12 Monate Updates kosten, die weitere Subskription wird 50% betragen.
Alle Infos dazu auch unter: https://shop.knoell-marketing.de/Snackys-Template

 

[okh]

paypal 1.09

 

[eRock Marketing]

Vielen Dank für die Rückmeldung.

Ist behoben - einfach neu herunterladen.
Eigentlich muss im Template nur die snackys/layout/footer.tpl ersetzt werden.

Die Langversion für Interessierte:
Auch in der Version ging es, es war jedoch abhängig davon wie schnell welche JavaScript-Datei nachlädt und ggf. zu früh das JQuery ready() (hier vom PayPal Plugin) ausgelöst wurde.
Sicherlich auch im Sinne weiterer Drittanbieter JavaScripts haben wir eine Lösung eingebaut, die statt nach Dokument laden erst nach "allen JavaScripts laden" (die bei uns ja erst nach dem Seitenaufbau aus Performancegründen geladen werden) ausgeführt wird - sprich wir überschreiben diese JQuery Funktion.

 

[Aze]

Auf der artikel detailseite wo man die Menge eintippen kann und in den warenkorb klicken kann, erscheint die Einheit Stück oder Set nicht passend

 

[okh]

Vielen Dank für die Rückmeldung.

Ist behoben - einfach neu herunterladen.
Eigentlich muss im Template nur die snackys/layout/footer.tpl ersetzt werden.

Die Langversion für Interessierte:
Auch in der Version ging es, es war jedoch abhängig davon wie schnell welche JavaScript-Datei nachlädt und ggf. zu früh das JQuery ready() (hier vom PayPal Plugin) ausgelöst wurde.
Sicherlich auch im Sinne weiterer Drittanbieter JavaScripts haben wir eine Lösung eingebaut, die statt nach Dokument laden erst nach "allen JavaScripts laden" (die bei uns ja erst nach dem Seitenaufbau aus Performancegründen geladen werden) ausgeführt wird - sprich wir überschreiben diese JQuery Funktion.

Das ging ja schnell. Besten Dank. Im Gesamtpaket ist mir der Preis und die jährliche Subscription doch ein bisschen zu hoch. Bei 500/250 inkl. wäre ich eingestiegen.

 

[make-it]

Das ging ja schnell. Besten Dank. Im Gesamtpaket ist mir der Preis und die jährliche Subscription doch ein bisschen zu hoch. Bei 500/250 inkl. wäre ich eingestiegen.

 

[make-it]

Gute Tag,
Seoseed:
Immer wieder der Preis, Preis ist mehr dan geregfertigt. Du kannst natürlich auch gerne ein eigenes template erstellen steht jeden frei.
Deine eigene Dienstleistungen sind auch nicht umsonst.
Mit freundlichen Grüßen

 

[eRock Marketing]

Auf der artikel detailseite wo man die Menge eintippen kann und in den warenkorb klicken kann, erscheint die Einheit Stück oder Set nicht passend

Den Anhang 30934 betrachten

Ist ebenfalls behoben.

Einfach das Template neu einspielen (ZIP neu herunterladen).

Es wurde die Datei /templates/snackys/themes/base/css/details.css geändert, hinzugekommen ist:

#buy_form .input-group-addon.unit {
    padding: .75rem .2rem;
    margin-right: 1rem;
}

Bitte in der Doku (im Plugin oder hier: Link Doku) den Punkt " Cache erneuern" beachten damit die Änderungen dargestellt werden.

 

[eRock Marketing]

Und noch ein Update - erneut Dank der vielen Rückmeldungen.

Wir haben die Lizenzklasse angepasst, sodass nur 1x pro Tag die Lizenz geprüft wird um weiter Ressourcen zu sparen.
Nach dem Download reicht es das Plugin zu updaten (am Template gab es keine Änderungen).

 

[hula1499]

Als speed-fanatiker bin ich ja immer an neuen Dingen interessiert

Gibts bereits Referenzen die ihr mitteilen dürft? Demo Shops sind bezüglich speed-test/Angaben meist sehr "realitätsfremd". Gerne auch per PM.

 

[eRock Marketing]

Hallo hula14999,

dann sprechen wir ja die gleiche Sprache
Ich habe bisher keine andere Meldung und darf frei sagen: Wir haben z.B. die ersten JTL Shops auf AMP Basis erstellt. (Beispiele: www.freixenet-onlineshop.de oder auch www.ma-bike.com)
Wir lieben Geschwindigkeit.

Zu dem Template haben wir leider noch keine nennbaren Referenzen, dafür ist es einfach zu neu.
Wir haben allerdings 3 Kunden die aktuell an Individualisierung auf Basis dieses Templates überarbeitet werden - sobald diese live sind teilen wir die gerne mit.

Für Kenner lohnt sich jedoch auch ein erster Blick in z.B. webpagetest.org, siehe: https://www.webpagetest.org/result/190107_KQ_c8a4f65a607c26a6df6e84eefb0d8317/
Hier sieht man den Hauptvorteil: Es ist nur das grundlegende HTML notwendig bis die Seite vollständig dargestellt wird.
Gerne kann man auch weitere Werte davon vergleichen, wie z.B: die beinhaltete CSS Größe dieser ersten Anfrage (die die Seite vollständig darstellt. Als CSS laden wir nur die Schrift nach, sonst ist alles bereits ausgeliefert): 68KB !

Im übrigen wird dieses Template auch mit unserem kommenden Plugin AMP kompatibel sein: Die letzten Bytes sparen wir uns dann durch Standard-AMP Funktionen wie den Slider, sowie entfernen von Transitions usw. - ist bereits in der Fertigstellung (AMP Release ist für Anfang Februar geplant).

 

[hula1499]

AMP für CMS/News -> top
AMP für Artikel/ Shop etc -> unbrauchbar, nicht relevant und auch niemals dafür gedacht/geplant gewesen.

Ok, bin ja jetzt eh Abo von dem Beitrag, mal schaun bis die ersten Seiten mal live sind
Demoseiten sind immer nackt, ohne Plugins oder ähnlichem -> da schneidet ja auch noch Evo nicht so schlecht ab ab, gegenüber so manchen Referenzseiten mit Evo - daher leider nicht aussagekräftig.
Gibt ja ne 14 Tage Demo, viell. schau ich mir die mal am DEV an, gibt ja "leider" schon ein paar schlagende Argumente (schon allein der ganze bootstrap mist, wovon eh XX% irrelevant ist)

 

[eRock Marketing]

Es ist ein Update verfügbar.

Leider haben wir in Bezug auf das Child-Template Bugs feststellen müssen, diese wurde behoben.
Ebenso haben wir bereits weitere Entwicklung mit einfließen lassen um nicht nur die Bugbehebung zu realisieren.

In der Version 1.03 von Snackys wurde erledigt:

• Bugfixing Child Template: Config-Dateien werden nun im Child-Template gesucht, wenn nicht vorhanden aus dem Haupttemplate genutzt, die Haupt JavaScript Dateien werden immer aus dem Haupttemplate genutzt, wenn nicht anders im Child Template angegeben
• Verbesserung der Performance, durch:
  • JQuery Bibliothek wird nun während dem Seitenaufbau geladen, jedoch erst nach Fertigstellung ausgeführt, die Grundladezeit bleibt identisch, die nachladende Zeit wird minimiert
  • Durch die JQuery Änderung werden nun alle darauffolgenden JavaScripts unmittelbar danach geladen (parallel) - spart ebenfalls 1 Roundtrip
  • Ablauf des Nachladens optimiert
  • Verringern der Domtiefe um 3 Stufen
  • Notwendige Inline-JavaScript dramatisch reduziert
  • DNS Prefetch von Analytics
• Bugfixing mit PayPal Paymentwall und Käuferschutz
• Eigene Cachingdateien werden mit dem Leeren des Objectcaches "Template" nun ebenfalls entfernt
• Das Logo wird nicht mehr nachgeladen, sondern direkt präsentiert, die eine Bilddatei machte in allen Tests keine Schwierigkeiten und sieht schöner aus

Das Ergebnis: 0,1 bis 0,3 Sekunden Performance-Gewinn, aber beachtlich sind die Steigerungen in Pagespeed Insights (hervorgerufen durch besseres Parsing und JS-Verfahren):
Startseite mobil: 98/100 Punkte
Kategorieseite mobil: 100/100 Punkte
Detailseite mobil: 99/100 Punkte

Die Desktopwerte sind alle bei 100/100 geblieben, sorry.

Die Version ist über den gleichen Link verfügbar: https://shop.knoell-marketing.de/zips/snackys.zip
Das Child-Template mit seiner Mindestanforderung gibt es hier: https://www.knoell-marketing.de/snackys-child.zip

P.S.: @hula1499 Der erste Live- Shop ist hier zu sehen: https://www.fitness-and-fun.de - der schnelle Livegang war jedoch auf ein Problem mit der 4.05er und der Serverkonstellation zurückzuführen, sodass hier in den nächsten Tagen sicherlich auch noch einiges hinzukommt. Die anderen beiden bauen wir noch in der Testumgebung bis diese Live gehen werden.

 

[make-it]

Es ist ein Update verfügbar.

Leider haben wir in Bezug auf das Child-Template Bugs feststellen müssen, diese wurde behoben.
Ebenso haben wir bereits weitere Entwicklung mit einfließen lassen um nicht nur die Bugbehebung zu realisieren.

In der Version 1.03 von Snackys wurde erledigt:

• Bugfixing Child Template: Config-Dateien werden nun im Child-Template gesucht, wenn nicht vorhanden aus dem Haupttemplate genutzt, die Haupt JavaScript Dateien werden immer aus dem Haupttemplate genutzt, wenn nicht anders im Child Template angegeben
• Verbesserung der Performance, durch:
  • JQuery Bibliothek wird nun während dem Seitenaufbau geladen, jedoch erst nach Fertigstellung ausgeführt, die Grundladezeit bleibt identisch, die nachladende Zeit wird minimiert
  • Durch die JQuery Änderung werden nun alle darauffolgenden JavaScripts unmittelbar danach geladen (parallel) - spart ebenfalls 1 Roundtrip
  • Ablauf des Nachladens optimiert
  • Verringern der Domtiefe um 3 Stufen
  • Notwendige Inline-JavaScript dramatisch reduziert
  • DNS Prefetch von Analytics
• Bugfixing mit PayPal Paymentwall und Käuferschutz
• Eigene Cachingdateien werden mit dem Leeren des Objectcaches "Template" nun ebenfalls entfernt
• Das Logo wird nicht mehr nachgeladen, sondern direkt präsentiert, die eine Bilddatei machte in allen Tests keine Schwierigkeiten und sieht schöner aus

Das Ergebnis: 0,1 bis 0,3 Sekunden Performance-Gewinn, aber beachtlich sind die Steigerungen in Pagespeed Insights (hervorgerufen durch besseres Parsing und JS-Verfahren):
Startseite mobil: 98/100 Punkte
Kategorieseite mobil: 100/100 Punkte
Detailseite mobil: 99/100 Punkte

Die Desktopwerte sind alle bei 100/100 geblieben, sorry.

Die Version ist über den gleichen Link verfügbar: https://shop.knoell-marketing.de/zips/snackys.zip
Das Child-Template mit seiner Mindestanforderung gibt es hier: https://www.knoell-marketing.de/snackys-child.zip

P.S.: @hula1499 Der erste Live- Shop ist hier zu sehen: https://www.fitness-and-fun.de - der schnelle Livegang war jedoch auf ein Problem mit der 4.05er und der Serverkonstellation zurückzuführen, sodass hier in den nächsten Tagen sicherlich auch noch einiges hinzukommt. Die anderen beiden bauen wir noch in der Testumgebung bis diese Live gehen werden.