Gambio Shop beschleunigen

Gambio ist mit der Version GX nicht nur gut, sondern auch leider mit bis zu 1MB großen Startseiten sehr langsam geworden. Hier gibt’s eine Anleitung, wie man den Shop Gambio GX um durchschnittlich ca. 60% beschleunigen kann. Der Zeitaufwand und die Methoden sind je nach Shop unterschiedlich und lassen sich in drei Teilbereiche gliedern: Bilder und Code, Javascript und CSS.

[Update 22.09.10] Gambio veröffentlichte gerade das GX1 Servicepack 2.5. Einige der untigen Techniken sind laut Gambio integriert. Beschleunigt definitiv, aber wir noch viel mehr.  Special: Gambio Supportvertrag 1 Jahr + Gratis Check für ihren Gambio GX1 / GX2 Shop für 149 Euro incl. MwSt. Jetzt bestellen! Gamio Internetshop Webdesign Referenzen

Für eine einfache Optimierung sollten Sie mit ca. 6 Stunden Arbeit rechnen. Dies beinhaltet dann Code, Bilder und Javascript. Resultat: ca. -40% Ladezeit. Für eine Komplettoptimierung muss man auf das “Heil” des Layouteditors verzichten und das komplette dynamische CSS ausmisten und viel kleiner neu schreiben. Zeitaufwand: nochmals plus ca. 6h.

Warum Gambio Shop beschleunigen? Jeder andere Shop ist nur einen Klick weg. Wie lange warten sie, bis eine Seite geladen hat? Laut einer aktuelen Studie von Akamai klicken schon 40% aller potentieller Kunden ihres Shops weiter, wenn die Seite nicht binnen 4 (Vier!) Sekunden geladen ist. Auch wertet Google ab sofort die Ladezeit von Webseiten mit. Je schneller geladen wird, desto besser, siehe Google bewertet Ladezeiten Thread auf Abakus.

Die ff-webdesigner machen ihren Gambio Shop schnell! Mit nur 10 Arbeitsstunden beschleuningen wir ihren Gambio GX Shop im Schnitt um 55%. Eine Komplettoptimierung erhalten Sie ab 490 €. Wissen Sie, wieviel Mehrumsatz sie mit einer Optimierung erreichen können?  Erteilen sie uns jetzt einen Auftrag! Gamio Internetshop Webdesign Referenzen

Achtung! Alle hier aufgeführten Methoden erfodern solide Kenntnisse in den Bereichen HTML, PHP, CSS und Javascript. Die Mittel wurden durch die ff-webdesigner auf mehreren Gambio GX Shops erfolgreich angewandt. Trotzdem geben wir keinerlei Garantien auf den Erfolg der Methoden. Wir übernehmen keinerlei Haftung für nicht direkt durch uns ausgeführte Shop-Optimierungen. Sie handeln auf eigene Gefahr – oder geben uns einen Auftrag :-)

Bilder und Code der Site zu komprimieren und optimieren werde ich hier nicht weiter beschreiben. Kann jeder selber, und wenn nicht mag er sich vertrauensvoll via Anfrageformular an die ff-webdesigner wenden. Die Rekompression der Bilder und des Quellcodes bringt je nach Shop eine Beschleunigung von 10-25% und erfordert einen Zeitaufwand von 1-4 Stunden.

Javascript beschleunigen Wie schon im Artikel Gambio GX Template Anleitung beschrieben liefert der Gambio Shop in der aktuellen Version eine im Schnitt mit netten 160kB Javascript dekorierte Startseite aus. Egal für welche Funktionen das JS gut ist: das ist nicht Usability, das ist Wahnsinn und kostet jeden Shopbetreiber definitiv Umsatz. Warum eigentlich? Das Javascript wird ja nur einmal geladen und liegt dann im Browsercache, oder?

Falsch,  siehe Kommentar von Raimunf weiter unten. Mein Gegenargument: Wenn der Kunde auch mit DSL mehr als 10 Sekunden auf den erhebenden Moment des Anblicks Ihrer Gambio-Shop Startseite warten, wird das Javascript gar nicht in des Users Browsercache wandern. Der Besucher klickt ganz einfach auf einen schnelleren Shop.

