Javascripts serverseitig in eine Datei packen?

[Psi]

Hallo Kollegen,

mir ist aufgefallen, dass etwas größere Seiten doch viel Javascript-Code enthalten
- mootools
- mootools-more
- mediabox
in der Standardversion + etliche Bibliotheken aus Eigenentwicklung und Extensions. Ich verteile die einzelnen JS-Klassen gerne in getrennte Files und teilweise lade ich dann bis zu 10 Javascript-Dateien.

Die Ladezeit und die Anzahl der Serverrequests könnte doch dadurch optimiert werden, dass PHP all diese Javascripts als eine einzige, gepackte Datei ausliefert? Ich habe dieses Vorgehen bei Magento bemerkt und halte es für keinen schlechten Ansatz.

Für Debuggingzwecke könnte man ja einen Schalter einbauen, der die Dateien dann ungepackt ausliefert.

Was haltet Ihr davon? Sinnvoll oder unnötig?

[matze]

Auf jeden Fall sinnvoll. Dieses Vorgehen wird ja auch von diversen Tools und Leitfäden (Google Page Speed und ySlow) gefordert.
Es gibt ja auch schon einige PHP Scripte, die JS-Dateien zusammenfassen und komprimieren.
Am Besten das Gleiche auch noch mit CSS-Files machen!

[Toflar]

Ich hab mich noch nicht wirklich damit befasst, aber was macht eigentlich gzip genau? Müsste ich mich mal einlesen

Für Debuggingzwecke könnte man ja einen Schalter einbauen, der die Dateien dann ungepackt ausliefert.

Ich finde da reicht die bereits vorhandenene "Debugmodus"-Checkbox, nicht?

[Psi]

Also ich denke das Ganze dürfte sich auch gut in TL integrieren lassen, man müsste nur die paar JS-Dateien aus der fe_page.tpl ebenfalls über $GLOBALS[TL_JAVASCRIPT] einbinden.

Da alles schon im Array vorliegt ...

Ich denke ich werd mich da mal drüber machen in den nächsten Wochen.

[schman]

bei TYPO3 gibt es auch ein solch Erweiterung namens scriptmerger. Ev. kann man sich hiervon was abschauen

[matze]

Ja liegt denn da auch wirklich alles im Array vor?
Kann es denn nicht sein, dass da über die "zusätzlichen Header Tags" im Seitenlayout oder im Template noch JS eingebunden wird?

[Toflar]

outputFrontendTemplate-Hook

[xchs]

Hallo Psi,

das was Du da planst, klingt sehr interessant. Zurzeit mache ich sämtliche Optimierungen an statischen Ressourcen (JS & CSS, Bilder) manuell (YUICompressor, gzip, Combining, Sprites). In diesem Zusammenhang auch folgende Themen von mir:
https://community.contao.org/de/showthread.php?t=2617
https://community.contao.org/de/showthread.php?t=2511

Wenn man das versucht umzusetzen, würde ich das aber nicht nur auf JS-Dateien beschränken, sondern auch die Anzahl der HTTP-Requests für CSS-Dateien auf ein Mindestmaß reduzieren, denn letztendlich kosten die gleich viel RTT...

[Thomas]

Alles Aspekte über die ich in den letzten Tagen auch gestolpert bin und auf meine große Liste geschrieben habe.

Vielleicht bekommt man da mit allen Optimierungen eine Art Sammeltutorial hin, wovon alle Interessierten etwas hätten.

Ich denke, dass sowas einige interessieren könnte, aber die Ansätze zu fehlen, bzw. das know how dazu.

[lucina]

Wenn man das versucht umzusetzen, würde ich das aber nicht nur auf JS-Dateien beschränken, sondern auch die Anzahl der HTTP-Requests für CSS-Dateien auf ein Mindestmaß reduzieren, denn letztendlich kosten die gleich viel RTT...

DAS dachte ich auch zuerst, ist aber denn doch etwas komplizierter. Die js sind da wo sie sind und verändern sich auch nicht, was bei css ja nun etwas anders liegt. Und die Abfrage auf Änderungen - wenn möglich in Verbindung mit dem Cronjob zum täglichen neuerzeugen - möchte ich nicht auf die Schnelle einbauen.

Grundsätzlich aber eine feine Funktion, die viel Handarbeit abnimmt.

Carolina.

[xchs]

Was die JavaScript-Dateien betrifft, müsste man weiters auch unterscheiden, zwischen solchen, welche direkt in das Layout bzw. den Seitenaufbau eingreifen (-> document.write usw.) und jenen, die auch später geladen werden können. Erstere müssten bereits im Head geladen werden, alle anderen könnten ans Seitenende in den "MooTools"-Bereich.
Das MooTools-Framework selbst wird man wahrscheinlich im Head lassen müssen, ansonsten könnte es vielleicht Probleme mit der einen oder anderen Erweiterung geben. Bei vielen anderen JS-Dateien, welche die unterschiedlichen Erweiterungen teilweise einbinden, spielt es hingegen keine Rolle, wenn diese erst am Seitenende geladen/ausgeführt werden und dadurch das schnelle Rendering der Seite nicht unnötigerweise blockieren.
Idealerweise könnte man so nach einem Combining aller benötigten JS-Dateien auf max. zwei Dateien (HTTP-Requests) kommen (eine im Head, eine am Seitenende). Die Umsetzung wird aber entsprechend schwierig werden...

[xchs]

@lucina:
Bei Änderungen dieser Ressourcen (sei es CSS als auch JS) habe ich momentan bei mir eine Versionierung im Dateinamen eingebaut. Die URL (mit Versionsnummer) wird dann mit Hilfe der .htaccess auf den eigentlichen Dateinamen umgebogen; so braucht man nicht ständig den Dateinamen zu ändern und kann trotzdem auf Versionsänderungen reagieren. Dies ist insbesondere dann wichtig, wenn solcherart Ressourcen auch entsprechend gecached werden (Stichwort: mod_expire usw.)
Die TL-Erweiterung müsste also neben dem Combining dieser Dateien auch für eine entsprechende Versionierung sorgen.

[FloydThreepwood]

Bei CSS Dateien wird es viele Probleme geben, da die Pfade nicht relativ zur Base angegeben werden.

JavaScript wird ja im dokument ausgeführt, CSS aber im Ordner geladen und eingebunden, dadurch kann

th {background-image: url(../../th_bg.png);}

schnell eine ganz andere Pfadangebe meinen, hier sind automatismen wirklich sehr schwer, da man diesen Pfad nur über eine RegXP erfassen und ändern könnte, aber nicht künstlich anbinden kann.

MFG Jan

[Schepp]

Hallo zusammen,

ich könnte Euch etwas Arbeit abnehmen, indem ich Euch auf meine eigenständige PHP-Bibliothek CSS-JS-Booster verweise (-> Download Source oben rechts).
Lesestoff dazu gibt es hier und im Wiki.

Vielleicht ist es ja interessant für Euch?
Ich weiß von mindestens einem Contao-Benutzer (Fexxx), der die Bibliothek bei sich integrieren konnte.

Viele Grüße

vom Schepp