Resource Optimizer

Grundfunktionen in der Übersicht

• Minifizieren von JavaScript-Dateien
• Minifizieren von CSS-Dateien
• Minifizieren von inline CSS
• Prefixen von CSS
• auch für Plugin-Dateien - keine Definition im Template nötig

Installation

Der Resource Optimizer ist wie jedes Plugin für den JTL Shop 3 schnell und einfach zu installieren, lies hierzu bitte unseren Post zur Installation von JTL Shop Plugins.

Zusätzlich dazu kopiere bitte den Ordner min in das Wurzel-Verzeichnis Deines Shops - nicht in den Plugin-Ordner!

Die Datei min/groupsConfig.php muss für den Webserver beschreibbar sein! Setze also ggf. mit Deinem FTP-Client eine Berechtigung wie 644 oder - falls das nicht reicht - 666.

Falls Du auch inline-CSS minifizieren willst, gilt dasselbe auch für die Datei version/<version>/frontend/inc/inline_css.php.

Deaktiviere ggf. bitte auch noch die Funktion "Komprimierung von Javascript und Stylesheets" in den Einstellungen Deines Themes, um Konflikte zu vermeiden.

Wichtig, falls Dein Shop bei 1&1 gehostet ist oder Du 404-Fehler beim Zugriff auf die minifizierten Dateien bekommst: Entferne die Raute in der Zeile

#RewriteBase /min

der Datei /min/.htaccess.

Falls Dein Shop zusätzlich in einem Unterordner installiert sein sollte, musst Du die Zeile noch anpassen in z.B.

RewriteBase /mein-ordner/min

Voraussetzungen

In den Plugin-Einstellungen findest Du einen Tab "Voraussetzungen", der Dir sagt, ob das Plugin richtig installiert wurde und funktionsbereit ist. Falls es Probleme gibt, findest Du hier Hinweise.

Wichtig für JTL Shop 3.18 und das Tiny Template

Nutzt Du das standard Template von JTL Shop 3.18, so setze bitte die Option JavaScript einfügen in auf nach Script (wichtig für JTL Shop 3.18) und achte darauf, dass das Feld Script-Src einen Wert wie z.B. //code.jquery.com/jquery-migrate-1.2.1.min.js hat. Dies sorgt dafür, dass die minifizierten Skripte direkt nach der dort angegebenen Datei eingebunden werden.

Einstellungen

In den Plugin-Einstellungen kannst Du den ResourceOptimizer komplett deaktivieren, falls es Probleme geben sollte. Auch kannst Du einzelne Funktionalitäten deaktivieren.

Setzt Du die Option JavaScript zusammenfassen? auf "Ja", werden alle eingebundenen JavaScript-Dateien kombiniert und minifiziert. Ist diese Option auf "Nein", bleibt alles so wie immer. Dasselbe gilt für die Option CSS zusammenfassen?. Hier kannst Du zusätzlich noch angeben, ob auch inline CSS minifiziert werden soll. So wird aus allen Style-Tags auf Deiner Seite eine temporäre Datei erstellt und zusammen mit den restlichen Dateien minifiziert.

Du kannst auch noch angeben, ob minifiziertes JavaScript in den head- oder body-Bereich des Dokuments geschrieben werden soll. Lass diese Option am besten auf "head", außer Du weisst genau, was du tust.

Um das Plugin zu testen ohne bei eventuellen Fehlern Deine Besucher zu verschrecken, kannst Du den Testmodus aktivieren. In der entsprechenden Option kannst Du auswählen, welche Funktionalitäten Du testen möchtest. Um den Test durchzuführen, lade anschließend Deinen Shop und hänge an die URL den Parameter ?kk-res-opt-test an.

Um also z.B. eine Produktseite mit der URL http://www.mein-shop.de/mein-produkt zu testen, rufst Du einfach http://www.mein-shop.de/mein-produkt?kk-res-opt-test auf. Falls dabei keine Probleme auftreten, kannst Du das Plugin anschließend aktivieren und den Testmodus wieder ausschalten.

Um bei Problemen ein paar Hinweise zu erhalten, kannst Du die Option Debugging aktivieren? auf "Ja" stellen. Dann erhältst Du im Frontend Hinweise über den Plugin-Ablauf.

Erweiterte Einstellungen

<script type="text/javascript" src="http://example.com/script.js" data-ignore="true"></script>

<style type="text/css" data-ignore="true">
    body{background:blue;}
</style>
<link href="http://example.com/style.css" rel="stylesheet" type="text/css" data-ignore="true">

//require dirname(__FILE__) . '/lib/Minify/Cache/APC.php';
//$min_cachePath = new Minify_Cache_APC();

//$min_serveOptions['postprocessorRequire'] = dirname(__FILE__) . '/lib/css-crush/CssCrush.php';
//$min_serveOptions['postprocessor'] = 'prefixer';

#mein-selektor{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#mein-selektor{
    border-radius: 5px;
}

Fehlersuche

Falls JavaScript nach der Installation des Plugins nicht mehr funktioniert, Du einen Hinweis wegen XAJAX bekommst oder das CSS nicht mehr richtig dargestellt wird, prüfe bitte, ob der Aufruf der minifizierten Dateien einen Serverfehler verursacht hat.

Im Quelltext Deiner Seite sollte sowas wie

<link type="text/css" rel="stylesheet" href="http://mein-shop.de/min/g=css-20550b4cce6e4cddcc6b40a8390fbeda">

sein. Falls Diese Datei einen 404-Fehler verursacht, probiere aus, ob es nach dem Schema

http://mein-shop.de/min/index.php?g=css-20550b4cce6e4cddcc6b40a8390fbeda

funktioniert. Wenn ja, musst Du wie oben beschrieben die .htaccess-Datei im /min-Ordner anpassen.

Falls Du einen 500er Serverfehler bekommst, sag uns einfach bescheid.

Wartung und Hinweise

Falls die Option Auch Inline-CSS minimieren? aktiviert ist, können alte Cache-Dateien z.B. mit dem Plugin Template Cache Loescher von JTL gelöscht werden. Wenn dies geschieht, muss anschließend kurz der Button Cache leeren im Resource Optimizer geklickt werden.