Neuauflage: 4theFood-Onlineshop

Für den Shop 4theFood Deutschland stand ein großer Sprung an: Von OXID eShop 4.4.x sollte der Sprung auf die Version 4.6.4 getan werden. Aufgrund der großen Änderungen im zugrunde liegenden Oxid-System entschloss ich mich, weite Teile des Auftritts neu zu bauen. Dazu gehörte das Portieren und teilweise Neuschreiben der Module sowie eine nahezu vollständige Neuschreibung der Templates und Stylesheets.

Bei der großen Umstellung standen im Vordergrund:

  • Sparsames HTML
  • Ein eigenes CSS-Framework, das viele Eigenschaften vererbt
  • Komplette Herauslösung aller Modifikationen aus dem Systemdateien — strikte Trennung von System und Modifikationen
  • Nutzung des aktuellen (derzeit CE 4.6.4) Oxid-eShops
  • Weglassung von Kompatibilitätslösungen für veraltete Browser
  • Lazy Loading für einige Bestandteile, in denen sich kein echter Content befindet

Und so wurde das Ganze letztendlich umgesetzt:

Schlankes HTML

Da die alten Templates nicht mehr verwendbar waren, war es naheliegend, das HTML komplett neu zu schreiben. Aus Ausgangsmaterial diente mir das mitgelieferte Basic-Template. Genau genommen war es nur dazu da, die auf den jeweiligen View-Templates und Snippets verwendeten Methoden nicht zu verlieren. Nur an komplexeren Stellen wie etwa dem Warenkorb oder den Seiten des Bestellprozesses wurden große Teile des ursprünglichen HTML-Codes beibehalten, um nichts zu verlieren.

Die Resultate können sich sehen lassen. Das HTML-Gerüst, das an den Browser geschickt wird, wurde in allen Fällen deutlich kleiner als in den Templates der vorangegangenen Version:

4.4.x

4.6.x

Startseite 45 kb 33 kb
Kategorieliste 47,4 kb 34,4 kb
Detailseite 75 kb 28,4 kb

Stylesheets und Sprites

Wird das HTML-Gerüst neu geschrieben, bietet es sich an oder ist es quasi notwendig, das CSS ebenfalls neu zu erdenken. Für 4theFood entstand ein eigenes CSS-Framework, das sich dadurch auszeichnet, dass viele häufig verwendete Klassen nahezu überall verwendet werden können. Besonders oft aufgerufene Klassen sind l, r und btn. Alle enthalten eigentlich nur wenige Formatierungsinformationen, sind jedoch in Kombination mit anderen Klassen recht mächtig. Die Klasse btn beispielsweise kommt bei allen Schaltflächen und Hyperlinks im Button-Look zum Einsatz. Sie ist dafür da, die Schriftgröße und -art festzulegen, den Radius der Außenform und die Höhe. btn kann mit small kombiniert werden, um kleinere Schaltflächen zu erzeugen. btn wird immer mit einer Farbangabe kombiniert: häufig verwendete Klassen sind green, yellow und gray. Diese Klassen geben nur an, welche Farbe die Schaltfläche haben soll. Hier kommen sogar Farbverläufe zum Einsatz, die unter Rücksichtnahme auf ältere Browser jeweils mehrere Zeilen in der CSS-Datei einnehmen. Hintergrundrafiken werden jedoch nicht benötigt. So ersparen wir uns das Nachladen von Bildern als Style-Element (und Wartezeit).

<a class=“btn green“>Weiter</a>

Sprites werden verwendet, um die vielen kleineren Bildsymbole, Icons und Logos in wenigen Grafiken zu vereinen und mit nur einem Request in den Cache des Browsers zu holen.

Nach der Umsetzung dieser drei Richtlinien:

  1. Verschlankung des HTML-Quellcodes
  2. Schlankes CSS
  3. Sprites nutzen, um weniger Elemente zu laden

wird der Shop deutlich schneller geladen, wie die Überwachung mit dem Entwicklertool des Webbrowsers (hier Chrome) belegt. Hierzu wieder eine Tabelle zur Gegenüberstellung:

4.4.x

4.6.x

Startseite 1,37 s 0,92 s
Kategorieliste 3,31 s 0,9 s
Detailseite 3,44 s 0,4 s

Gezählt wurde jeweils bei den gleichen Kategorie- und Detailseiten.

Detailseite

Auch das Navigationselement rechts oben sowie die Mitteilungsbuttons für soziale Netzwerke werden verzögert per JavaScript geladen.

Schneller Seitenaufbau – weitere Elemente nachladen

0,4 Sekunden für die Detailseite? Glauben Sie nicht? Dieses Resultat kommt durch einen Trick zustande, der durchaus legitim ist. Die angegebene Zeit ist die, die es gedauert hat, die Detailseite mit dem Inhalt zum aktiven Artikel darzustellen, die es also dauert, Artikelbezeichnung, Bild, Preis und so weiter anzuzeigen. Eben alles, was auf der obersten Bildschirmseite zu sehen sein soll. Was dabei fehlt und mit Verzögerung nachgeladen wurde, sind verknüpfte Artikel wie das Zubehör sowie die Schlagworte. Diese Elemente sind nicht auf der ersten Bildschirmseite zu sehen und kommen dank jQuery erst zum Vorschein, wenn der Besucher scrollt. Er merkt also nicht, dass die Seite noch gar nicht vollständig ist. Bis diese übrigen Elemente nachgeladen wurden, vergehen 1,4 Sekunden —  die Seite sieht aber bereits nach 0,4 Sekunden “fertig” aus.

Noch mehr zum Thema Shop-Performance – auch mit Blick auf die Performance des Webservers – habe ich im Blog bei imva.biz beschrieben. Hier gehe ich auch noch einmal auf das Thema Tempates und Stylesheets ein.

Dieser Beitrag wurde in OXID eShop, Referenzen veröffentlicht und getaggt , , , . Ein Lesezeichen auf das Permalink. setzen. Kommentieren oder einen Trackback hinterlassen: Trackback-URL.

Einen Kommentar hinterlassen

Sie müssen angemeldet sein, um zu kommentieren.