Hilfe-Center

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.

Allgemein

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

Ablageorte für Ressourcen

CSS

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

JavaScript

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

Zuladevarianten für Ressourcen

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

Defer

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

Async

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.

Inline

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.

Default

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.

Ausnahme: No Bundle

CSS- und JS-Dateien mit .nobundle vor der Dateiendung werden ignoriert und können unabhängig vom Webseitenersteller eingebunden werden (z. B. mydefaultscript.nobundle.js in einem Shape-Ordner).

War dieser Beitrag hilfreich?
4 von 4 fanden dies hilfreich.
Es ist ein technisches Problem aufgetreten. Bitte wenden Sie sich telefonisch oder per E-Mail an uns.