Es gibt keine zweite Chance für einen ersten Eindruck. Also, was kann man tun mit dem Javascript? Zwei Punkte: ausmisten und komprimieren. Die Zentrale Datei, die dynamisch je nach Seiteninhalt die entsprechenden Javascripts des Gambio Shops lädt, liegt im Root und lautet auf den Namen gm_javascript.js.php. Dort kommentiert man aus was, man nicht unbedingt benötigt.

Ich rate zum auskommentieren folgender Javascripts: GMLiveSearch.js und GMAskOpensearch.js – Normale Suche reicht vollkommen. Browserschnellsuche, im Backend ebenfalls deaktivieren! hoverIntent.js – Keine Hover Bilder bei Produkten – Hover-Bilder werden geladen auch wenn man sie nicht sieht. Ich will nur Sachen laden, die ich mittels Klick anschaue. Allerdings funktioniert beim Deaktivieren auf den Produkt-Detailseiten der Link “Artikeldatenblatt drucken” auch nicht mehr.  Alternativ: Hover-Effekte im Backend unter Layout / Design – Flyover ausschalten. Bei den Bestsellern ist es mir am liebsten, wenn gar keine Bilder mehr geladen werden. Einfach in der Template-Datei box_best_sellers.html die
box_left komplett löschen.

GMLightBox.js – Lightbox ist alles was ausschaut wie ein Popup mit halbtransparentem schwarzem Hintergrund. Standard in Gambio: Warenkorb, Konto erstellen / ändern, Checkout, Bilder. Ich mag keine Popups, all diese Inhalte sollen im Hauptfenster geladen werden.  Ärgerlich: ohne Lightbox kann Gambio in der aktuellen Version keinen Bilder-Zoom mehr. Kennt jemand eine Möglichkeit, die Bilder ins Hauptfenster zu laden? Alternativ kann man die  Lightbox für alle Elemente im Admin unter Gambio – Lightbox Konfiguration für alle drei Punkte ausschalten!

gm_statusbar.js.php – Nein ich brauche keine OldSchool Statusbar-Scroller. Kann man auch einfach im Backend unter Gambio  – Statusleisten Lauftext ausschalten.

GMScroller.js.php – Flash Blitz blink! Ich will mir von keinem Newsscoller vorschreiben lassen wie schnell ich den gescrollten Text zu lesen habe – Ich will das auf einer statischen Seite selber entscheiden.

price_offer.js.php – Was? Ich kann einen Preis Anfragen? Ja ist denn der in Ihrem Shop nicht ohnehin der beste?

GMTellAFriend.js – Nein, ich will nicht von “Freunden” über günstige Angebote informiert werden. Ich hab schon genug Spam, und welcher Besucher Ihres Shops kein Webmail? So. Das war’s dann erst mal mit dem Ausmisten des JavaScript.

Javascript Kompression Der nächste Schritt ist die Rekompression der noch benötigten JavaScripts. Hierbei werden überflüssige Zeilenumbrüche und Kommentare aus dem JavaScript entfernt, was in der Regel eine Kompression von ca 50% bewirkt. Wichtig bei der Beschleunigung des Gambio Shops durch JS-Kompression ist, dass man leider nicht alle Gambio JS komprimieren kann, sonst läuft der Shop nicht mehr.

Auch rate ich massiv vom einschalten der GZip-Kompression im Backend ab! Die macht zwar die Javascripts schön klein, kann aber auch dazu führen dass der Shop bei Internet Explorer 6 Benutzern (2009 ca 40% Marktanteil) nicht mehr läuft.

Ich verwende zum Komprimieren der JavaScripts www.javascriptcompressor.com. Um später alle Änderungen schnell wieder rückgängig machen zu können legen wir zunächst vom ordner /gm/javascript eine Sicherheitskopie an. Wir gehen jetzt Schritt für Schritt alle noch verwendeten JavaScripts des Gambio GX Shops im Ordner /gm/javascript durch.

