CSS und Javascript Dateien einbinden

Javascript und CSS in TYPO3 einbinden - ein Kinderspiel :) Doch wer alles gedankenlos ohne Komprimierung in den Seitenheader lädt braucht sich nicht zu wundern, wenn google die rote Karte austeilt. Mit etwas Komprimierung und sinnvoller Planung sollten auch TYPO3 Seiten ein page speed von über 80 problemlos erreichen.

CSS Dateien einbinden

CSS Dateien werden über includeCSS eingebunden. Dabei entspricht die Reihenfolge der Dateien auch der Reihenfolge der Einbindung:

 page.includeCSS { 
    css_reset = fileadmin/templates/css/reset.css
    meineHauptdatei = fileadmin/templates/css/sitestyle.css
    }

Externe CSS Dateien (z.B. jQuery UI css) benötigen den Zusatz external = 1.

page.includeCSS { 
    jquerymobile = code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css
    jquerymobile.external = 1
    jquerymobile.disableCompression = 1
    jquerymobile.excludeFromConcatenation = 1
}

Auf die Bedeutung der Zeilen disableCompression und excludeFromConcatenation gehe ich im Abschnitt "Kompression und Dateizusammenfassung" weiter unten auf dieser Seite ein.


Javascript Dateien einbinden

Im Gegensatz zu CSS Dateien die immer im Header geladen werden müssen haben wir bei Javascript Dateien die Option diese im Header oder am Ende der Seite zu Laden. Grundsätzlich sollten die Javascript Dateien erst am Ende der Seite geladen werden, da sich dann die Seite vor dem Laden der js Dateien aufbaut.

Da einige Extensions jedoch inline js Funktionsaufrufe in den html Quelltext schreiben, müssen in diesen Fällen die js Dateien vor der Ausführung des Quelltextes geladen sein - also im Header.

Übliche Fehlermeldungen in der Konsole bei zu spät geladenen js Dateien sind meist “xy is not a function”.

Javascript im Seitenheader:
forceOnTop = 1 bewirkt das die Datei als erstes geladen wird.

includeJSlibs { 
    modernizr = EXT:responsive_template/Resources/Public/javascript/modernizr-2.6.1.min.js
    modernizr.forceOnTop= 1
}

Javascript im Seitenheader:

includeJS { 
    jquery = EXT:responsive_template/Resources/Public/javascript/jquery-1.8.0.min.js
}

Javascript am Ende der Seite laden

 includeJSFooter { 
    sitescript = EXT:responsive_template/Resources/Public/javascript/sitescript.js
}

Kompression und Dateizusammenfassung

Seit TYPO3 4.6 kann man css und js automatisch gz komprimieren. Wie die Komprimierung eingerichtet wird, habe ich hier beschrieben: gzip Komprimierung für Javascript & CSS.

Zusätzlich kann man alle css bzw js Dateien vor dem Ausliefern an den Browser in eine Datei zusammenfassen. Dazu sind folgende Einträge erforderlich:

config.concatenateCss = 1 
config.concatenateJs = 1

Achtung: die Zusammenassung von CSS Dateien hat so ihre Tücken. @charset und @import müssen am Anfang einer CSS Datei stehen - werden diese durch concatenateCss ‘aneinandergehängt’ ist dies nicht mehr zwingend der Fall und die Anweisungen werden nicht ausgeführt.

Früher konnten die Browser nur eine feste Anzahl an Serverrequest parallel abarbeiten. Da dieses Limit inziwschen überholt ist, macht eine automatische Zusammenfassung nicht mehr allzuviel Sinn. Hier sollte man besser schon während der Entwicklung die Dateien zusammenfassen - über 18 verschiedene jQuery plugins im Header einzeln zu laden macht für mich keinen Sinn, auch wenn dies in der Praxis immer noch üblich ist.

Externe Dateien müssen auf jeden Fall von der Komprimierung und Zusammenfasung ausgeschlossen werden damit diese auf der Client Seite geladen werden. Anderenfalls lädt erst euer Server diese Dateien und sendet sie dann zum Browser.

Die Einbindung von externen CSS und Javascript Dateien sollte also immer mit dem Zusatz disableCompression und excludeFromConcatenation erfolgen.

Beispiele:

 page.includeJS { 
    jquery = code.jquery.com/jquery-1.10.2.min.js
    jquery.external = 1
    jquery.disableCompression = 1
    jquery.excludeFromConcatenation = 1
}
 page.includeCSS { 
    jquerymobile = code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css
    jquerymobile.external = 1
    jquerymobile.disableCompression = 1
    jquerymobile.excludeFromConcatenation = 1
}
Empfehlenswerte Lektüre:

TYPO3 Extbase: Moderne Extension-Entwicklung für TYPO3

Ein nahezu perfektes Buch für TYPO3 Extensionentwickler die mit Extbase und Fluid beginnen, aber auch erfahrene Entwickler finden noch Anregungen um ihre eigene Arbeit ständig zu verbessern. Sehr ausführlich, kurzweilig, kein Lesestoff für die Couch sondern eher ein Mitmachbuch das Spaß und Unterstützung bei der eigenen Extensionentwicklung bietet.

Weitere Artikel zu diesem Thema:

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.