Minify für modified eCommerce Shopsoftware - mehr Performance

(mit freundlicher Genehmigung von User kwiekids, Oliver H., www.kwiekids.de)

Ich habe mir nun mal die Zeit genommen und die Performance des Shops verbessert durch Optimierung der CSS und JS Dateien.

Weiterhin haben ich die JS Dateien ans Ende der Seite gestellt und die CSS Dateien an den Anfang, so dass sich die Seite, gerade bei langsamen Verbindungen, merklich schneller aufbaut.

Die Größe der ersten Seite war bislang 400 kb groß und hat nun eine größe von ca. 310 kb !

Auch die Anzahl der parallelen Requests für JS und CSS Dateien konnten merklich reduziert werden, von 18 auf 5 Datei-Request, damit erfolgt ein schnellerer Seitenaufbau, durch reduktion der gleichzeitigen Streams.

Die JS Dateien des Treadmill werden durch folgende Anweisung in der am Ende der includes/application_bottom.php nur noch auf der Startseite geladen, um auch hier ressourcen zu sparen:

// Javascript für treadmill nur auf der Startseite
if (strstr($PHP_SELF, FILENAME_DEFAULT)) {
    if (!isset ($_GET['manufacturers_id'])) {
        if (isset ($cPath) && xtc_not_null($cPath)) { } else {

require('templates/'.CURRENT_TEMPLATE.'/javascript/treadmill.js.php');

        }
    }
}

echo '</body></html>';

Nachfolgende JS und CSS Dateien sind in Blöcken - durch Einsatz von Minify zusammengefasst:

INDEX - Treadmill nur auf der Startseite:

   /javascript/jquery-1.4.2.pack.js
   /javascript/jquery.easing.1.3.js
   /javascript/jcarousellite_1.0.1.pack.js
   /javascript/products_treadmill.js

PRODUCT INFO v1 - für Thickbox und jqzoom:

   /javascript/jquery-1.4.2.pack.js
   /javascript/jqzoom.pack.1.0.1.js
   /javascript/thickbox.js

CSS Dateien - mit zusätzlichem Farbwechsel:

   templates/kwk/css/base.css
   templates/kwk/css/typography.css
   templates/kwk/css/boxes.css
   templates/kwk/css/layout.css
   templates/kwk/css/color_brown.css
   templates/kwk/css/print.css
   templates/kwk/speed4projectde/shopbewertung/stylesheetbox.css

Installation von Minify:

1. Download der aktuellen Version -> Minify
2. ZIP Datei entpacken
3. Verzeichnis "min" in den Shop-Root hoch laden
4. http://www.example.com/min aufrufen
5. Die Anweisungen (in gelb durchführen) - wenn hier der rewrite-Fehler kommt, einfach die /min/.htaccess wie folgt ändern:

<IfModule mod_rewrite.c>
RewriteBase /min/
RewriteEngine on
RewriteRule ^([a-z]=.*)  index.php?$1  [L,NE]
</IfModule>

6. Die einzelnen Pakete zusammen fassen, wie oben beschrieben, wichtig ist hierbei, nicht CSS und JS Dateien mischen, das funktioniert logischerweise nicht.

Anmerkung/Update: Kurzes Update:

Minify läuft auch in der aktuellen Version mit zlib Kompression:

Hier der Eintrag via php.ini :

zlib.output_compression = 1
zlib.output_compression_level = 5

Somit beträgt die Gesamtoptimierung auf die Größe bezogen -> 400 auf 285 KB = 115 KB

Yslow Rating "A" ist damit ebenfalls erreicht und selbst auf dem iPhone ist die Seite sehr schnell aufgebaut [;-)]

Wenn ihr das gemacht habt, dann mal mit [1] testen. Ansicht K wie Kids - exklusive Kindermode.