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

[peterpan19]

Hallo noRiddle, doch, habe ich.
Aber da eigentlich nicht mehr so viele Schritte zur Vervollständigung des Minify nötig sind, habe ich einfach mal weiter gefragt. Es ist doch sicherlich nicht nur für mich wichtig! Entschuldige, wenn ich da jetzt jemanden auf die Füsse trete, aber die Erklärung zu Minify ist unzureichend.
Es ist klasse und toll, wenn sich die Mitglieder die Mühe und Zeit nehmen und ihr Wissen teilen, aber noch mal -steinigt mich wenn ihr wollt- wenn ich so ein Thema beginne und eine "Anleitung" poste, dann erwarte ich auch, dass diese für alle nachvollziehbar ist. Sollte es dann für einige nicht nachvollziehbar/verständlich genug sein, sollte die Bitte der Nachbesserung gestattet sein und nachgekommen werden, es ist ja schließlich eine "Anleitung".
Aber gut, meine Seite hat nichts desto trotz noch einige Mängel, ich stelle das dann mal in die Jobvergabe rein, Seite mit Minify optimieren...
Gruß

[noRiddle (revilonetz)]

Tja, ich verstehe die Anleitung.
Man kann ja auch ein wenig Eigeninitiative verlangen oder ?
Wenn ich was nicht weiß benutze ich Tante Google, wenn ich den Quelltext nicht verstehe, gucke ich ihn mir an.

Wenn du nicht weißt welche Dateien zusammengefasst und dann minified werden können, musst du dir halt anschauen welche Datei für was nötig ist, keiner kennt deinen Shop.

Ich sag' es nochmal, ohne Vorwissen und / oder mit der Einstellung man müsse alles haarklein vorgekaut bekommen, kommt man auch in so einem guten Forum nicht weit.
Die Anleitungen hier sind nämlich nicht für Leute die gar nix wissen oder die ihre Fragen nicht explizit stellen, da müsste man, wie gesagt, ganze Bücher schreiben.

Ein paar konstruktive ausformulierte Fragen, die zeigen, daß du dich bemühst, wären wahrscheinlich längst beantwortet worden.

Nichts für Ungut aber mich regt das auf.

Grüsse,
noRiddle

[peterpan19]

Ja sicher, Eigeninitiative habe ich und trotzdem verstehe ich die Anleitung nicht! Ich habe Stunden zugebracht, Minify zu verstehen, Foren durchsucht, aber eine wirklich verständliche Anleitung habe ich nicht gefunden. Nehmen wir mal die Homepage von Minify: minify - Combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads.
Alles in englisch, sehr technisch, nicht gerade einfach zu verstehen. Nimm mal die Seite Minify 2.1 on mrclay.org, ist auch ein walktrough, genauso unschlüssig. Ich weiss welche Dateien zusammengefasst werden können, habe ich bereits geschrieben, aber was DANACH mit dem Code und den Dateien passiert, geht nicht aus dem Thema hervor.
Und mit Verlaub, ich bin ganz sicher nicht der Einzige, der in Sachen Shop Programmierung ein Anfänger ist, für den eben nicht alles verständlich ist. Dann kann auch mal "Vorkauen" nötig sein. Aber ich möchte hier nicht einen Zwist zwischen uns entfachen und versuche es dann eben noch weitere Wochen, das zu verstehen und bin dir trotzdem für dein Engagement dankbar!
Gruß

[karabey]

Hat jemand eine Lösung für Piwik Addon Modul. Durch den bleibt der Status auf F

lg
karabey

[Simon]

In testete Minify in meinem Testshop mit dem Trunk.
Dort gibt es Probleme mit DIR_WS_BASE, was einem / entspricht.

Hiermit ohne / funktioniert es, aber nur auf der Startseite

Code: PHP  [Auswählen]

<link type="text/css" rel="stylesheet" href="min/b=<?php echo 'templates/' . CURRENT_TEMPLATE; ?>...

Das beides funktioniert gar nicht. Fehler 400 - Bad Request

Code: PHP  [Auswählen]

<link type="text/css" rel="stylesheet" href="min/b=<?php echo DIR_WS_BASE . 'templates/' . CURRENT_TEMPLATE; ?>...

Code: PHP  [Auswählen]

