Sa
12:11
Tag
1926
22516 views

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



Bewerte diesen Beitrag auf blog.ff-webdesigner.de!

Gambio Shop beschleunigen: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkten, basieren auf 1 abgegebenen Stimmen.
Loading...Loading...

11 Kommentare zu “ Gambio Shop beschleunigen ”

„Das Javascript wird ja nur einmal geladen und liegt dann im Browsercache, oder? Korrekt.“

Sorry Chef, leider nicht korrekt. Das Javascript wird nämlich auf dem Server dynamisch per PHP Script zusammengestellt, je nach Seitentyp der geladen wird. Also auch ohne sich die HTTP Header anzusehen kann man schon raten daß der Code mit jeden Seitenaufruf neu gezogen wird.

Und eine kurze Analyse in Firebug bestätigt genau das. Nicht nur mit der Startseite sondern mit jedem Seitenaufruf werden ca. 160KB Javascript neu geladen. Gut, je nachdem wie intelligent die Javascript Engine im Browser ist wird er vielleicht erkennen daß er diesen Code schon hat und nicht neu parsen etc. Aber runtergeladen wird er jedesmal.

Zu Gambio GX liesse sich generell noch einiges sagen. Lässt sich aber locker in einem Wort zusammenfassen: Katastrophe. Jedenfalls im hinsicht Performance.

Kommentar von Raimund am 16.9.2009

Hallo Raimund,
der Schreiber dieses Artikels hat leider in jedem Punkt recht.

In einigen Punkten ist der Gambio wirklich cleaner und sauberer als der XTC, aber der SE ist nur ein Gimmick um Anfänger zu beeindrucken mit all den fetten Nachteilen.

Pack mal einen XTC auf eine Billigdomain für 20 Eus im Kahr und der rennt, pack den gleichen Content auf nen Gamb mit nem dedizierten managed Server – und der pennt.

Hab das schon ausführlich an Gambio herangetragen und händeringend um eine Version ohne StyleEdit, im classischen Stil und dafür flott gebeten, aber in das Kind SE ist man dort noch sehr verliebt. Ein bißchen hat man mir geholfen, etliche Stunden um den Shop zu modden hab ich selbst investiert. Der Rest ist mir zu hoch, werde ich evtl. bei Gelegenheit mal extern machen lassen.
Schade das Gambio nicht dual fährt – eine Version für die Kinderchens die bißchen an den Farben spielen wollen (die Leistung des SE deckt eh nicht alle Bedürfnisse) und eine für Profis die dann aber rennt.

Mal sehen was die Zukunft bringt, derzeit muß man in jeden Shop viele Stunden reinstecken bevor er in etwa so ist wie man sich das vorstellt.

Kommentar von Enrico am 22.11.2009

Servus Enrico, jo, re-bestätigung :-) allerdings kann man den Shop mit relativ wenig Aufwand (ich finde da 10 Stunden noch akzeptabel) um ca 50% beschleunigen. Was ich kritisiere sind einige wirklich dicke Hauer von Gambio:

1. Warum ist der Standard für Bilderuploads 100%? 40% reichen vollkommen aus und beschleunigen den Shop drastisch.

2. Javascript: Da liefert Gambio eine schöne komprimierte Version von JQuery mit 55kb aus. Und was bauen sie ein? Die unkomprimierte Version mit 99kb. Generell wird jedes JS über das dynamische php file geladen, was laut Raimund oben dazu führt (hab’s noch nicht verifiziert), dass auf jeder Seite alles JS neu geladen wird. Gambio! Alle Scripte komprimieren! Und die die auf allen Seiten benötigt werden: nicht dynamische laden, sondern statisch, so dass sie im Browser Cache landen.

