CSS und JavaScript

CONTAILOR sammelt alle CSS- und JS-Dateien, die zum Betrieb der Webseite benötigt werden und fasst diese zu je einer Datei zusammen (Bundle), um die Performance zu erhöhen. Um ein optimales Ergebnis zu erhalten, sind einige Dinge zu beachten.

CSS- und JS-Dateien werden vom CMS zusammengestellt und als Bundle (also als eine Datei bzw. ein HTTP-Request) gehandhabt. CONTAILOR sieht hierfür die Stamm-Ordner "css" und "javascript" vor. Zusätzlich können in den ShapeType-Ordnern entsprechende Resourcen bereitgestellt werden. Bei der Programmierung können diese in übersichtliche Einzeldateien gelegt werden. Über das Ende des Dateinamens (noch vor der jeweiligen Dateiendung) kann dem System die Information gegeben werden wie die jeweilige Ressource geladen werden soll.

Die einzelnen Definitionen von CONTAILOR werden, falls vorhanden, von denen der Webseite überschrieben.

Die Definitionen eines ShapeTypes, der in den Einstellungen nicht aktiviert wurde, wird auch nicht mit an den Browser gesendet.

Min-Dateien werden generell vom Bundling ausgenommen (Filter: *.min.js/css).

• [Instance-Path]
  • css (alle)
  • ShapeType/[ShapeType]/css (alle)

• [Instance-Path]
  • javascript (alle)
  • ShapeType/[ShapeType]/javascript (alle)

Über den Dateinamen einer CSS- oder JS-Datei kann gesteuert werden in welchem Bundle das Element landet.
Es stehen folgende Varianten zur Verfügung:

Die Dateien, welche auf .defer.js oder .defer.css enden werden erst aufgerufen wenn die HTML-Seite fertig geladen wurde.

Die Dateien, welche auf .async.js oder .async.css enden, werden unabhängig zur restlichen Seite geladen. Dies bedeutet einen Performacevorteil, birgt aber auch das Risiko, dass es zu Problemen in der Reihenfolge kommen kann.

Die Dateien, welche auf .inline.js oder .inline.css enden, werden direkt als <script>- oder <style>-Tag eingebunden. Dies ist vor allem für Above-The-Fold-CSS wichtig.

Alle Dateien, die keinen Zusatz im Namen beinhalten, werden nach dem üblichen Prinzip einer Webseite behandelt. Sie werden an der Stelle an der sie stehen geladen und anschließend ausgeführt. Der restliche Aufbau der Seite wartet so lange.