<link type="text/css" rel="stylesheet" href="min/b=<?php echo '/templates/' . CURRENT_TEMPLATE; ?>...

Weiß jemand bitte einen Rat, vielen Dank.

[Simon]

Wirklich keiner eine Idee ?

[peterpan19]

Kann minify ohne Probleme geupdatet werden, also neue Version einfach über die alte drüber kopieren?
Gruß

[peterpan19]

Dann antworte ich mal selbst. Grundsätzlich kann man es einfach drüber kopieren, es sei denn, es wurden schon Änderungen vorgenommen. Gilt wie für so gut wie alle Änderungen am Shop, erst mal schauen, ob schon Modifizierungen gemacht wurden und vorher sichern.

Des Weiteren habe ich mir die Zeit genommen und mich noch mal mit minify auseinander gesetzt. Die Anleitung auf Seite 1 ist mir zu dürftig, daher hier meine Zusammenfasung.

Grundsätzlich lassen sich css und js Dateien mit minify optimieren. CSS liegt normalerweise im Ordner Shop/Templates/DeinTemplate/css und Javascript im Ordner Shop/Templates/DeinTemplate/javascript.
Es gibt möglicherweise noch an anderer Stelle css oder javascript Dateien, aber hier gehe ich nur auf die bereits vorhanden und nicht durch Module hinzugekommene Dateien ein.

Der Anleitung von Seite 1 konnte ich soweit folgen bis zum Punkt 5 Installation von minify.
Hier mache ich weiter.
Die Seite minify aufrufen: www.deinshop/min
Nun sind wir in der Eingabepage von minify, siehe Bildanhang!
Hier könnnen nun die Dateien mit der Pfadangabe eingegeben werden. Wichtig, wie kwiekids schon schrieb, keine ccs und js vermischen.
In meinem Fall sind es 3 css Dateien.
In der Eingabepage von minify muss nun Zeile für Zeile der Pfad der Dateien eingegeben werden und nach jeder Eingabe "Add File +" gedrückt werden.
Sieht dann so aus:
http://www.deinshop.de/templates/xtc5/css/javascript.css
http://www.deinshop.de/templates/xtc5/css/jquery-ui.css
http://www.deinshop.de/templates/xtc5/css/thickbox.css
Hat man dies erledigt, auf "update" drücken.
Man sollte nun folgendes Bild vor sich haben, siehe Anhang.

Da minify eine höhere Performance bei Zusammenfassung verspricht, habe ich dies getan.
Dazu im Bereich "How to serve these files as a group" unter "... your existing groups here ..." reinklicken und kopierern, dann in der Datei "/min/groupsConfig.php" einfügen, sieht dann so aus:

Code: PHP  [Auswählen]

<?php
/**
 * Groups configuration for default Minify implementation
 * @package Minify
 */

/**
 * You may wish to use the Minify URI Builder app to suggest
 * changes. http://yourdomain/min/builder/
 *
 * See http://code.google.com/p/minify/wiki/CustomSource for other ideas
 **/

return array(
    // 'js' => array('//js/file1.js', '//js/file2.js'),
    // 'css' => array('//css/file1.css', '//css/file2.css'),
        // algemeine CSS Styles
        'style' => array( '//templates/xtc5/css/javascript.css', '//templates/xtc5/css/thickbox.css', '//templates/xtc5/css/jquery-ui.css'),
);

Hierbei ist es sehr wichtig, der Gruppe einen Namen zu geben, ich habe die Gruppe "style" genannt.
Jetzt muss man in die Datei Shop/templates/deinTemplate/css/general.css.php.
Hier kommt dann folgendes zu tragen: "For the best performance you can serve these files as a pre-defined group with a URI like: /min/g=keyName"
Sieht dann so aus:

Code: PHP  [Auswählen]

<?php
/* -----------------------------------------------------------------------------------------
   $Id: general.js.php 1262 2005-09-30 10:00:32Z mz $

   XT-Commerce - community made shopping
   http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))

   Copyright (c) 2003 XT-Commerce
   -----------------------------------------------------------------------------------------
   Released under the GNU General Public License
   ---------------------------------------------------------------------------------------*/

   // Put CSS-Definitions here, these CSS-files will be loaded at the TOP of every page