3. Der StyleEditor ist nichts als ein nettes Gimmick für Laien. Jeder ernsthafte Shopbetreiber investiert gerne die 500-1000 Euro in ein wirklich individuelles Shopdesign mit sauberem CSS, bei dem nicht jede einzelne Box einen Extrastil auf 100 Ebenen zugewiesen bekommt. Das ist absoluter CSS-Schwachsinn, was der StyleEditor produziert. Nebenbei bemerkt: auch diese unmögliche Divitis im HTML-Code, bei der jedem Element zum größtenteil überflüssig Klassen und IDs zugewiesen werden. Wenn ich die dynamischen Styles des Layout Editors statisch umschreibe, dann resultiert das bei exakt dem gleichen Layout (Standard-ähnlich vorausgesetzt) in einer CSS-Datein von ca. 20kB anstatt 170kB bei Gambio. Dazu kommen dann auch noch massig Datenbank-Abfragen wegen CSS…lieg ich da richtig? Wer hat diese Abfragen schon mal komplett ausgeschaltet und wo? DB-Performance verbessert? Schreibt mit, lasst uns Gambio besser machen!

Kommentar von ff-webdesigner am 22.11.2009

Die ff-webdesigner haben unseren Gambio – Shop SEO-optimiert, die Seitenladezeit um unglaubliche 62% reduziert (auf 278kb) und den Shop ein neues Layout verpasst . Dadurch hat der Shop an Beliebtheit gewonnen. Auf diesem wege nocheinmal vielen Dank für die schnelle und reibungslose Zusammenarbeit!

Kommentar von Rainer Pichowsky, Schulranzenhandel.de am 1.2.2010

[…] Gambio GX Template erstellt. Der zweite Teil beschäftigt  sich mit der dringend benötigten Optimierung der Ladezeiten. Ein Vergleich alte / neue Version zeigt 156 / 705 kB – absolut inakzeptabel. Diese Anleitung […]

Ich bin hier gestrandet, weil die Ladezeiten meines Shops auch nicht optimal sind. Mal schauen, wie ich dem mit diesen Tipps hier das Laufen beibringen kann.
Vielen Dank!

Kommentar von Marko am 5.5.2010

Ich habe gerade bei Firebug im PageSpees Test gesehen, dass im Bereich Javascript eine Minifying Version angeboten wird, die um 49%reduziert wird. Kann so etwas überhaupt funktionieren? Der wird ja wahrscheinlich alles komprimieren und der Shop ist danach nicht mehr lauffähig, wie ich ja oben lesen kann…, oder doch?

Kommentar von Marko am 5.5.2010

Funktioniert ganz hervorragend, siehe z.b. http://www.fahrradstar.de. Allerdings nur wenn das js nicht fehlerhaft ist (fehlende ; z.b.) – das ist leider bei einigen Scripts aus Gambio nicht der Fall. Daher unbedingt ganz genau beachten, welche Scripts man NICHT komprimieren darf!

Kommentar von ff-webdesigner am 5.5.2010

Habe diese ausführliche Seite gefunden und habe das gleich Problem mit einer Vorgängerversion. Ich möcht jetzt gambio_gx2_v2.0.12.2 auf einen Freehost installiern und eine Neue Webseite aufbauen.
derhingucker.kilu.de/ habe ich installiert dauer aber ewig bis die Seite geladen ist.
HAT JEMAND DA DRAUSEN ERFAHRUNG IST DER NEUESTE WEBSHOP VON GAMBIO SCHNELLER???

mfg Mani :)

Kommentar von Mani am 23.5.2013

frag lieber direkt den webdesigner :-) freehoster haben meist nicht den nötigen dampf, shopsysteme haben mit abstand die höchsten anforderungen an server und db. bei allinkl gibts auf shared hosting schon guten dampf für um die 5 euro im monat. generell ist gx2 deutlich schneller, gambio hat ja einige von uns erarbeitete verbesserungen (javascript und css komprimieren z.b.) in gx2 einfliessen lassen. allerdings sind die scripte auch nochmal deutlich in der größe gewachsen.

Kommentar von ff-webdesigner am 23.5.2013

Hi, vielen Dank für diese Anleitung. Ich habe erst unsere lokale Testversion optimiert und werde diese in den kommenden Tagen hochladen. Viele Grüße, Michael

Kommentar von Michael am 30.8.2013

Du hast was zu sagen? Dann schreib!

beschleunigen
shop