JQuery ist eine allgemeine JavaScript-Funktionsbibliothek die in vielen Bereichen des Gambio Shops eingesetzt wird. Leider sehr groß, aber liegt schon komprimiert im Shop vor. Datei jquery-COMPACT.js umbenennen in jquery.js, letztere vorher natürlich unter anderem Namen sichern.

Folgende Dateien komprimieren:  jquery/plugins/hoverIntent/hoverIntent.js,  jquery/plugins/hoverIntent.js, jquery/plugins/jquery.dimensions.js,  jquery/plugins/jquery.forms.js,  jquery/jquery.dimensions.js, jquery/ui.base.js und  jquery/ui.tabs.js.

Weiter alle folgenden JS-Dateien (nicht .php!) im Ordner /gm/javascript/ komprimieren:  functions.js, gm_form_styles.js, gm_product_details.js, gm_shop_scripts.js, gm_shopping_cart.js, GMAskOpensearch.js, GMAttributeImages.js, GMBestseller.js, GMCounter.js, GMImagesPopup.js.

Achtung! Die anderen Dateien nicht komprimieren, sie funktionieren nur im Original! Insbesondere GMAttributesCalculator.js, GMCallbackService.js, GMLightBox.js, GMLiveSearch.js, GMMegaFlyOver.js, GMOrderQuantityChecker.js, und GMProductImages.js, GMTellAFriend.js (letzteres nur weil ein ; fehlt…IE7 gibt dann Warnmeldung aus).

Gambio beschleunigen: ausmisten der dynamischen MouseOver-Styles In der Datei gm/javascript/gm_start.js.php. werden zahlreiche hover-styles dynamisch in die Seite geladen, die häufig das auf ein statisches CSS umgeschriebene Layout stören. Wenn Sie Probleme mit anscheinend nicht ausschaltbaren hover-Effekten auf Produktboxen oder Links haben, editieren sie diese Datei. Löschen sie alles ab

?php if($_SESSION[‘style_edit_mode’] != ‘edit’) {

bis direkt vor

?php if(gm_get_conf(‘GM_STATUSBAR_ACTIVE’) == ‘true’) echo ‘gm_statusbar();’;

Gambio beschleunigen durch Javascript-Cache Wie Raimund unten bereits anmerkte, werden die ganzen Javascript nicht in den Zwischenspeicher des Browser geladen, sondern dank der “wunderbaren” dynamischen Integration mittels PHP bei jedem Seitenaufruf neu. Das ist Schwachsinn. Wir stellen jetzt die Dateien so um, dass seitenweit wichtige Javascripts im Browser-Cache landen. Anstatt diese Javascripts dynamisch über die Datei gm_javascript.js.php zu laden, laden wir sie ab sofort bandbreitenschonend über die Datei /includes/header.php. Öffnen sie beide Dateien. Suchen sie in header.php die Zeile

echo '<script type="text/javascript" src="gm_javascript.js.php?XTCsid='.xtc_session_id().'&amp;&amp;age='.$gm_js_page.$gm_statusbar_get_params.'">// <![CDATA[
mce:0
// ]]></script>;'

Wir tauschen diese Codezeile aus gegen

echo '<script type="text/javascript" src="/gm/javascript/jquery/jquery.js">// <![CDATA[
mce:1
// ]]></script>';
 echo '<script type="text/javascript" src="gm_javascript.js.php?XTCsid='.xtc_session_id().'&amp;page='.$gm_js_page.$gm_statusbar_get_params.'">// <![CDATA[
mce:2
// ]]></script>';
 echo'<script type="text/javascript" src="/gm/javascript/functions.js">// <![CDATA[
mce:3
// ]]></script>';

Passen sie die absoluten Pfadangaben entsprechend dem Installationsverzeichnis ihres Gambio GX Shops an. Anschließend müssen die nun statisch includierten Javascripts noch alle in der Datei gm_javascript.js.php auskommentiert werden. Achtung! Der letzte Teil (Cache) ist noch experimentell! Lassen Sie die ff-webdesigner ihren Gambio GX Shop beschleunigen! Erteilen sie uns einen Auftrag! Gamio Internetshop Webdesign Referenzen