?>
<link type="text/css" rel="stylesheet" href="/min/g=style" />
<?php /*
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/thickbox.css" type="text/css" media="screen" />
*/ ?>
<?php// BOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>
<?php
if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO )) {
?>
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/jquery-ui.css" type="text/css" media="screen" />
<?php
}
?>
<?php// EOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>

Auch hier ist es wichtig, dass sich die Gruppe "style" hier wieder findet.

Das ist es dann auch schon. Bei Javascript geht man genauso vor, hier wird auch eine Gruppe in der Datei groups.Config.php definiert und der Code, der von minify generiert wurde, hieher rein kopieren, direkt unter dem ersten Code "style", Javascript habe ich der Einfachheit auch "javascript" genannt, sieht dann z.B. so aus:

Code: PHP  [Auswählen]

<?php
/**
 * Groups configuration for default Minify implementation
 * @package Minify
 */

/**
 * You may wish to use the Minify URI Builder app to suggest
 * changes. http://yourdomain/min/builder/
 *
 * See http://code.google.com/p/minify/wiki/CustomSource for other ideas
 **/

return array(
    // 'js' => array('//js/file1.js', '//js/file2.js'),
    // 'css' => array('//css/file1.css', '//css/file2.css'),
        // algemeine CSS Styles
        'style' => array('//templates/xtc5/css/cloud-zoom.css', '//templates/xtc5/css/javascript.css', '//templates/xtc5/css/thickbox.css', '//templates/xtc5/css/jquery-ui.css', '//templates/xtc5/css/no_javascript.css', '//templates/xtc5/stylesheet.css'),
        // Javascript
        'javascript' => array('//templates/xtc5/javascript/jquery.js', '//templates/xtc5/javascript/thickbox.js', '//templates/xtc5/javascript/jquery.innerfade.js', '//templates/xtc5/javascript/imageslider.js', '//templates/xtc5/javascript/browser.js'),
);

Bei Javascript muss man allerdings die Gruppe in die Datei Shop/Templates/deinTemlate/javascript/general.js.php eintragen:

Code: PHP  [Auswählen]

<?php

/* -----------------------------------------------------------------------------------------
   $Id: general.js.php 1262 2005-09-30 10:00:32Z mz $

   XT-Commerce - community made shopping
   http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))

   Copyright (c) 2003 XT-Commerce
   -----------------------------------------------------------------------------------------
   Released under the GNU General Public License
   ---------------------------------------------------------------------------------------*/


   // this javascriptfile get includes at the BOTTOM of every template page in shop
   // you can add your template specific js scripts here
?>
<script type="text/javascript" src="/min/g=javascript" />
<script type="text/javascript" src="/min/f=templates/<?php echo CURRENT_TEMPLATE; ?>/javascript/main.js"></script>
<?php

Korrekturen und Verbesserungen sind gerne Willkommen!!

Noch eine wichtige Info! Es kann vorkommen, dass minify das Template etwas verändert, daher immer vorher sicher und gegebenenfalls mit minify testen, welche Dateien eine Änderung des Templates hervorrufen oder ein verändertes Template nachbessern.
Gruß

[web0null]

Warum schreibst du deine "main.js" einzeln rein, kannst du doch auch in die groupsConfig.php eintragen.
Den Builder braucht man im Prinzip auch nicht aufrufen.

Einfach seine Dateien in das Array eintragen.

Z. b. so:

Code: PHP  [Auswählen]

<?php
/**
 * Groups configuration for default Minify implementation
 * @package Minify
 */

/**
 * You may wish to use the Minify URI Builder app to suggest
 * changes. http://yourdomain/min/builder/
 *
 * See http://code.google.com/p/minify/wiki/CustomSource for other ideas
 **/

/* return array(
  'js'  => array('//js/file1.js', '//js/file2.js'),
  'css' => array('//css/file1.css', '//css/file2.css'),
); */

$pathCss = '//templates/xtc5/css/';
$pathJs  = '//templates/xtc5/javascript/';

return array(
  'css' => array(
            $pathCss.'cloud-zoom.css',
            $pathCss.'javascript.css',
            $pathCss.'thickbox.css',
            $pathCss.'jquery-ui.css',
            $pathCss.'no_javascript.css',
            '//templates/xtc5/stylesheet.css',
           ),
  'js' => array(
            $pathJs.'jquery.js',
            $pathJs.'thickbox.js',
            $pathJs.'jquery.innerfade.js',
            $pathJs.'imageslider.js',
            $pathJs.'browser.js',
            $pathJs.'main.js',
          ),
);
?>
 

