Ladezeiten und Code Optimierung in Contao für CSS und JS Dateien
Oft kommt es vor, das man für eine bestimmte Übersichtsseite oder Unterseite ein JS oder CSS zusätzlich einbinden muss, da es für eine bestimmte Funktion oder blinkeblinke Umsetzung benötigt wird. Um sich aber aber nicht global die Ladezeiten mit JS / CSS Code zu überfrachten habe ich folgende Tipps für dich.
Dafür gibt es mit folgender Einbindung die Möglichkeit nur die JS oder CSS in Contao anhand der Seiten ID per Include in den HEAD zu laden.
Dazu legt ihr eine HTML5 Datei in das Templateverzeichnis für die jeweilige Installation.
Z.B. in /templates/DEINPROJEKT/ j_KUNDE-XYZ-css-js.html5
In die fügt ihr folgenden CodeSnippet ein. Unter Layout > Themes > KundenLayout > jQuery-Templates findet Ihr jetzt die einzubindende j_KUNDE-XYZ-css-js die euch die JS / CSS in den HEAD includiert. Wenn nichts erscheint vielleicht die Systemwartung mit dem Punkt Skriptcache leeren und Internen Cache leeren / ausführen.
Ich kann euch bei der Programmierung oder Anpassung eines Layouts wie eine Contao Agentur behilflich sein.
Snippet für die Einbindung von CSS und JS Dateien in Contao
<?php
global $objPage;
if ($GLOBALS['objPage']->id == 5 OR $GLOBALS['objPage']->id == 93) {
$GLOBALS['TL_CSS'][] = 'files/design/css/bxslider.css|static';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/design/js/jquery.bxslider.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/design/js/jquery.bxslider.config.js';
}Um die JS / CSS mit den anderen zusammen zu fassen, kann das über den Parameter deine-datei.js|static oder deine-datei.css|static erfolgen.
Die Stellen die Ihr anpassen müsst ist die ID wie hier im Beispiel die 5 oder die 93. In der Zeile werden über das OR für beide Seiten die in der Klammer aufgelisteten CSS / JS Dateien geladen.
Wenn Ihr nur auf einer Seite die Einbindung benötigt, dann löscht einfach das "OR $GLOBALS['objPage']->id == 93" das nur noch "($GLOBALS['objPage']->id == 5)" als Bedingung steht.
Optimierung an einem Theme um die CSS und JS Dateien in der fe_page einzufügen
In einem Kundenprojekt hatte ich die Anforderung, in einem fertigen Theme von RockSolid (TAO) die eingebundenen JS optimiert einzufügen. Nativ würde man das in neuen Contao Versionen ab 4.8 über das Theme im Picker für JS Dateien machen. Der Nachteil ist aber, das die dann im Header eingefügt werden. Ich wollte das die vor dem Ende Body noch geladen werden. Entweder in der fe_page die <?= $this->head ?> nach unten verschieben mit allen Nachteilen, oder sich etwas überlegen, wie man die Ausgabe für die Scripte selber zusammenfasst.
Hier meine Lösung über die fe_page in der ich die Ausgabe der meisten JS ganz unten ausgebe. Was ich noch nicht hin bekommen habe, ist die jquery.min.js die mit dem aktivieren der "jQuery laden" in den Header kommt, zu verzichten. Davon abhängig sind dann wieder andere Erweiterungen die jQuery benötigen, was dann deren Scripte nicht einbindet.
Wenn mal viel Zeit ist, dann ... ;-)
Kombiniert die CSS und JS Dateien in der fe_page einfügen
<script type="text/javascript" charset="utf-8" src="<?php
$objCombiner = new Combiner();
//$objCombiner->add('files/kundexyz/scripts/jquery.min.js');
$objCombiner->add('files/tao/js/modernizr-2.6.2.min.js');
$objCombiner->add('files/tao/js/script.js');
$objCombiner->add('files/kundexyz/scripts/gkk-scripte.js');
$objCombiner->add('files/kundexyz/scripts/isotope/isotope.pkgd.min.js');
$objCombiner->add('files/kundexyz/scripts/isotope/isotope-multi-config.js');
$objCombiner->add('files/kundexyz/scripts/colorbox.js');
$objCombiner->add('files/kundexyz/scripts/colorbox_config.min.js');
if ($GLOBALS['objPage']->id == 100 OR $GLOBALS['objPage']->id == 287) {
$objCombiner->add('files/kundexyz/scripts/particler/particles.min.js');
$objCombiner->add('files/kundexyz/scripts/particler/particler.config.js');
$objCombiner->add('files/kundexyz/scripts/gradientify/jquery.gradientify.min.js');
$objCombiner->add('files/kundexyz/scripts/gradientify/jquery.gradientify.config.js');
}
echo $objCombiner->getCombinedFile();?>"></script>