Ladezeit von Gambio GX2 optimieren

Die Ladezeit einer Internetseite und Onlineshops steigert nicht nur die Nutzerfreundlichkeit, sondern sie ist auch ein Kriterium für das Googleranking.

  • Tools zur Geschwindigkeitserfassung
  • Ladezeit durch Caching optimieren
  • Komprimierung aktivieren
  • Dateianfragen reduzieren
  • Webhosts vergleichen
  • CSS reduzieren
  • Bilder optimieren
  • nachträgliches Laden von Produktbildern
  • Datenbank

Hinweis: Die Änderungen an .htaccess und anderen Dateien kann dazu führen, dass der Shop nicht mehr normal funktioniert. Wenn Sie nicht wissen, was Sie tun, verzichten Sie auf die Optimierung oder melden sich bei mir. Für Schäden oder Ausfälle übernehme ich keine Haftung.

Tools zur Geschwindigkeitserfassung

Es gibt eine Reihe von Tools, mit denen man die Ladezeit und auch die Probleme erfassen kann. Für mich am besten geeignet ist für Google Chrome die Entwicklerkonsole (F12) zusammen mit dem Google PageSpeed Plugin (wird leider nicht mehr gewartet, dafür gibt es aber ein online Tool – zu PageSpeed Insights)

Analyse der Ladezeit auf PageSpeed

Eine Alternative wäre etwa noch YSlow (Download)

 

 

 

Ladezeit durch Caching optimieren

Bei Gambio gibt es die Cache Funktion im Adminbereich. Diese Funktion kennen wir alle, sie funktioniert soweit auch ganz gut, aber es geht noch besser.

Statische Dateien wie Bilder, CSS-Dateien oder JavaScript Dateien kann man beim Seitenbesucher im Cache ablegen. Vorteil ist, dass alle Hintergrundbilder usw nicht bei jedem Seitenaufruf neu geladen werden müssen.
Um die Funktion zu aktivieren, müssen Sie folgendes am Ende der .htaccess Datei einfügen.

Komprimierung aktivieren

Ebenfalls über die .htaccess Datei lassen sich css und js Dateien komprimieren.

Dateianfragen reduzieren

Natürlich ist die Anzahl, der zu ladenden Dateien, ein ganz wichtiges Thema für Ladezeit.
Schlüsseln wir mal kurz auf, was bei Gambio so geladen wird.

  1. Produktbilder und Bilder aus dem Inhalt sowie Slider
  2. Hintergrundgrafiken und Icons

1. Produktbilder

Ich denke, die längste Ladezeit hat eine Kategorie mit vielen Artikeln, zumindest wenn diese direkt dargestellt werden. Beispielsweise werden beim Aufruf einer Kategorie mit 250 Artikeln die angezeigt werden, auch 250 Bilder geladen, was sich natürlich erheblich auf die Performance auswirkt. An diesem Punkt kann man einerseits sagen, dass man die Anzahl der darzustellenden Artikel reduziert oder man greift auf eine JQuery Lösung zurück und lässt die Bilder erst beim Scrollen nachladen.

2. Hintergrundgrafiken und Icons reduzieren

Die Grafiken im Hintergrund, sowie die Icons lassen sich am besten reduzieren, indem man sie in eine große Grafik packt und dann die Hintergründe entsprechend mit CSS formatiert. Diese Methode nennt man CSS Sprites.
Anstelle von 30 Hintergründen und Icons, wird so im besten Falle nur noch eine Datei heruntergeladen.

Webhosts vergleichen

Webhoster gibt es einige. Hier sollte man besonders gründlichen überlegen, zu welchem Anbieter man geht. Einige Anbieter stellen zwar leistungsstarke Server zur Verfügung, sind aber hemmungslos überfüllt mit 1000 Kunden pro Server und die Performance bleibt auf der Strecke.

Nach meinen persönlichen Erfahrungen würde ich folgende Hoster empfehlen bzw davon abraten

Bevorzugen Abraten
All-inkl.com Strato
Hosteurope.de 1&1
Hetzner.de

CSS reduzieren

In einem älteren Blogbeitrag von mir, habe ich mal beschrieben, wie man die CSS von Gambio statisch einbindet. (statische CSS Datei in Gambio)

Das macht natürlich nur Sinn, wenn man auf den StyleEditor verzichten kann.
Wenn man eine statische CSS Datei nutzt, kann man natürlich alle überflüssigen Leerzeichen und Zeilenumbrüche rausnehmen. Somit wird die CSS Datei kleiner und die Ladezeit optimiert. Hierfür gibt es auch Tools im Netzt die sich anbieten. (Beispielsweise unter http://cssminifier.com/)

 Bilder optimieren

Ein wesentlicher Teil des Traffics machen die Bilder aus, dass hatten wir schon mal weiter oben. Bilder lassen sich gut optimieren, denn im Web sollten die Bilder einfach nur wenig Speicher verbrauchen, damit sie schnell geladen werden können. Die Dateigröße setzt sich aus folgenden Komponenten zusammen: Metadaten, Format, Komprimierung und Komplexität des Bildes.

Wer die Grafiken in bspw. Photoshop als Webgrafik speichert und nutzt, wird sich bei der PageSpeed Analyse etwas den Kopf kratzen, denn Pagespeed sagt einem, dass man die Grafik verlustfrei um 10 – 40% verkleinern kann.

Das schöne an Googles Pagespeed ist, dass man unter der Analyse alle komprimierten Daten herunterladen kann, auch die Bilder. Diese muss man dann nur noch in den richtigen Serverpfad laden und alle Bilder sind bestens optimiert und die Ladezeit verbessert sich wieder. Bei Produktbildern kann das aber leider auch etwas aufwändiger werden.

Nachträgliches Laden von Produktbildern

Wenn man viele Artikel in einer Kategorie darstellen möchte, werden erstmal alle Produktbilder geladen. Das ist für die Ladezeit der Seite natürlich problematisch, denn es kommen schnell ein paar MB zusammen. Um das zu verhinden, kann man sich mit einem Jquery Plugin namens LazyLoad abhilfe schaffen.

Ein Beispiel findet man auf www.meincupcake.de

Dieses Plugin kann auf Anfrage eingebaut werden. (kontakt@web-seiten-design.de)

Datenbank

Als allerletzten kleinen Hinweis gebe ich noch einen kleinen Tipp, der nicht bei allen, aber bei manchen Hostern funktioniert.

Nutzen Sie als Datenbankserver nicht localhost, sondern die IP Adresse 127.0.0.1
Auf diese Weise muss localhost nicht erst aufgelöst werden und man bekommt schneller eine Antwort vom Datenbankserver.

Ich hoffe ich konnte hier dem Einen oder Anderen eine Anregung und ein paar Tipps geben, wie sie die Ladezeit von Gambio optimieren können.

Wer eine komplette Optimierung der Ladezeit haben möchte, kann sich gerne melden. kontakt@web-seiten-design.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.