Snackys erzielt in PageSpeed-Tests hervorragende Werte. Damit das auch bei dir so bleibt, findest du hier die passenden Einstellungen sowie zusätzliche Tipps zur Performance-Optimierung.
Snackys setzt dabei nicht auf „Tricks", bei denen Menüs oder wichtige Inhalte erst nachgeladen werden, sobald ein Besucher nach unten scrollt. Für deine Besucher ist alles Relevante sofort sichtbar, ohne Wartezeit. Nachgeladen werden lediglich Bilder außerhalb des sichtbaren Bereichs.
Kein Layout Shift
Snackys arbeitet so intelligent, dass bereits Platz für die Bilder reserviert wird. So entsteht beim Laden kein „Springen" der Seite (Layout Shift), was sonst schnell zu Verwirrung und Frust führen kann.
Optimierungen
In diesem Bereich optimiert Snackys automatisch Inhalte aus Artikeltexten, Kategorietexten, Seiteninhalten und Blogbeiträgen. Dabei werden z. B. Bilder und iFrames erst dann geladen, wenn sie im sichtbaren Bereich erscheinen – ohne dass du dies bei der Content-Erstellung bereits berücksichtigen musst.
Lazyloading
Lazyloading sorgt dafür, dass Bilder erst geladen werden, wenn sie wirklich sichtbar sind. Das ist besonders wichtig, da Bilder oft einen großen Teil der Ladezeit verursachen.
Intelligent einsetzen
Lazyloading sollte intelligent eingesetzt werden. Alles, was beim Seitenaufruf sofort sichtbar ist, sollte direkt geladen werden. Wird der sichtbare Bereich erst nachgeladen, kann das auch negative Auswirkungen auf die Wahrnehmung und Bewertung der Seite haben.
1. Sliderbild LazyLoad deaktivieren
Wenn dein Slider aus dem Shop-Backend direkt im sichtbaren Bereich liegt, solltest du diese Option aktiviert lassen. Dann wird das erste Sliderbild sofort geladen, alle weiteren Bilder werden nachgeladen, sobald der jeweilige Slide aktiv ist.
Produktbild Lazyloading deaktivieren
Standardmäßig ist das Produktbild auf der Artikelseite sowohl auf Desktop als auch mobil sofort sichtbar. Deshalb empfehlen wir, diese Option aktiviert zu lassen.
Wenn du dein Template jedoch so umgebaut hast, dass das Bild nicht direkt im sichtbaren Bereich liegt, kannst du diese Option deaktivieren.
Anzahl LazyLoad in Produktliste deaktivieren
Auch bei Produktlisten gilt: Direkt sichtbare Bilder sollten nicht nachgeladen werden. Trage hier die Anzahl an Artikeln ein, die beim Aufruf einer Kategorie auf Mobilgeräten direkt sichtbar sind. Im Standard-Snackys sind das 2 Artikel.
Je nachdem, wie lang deine Kategoriebeschreibung ist oder wie viele Artikel pro Reihe du im Bereich Produktlisten eingestellt hast, kann dieser Wert abweichen und sollte entsprechend angepasst werden.
Kompatibilitätsmodus
Snackys lädt nur das, was wirklich benötigt wird – und nicht mehr. Ein Beispiel: JTL-Shop basiert auf dem Bootstrap-Framework. Snackys lädt jedoch nicht das komplette Framework, sondern nur die Bestandteile, die der Shop tatsächlich braucht.
Gleiches gilt für Icons: Statt hunderte Icons zu laden, werden nur die Icons eingebunden, die im Shop verwendet werden.
Bei Plugin-Problemen
In seltenen Fällen kann es vorkommen, dass externe Plugins ihre eigenen Styles nicht vollständig mitbringen und stattdessen stark auf das komplette Framework setzen. Wenn du Darstellungsprobleme mit einem Plugin feststellst, kannst du im Kompatibilitätsmodus bei Bedarf das vollständige Bootstrap-Framework oder zusätzlich Font Awesome (Icon-Bibliothek) nachladen.
Performance-Tipps
Slider
Verwende möglichst den Slider aus dem Shop-Backend statt den Slider aus dem OnPage Composer. Der Backend-Slider ist von Snackys optimiert und lädt nur das, was er benötigt. Der OnPage Composer bringt dagegen viele zusätzliche Effekte mit, die meist nicht gebraucht werden.
Ein Slider sollte vor allem eines können: Bilder sauber darstellen – das sorgt für ein ruhiges und performantes Shop-Erlebnis.
Webfonts
Wenn du Webfonts verwenden möchtest, nutze am besten nur eine Schrift und nur einen Schriftschnitt. Externe Schriften gehören zu den größten Performance-Bremsen – und jeder zusätzliche Schriftschnitt erhöht die Ladezeit.
Moderne Browser können aus dem normalen Schnitt häufig automatisch fette oder kursive Varianten rendern.
Bilder
Lade Bilder nur in der Größe hoch, die dein Shop wirklich benötigt. Wenn deine Seite maximal 1600px breit ist, brauchst du kein 2000px großes Bild.
Hinweis: Bilder aus der WaWi musst du nicht manuell optimieren – dein Shop generiert und optimiert diese automatisch.
Nutze wo möglich WebP, da dieses Format besonders klein ist und sehr gute Qualität bietet.
Wenn du kein WebP nutzt, achte auf das passende Dateiformat: PNG eignet sich gut für technische Zeichnungen, ist aber meist deutlich größer als JPG. JPG eignet sich ideal für vollflächige Fotos.
Cache
Aktiviere alle sinnvollen Caches, z. B. den Objekt-Cache – besonders empfehlenswert ist Redis.
Zusätzlich solltest du im Shop-Backend unter Darstellung > Einstellungen > Templates bei den Einstellungen deines Snackys-Templates (bzw. Child-Templates) die Komprimierung für HTML, JS und CSS aktivieren.
Außerdem sollte im Snackys-Plugin im Bereich Entwickler der Entwicklermodus deaktiviert sein.
Externe Skripte
Lade nur Skripte, die du wirklich brauchst. Wenn du externe Skripte einbindest, verwende möglichst die defer-Methode, um das Rendering nicht zu blockieren.
Bündle Ressourcen
Wo möglich, solltest du Dateien bündeln. Wenn du mehrere Skripte benötigst, lade nicht 20 einzelne Dateien, sondern fasse diese in einer Datei zusammen. Jede einzelne Anfrage kann die Ladezeit erhöhen.
Beispiel: Stell dir vor, du hast einen Einkaufszettel mit Wasser, Brot und Obst. Wenn du alles einzeln holst, fährst du mehrfach los. Wenn du bündelst, gehst du einmal los und hast alles in einem Durchgang erledigt – genau so funktioniert es auch bei Ressourcen im Shop.
Server-Performance
Neben einem performanten Template sollte auch dein Server die nötige Leistung liefern. Snackys läuft innerhalb der normalen Systemvoraussetzungen von JTL-Shop. Bei steigenden Besucherzahlen oder einem größeren Sortiment kann es jedoch notwendig werden, den Server zu upgraden.
Tipp: Im Chrome-Browser erkennst du gut, ob der Browser noch auf den Server wartet oder ob bereits geladen wird: Solange der Browser wartet, dreht sich das Lade-Icon nach links – sobald die Seite beginnt zu laden, dreht es nach rechts.
Supercache-Plugin
Verbessere die Server-Performance mit unserem Supercache-Plugin:
Supercache ansehen