ANLEITUNG: Minify für modified eCommerce Shopsoftware - mehr Performance für den Shop

[kwiekids]

Hallo,

habe mir nun mal die Zeit genommen und die Performance vom Shop 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:

Code: PHP  [Auswählen]

<?php
// 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:

• Download der aktuellen Version -> Minify
• ZIP Datei entpacken
• Verzeichnis "min" in den Shop-Root hoch laden
• www.DEINEURL.de/min aufrufen
• die Anweisungen (in gelb durchführen) - wenn hier der rewrite-Fehler kommt, einfach die /min/.htaccess wie folgt ändern:
  
  Code: PHP  [Auswählen]
  <IfModule mod_rewrite.c>
  RewriteBase /min/
  RewriteEngine on
  RewriteRule ^([a-z]=.*)  index.php?$1  [L,NE]
  </IfModule>
• Die inzelnen Pakete zusammen fassen, wie oben beschrieben, wichtig ist hierbei, nicht CSS und JS Dateien mischen, das funktioniert logischerweise nicht.

Kurzes Update:

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

Hier der Eintrag via "php.ini":

Code: PHP  [Auswählen]

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.

cheers 
kwiekids
-oli-

Wenn ihr das gemacht habt, dann mal mit YSlow testen, ihr werdet staunen.

Ihr könnt euch die Ladezeiten und die Größe der Webseite hier gerne mal ansehen -> K wie Kids 

Ich bin von dem Tool begeistert.

cheers 
kwiekids
-oli-

Linkback: https://www.modified-shop.org/forum/index.php?topic=5975.0

[koshiro]

Hallo Oli,
nicht schlecht danke   für die Erweiterung, werde ich heute Abend gleich mal bei mir machen.
Ich habe bei Dir unter YSlow gesehen das Du sogar die "Avoid CSS expressoins" auf "Grade A" hast, darf ich fragen wie Du das gemacht hast, welche Änderungen sind dazu notwendig.
Gruß
Micha

[Tomcraft]

Schicke Sache,

ich habe das mal noch ein wenig formatiert und in die "Modulecke" verschoben.

Danke für die tolle Anleitung.

Grüße

Torsten

[kwiekids]

Hy Micha,

das habe ich durch die Validierungen schon lange
Nach und nach den Code gesäubert, jeden Fehler raus, etc ....

Also dies ist nicht durch Minify entstanden, könnte aber

Check it ....

cheers
kwiekids
-oli-

[kwiekids]

Danke Dir Torsten,

jetzt sieht es richtig schick aus  

cheers
kwiekids
-oli-

[koshiro]

Hallo Oli,
Danke Dir.
die CSS expressions kommen ja aus der Thickbox.css und sind ja wohl nur für den IE von daher dachte ich das Du Sie entfernt hast.
Gruß
Micha

[kwiekids]

Ach so !

Nein, die habe ich anstatt in die general.js.php nur in die product_info_v1 gesetzt, da ich sie nur dort brauche

Somit kommt der Fehler auch nicht auf der Startseite

[DokuMan]

[...]
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.
[...]

Das haben wir für die kommende Version 1.04 der modified eCommerce Shopsoftware schon umgesetzt
Aber minify kannte ich noch nicht, coole Idee.

[kwiekids]

Ja, darüber hatten wir es ja schon

Aber mir war die "Weiche" am Ende wichtig, so dass die jquerys nur auf der Startseite und der product_info_v1 geladen werden.

[ds170477]

Hallo zusammen,

wenn ich in die config.php "$min_cachePath" setze, kriege ich folgende Fehlermeldung:

Parse error: syntax error, unexpected T_VARIABLE in /var/customers/webs/dasch/deeco/min/config.php  on line 15

Wat hab ich da nun falsch gemacht?

In Zeile 15 steht:

Code: PHP  [Auswählen]

<?php
/**
 * Configuration for default Minify application
 * @package Minify
 */
$min_cachePath

/**
 * In 'debug' mode, Minify can combine files with no minification and
 * add comments to indicate line #s of the original files.
 *
 * To allow debugging, set this option to true and add "&debug=1" to
 * a URI. E.g. /min/?f=script1.js,script2.js&debug=1
 */
$min_allowDebugFlag = false;

Gruss
Daniel

[kwiekids]

Setze den $min_cachePath mal wie folgt:

Code: PHP  [Auswählen]

$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());
 

cheers  
kwiekids
-oli-

[kwiekids]

Kurzes Update:

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

Hier der Eintrag via "php.ini":

Code: PHP  [Auswählen]

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.

cheers 
kwiekids
-oli-

[Tomcraft]

Ich habe das mal in Beitrag 1 noch ergänzt.

Grüße

Torsten

[ds170477]

@oli: Supi dat war's...Bin gespannt auf die performance

Gruss

Daniel

[kwiekids]

Super Torsten - danke !  

Dann bin ich mal auf Dein Feedback gespannt Daniel - gurte Dich vorher besser mal an  

cheers  
kwiekids
-oli-