Aufruf mit:

Code: XML  [Auswählen]

<link type="text/css" rel="stylesheet" href="/min/g=css" />
<script type="text/javascript" src="/min/g=js"></script>

Gruß

[EDIT Tomcraft 05.02.2014: Fehler in Code korrigiert, Danke an web0null für den Hinweis.]

[Gradler]

Werden bei Minify nicht auch die Dateien etwas verkleinert? Leerzeichen rausgelöscht, alles in eine Zeile? kb-sparend?

[peterpan19]

Ja. 
Gruß

[peterpan19]

Warum schreibst du deine "main.js" einzeln rein, kannst du doch auch in die groupsConfig.php eintragen.
Den Builder braucht man im Prinzip auch nicht aufrufen.

Einfach seine Dateien in das Array eintragen.

Z. b. so:

Code: PHP  [Auswählen]

<?php
/**
 * Groups configuration for default Minify implementation
 * @package Minify
 */

/**
 * You may wish to use the Minify URI Builder app to suggest
 * changes. http://yourdomain/min/builder/
 *
 * See http://code.google.com/p/minify/wiki/CustomSource for other ideas
 **/

/* return array(
  'js'  => array('//js/file1.js', '//js/file2.js'),
  'css' => array('//css/file1.css', '//css/file2.css'),
); */

$pathCss = '//templates/xtc5/css/';
$pathJs  = '//templates/xtc5/javascript/';

return array(
  'css' => array(
            $pathCss.'cloud-zoom.css',
            $pathCss.'javascript.css',
            $pathCss.'thickbox.css',
            $pathCss.'jquery-ui.css',
            $pathCss.'no_javascript.css',
            '//templates/xtc5/stylesheet.css',
           ),
  'js' => array(
            $pathJs.'jquery.js',
            $pathJs.'thickbox.js',
            $pathJs.'jquery.innerfade.js',
            $pathJs.'imageslider.js',
            $pathJs.'browser.js',
            $pathJs.'main.js',
          ),
);
?>
 

Aufruf mit:

Code: XML  [Auswählen]

<link type="text/css" rel="stylesheet" href="/min/g=css" />
<script type="text/javascript" src="/min/g=js" />

Gruß

Danke für die Verbesserung!!

Gruß

[Gradler]

Ja. 
Gruß

Wenn das ja die Verkleinerung betrifft sollten die geänderten Dateien auch irgendwie in der Anleitung erwähnt werden - oder täusche ich mich da?

[peterpan19]

Die Dateien die "verkleinert" werden, sind alle Dateien,  die Du in minify eingibst, bzw. wie von web0null vorgeschlagen direkt eintragen, also alle Stylesheet ".css" und Javascript ".js" Dateien.
Die Dateien die ich hier erwähnt habe, sind aus der Standard Installation modified106 r4642. Das können aber grundsätzlich auch weitere *.css und *.js Dateien sein, die durch Zusatzmodule hinzu kommen. Daher kann ich hier nicht pauschal sagen, welche Dateien das sein könnten,  ausser denen aus der 106 r4642.
Vielleicht noch mal das Thema von Beginn an lesen, dann denke ich, wird es etwas klarer.
Gruß

[noRiddle (revilonetz)]

Habe mir diese Erweiterung nicht im einzelnen angeschaut (aus Zeitgründen),
aber ist nicht das Hauptproblem bei solchen Ideen, daß ich
- ebenfalls aus Performance-Gründen -
nicht auf jeder Seite jedes CSS und jedes JS laden möchte ?

Oder kann man mit der Erweiterung verschiedene Kombinationen verwirklichen und diese abhängig von der aufgerufenen Seite implementieren ?
So will man z.B. nicht zwingend das JS für das Tab-Modul auf jeder Seite laden
oder, hat man einen Slider nur auf der Startseite, möchte man das CSS und das JS für diesen Slider eben nur auf der Startseite laden.

Natürlich könnte man sich händisch komprimierte Files erstellen und diese abhängig von der Seite jeweils implementieren, aber der Sinn des Moduls ist es doch das nicht händisch machen zu müssen, right ?

Gruß,
noRiddle