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 blinkeblike 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.

Zurück