Da der Browser erst anfängt zu renden, wenn alle Dateien aus dem <head> geladen sind, besteht ein weitere Trick drin, die JavaScript-Dateien ganz zum Schluss der HTML-Datei einzubinden.
Die CSS-Formatierungen sollten immer als externe Datei im <head> eingebunden werden, da sonst der Browser ein zweites mal rendern würde.
Beispiel der Joomla! Seite:
...
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
</body>
</html>
...
Unter Joomla! könnte man so die mootools aus dem Header verschwinden lassen und unten im Quellcode des Templates einbinden.
Die Ladezeit der kompletten Seite würde sich dadurch zwar nicht verbessern, der Browser würde aber schon nach dem Laden der Dateien aus dem <head> (also der CSS-Dateien), anfangen Inhalte darzustellen. Die gefühlte Wartezeit für den Besucher wird so verkürzt.
Der grüne Strich markiert den Punkt, ab dem der Browser anfängt zu rendern (hier bei ca. 1,75 Sekunden). Leider läuft z. B. das Modul "Simple MooTicker" nun nicht mehr.
EXKURS: JavaScript - Deklaration von Funktionen
Schauen wir uns folgenden Code an:
<html>
<head>
<title>JavaScript Deklaration</title>
</head>
<body onload="melde_dich('Seite geladen.');">
<script language="JavaScript">
melde_dich('Mitten drin');
</script>
<p onclick="melde_dich('Erster Absatz');">
Dies ist der erste Absatz.
</p>
<p onclick="melde_dich('Zweiter Absatz');">
Dies ist der zweite Absatz.
</p>
<script language="javascript">
function melde_dich (txt_wert) {
alert("Hallo Welt! " + txt_wert);
}
</script>
</body>
</html>
Die Deklaration der Funktion darf in JavaScript nach Ihrem Aufruf stehen. Der Aufruf durch Ereignisse (z. B. "onload" oder "onclick") klappt dann auch Prima. Doch wird die Funktion mitten im HTML-Code aufgerufen (im obigen Beispiel mit dem Aufruf "Mitten drin." klappt es nicht, da hier die Funktion noch gar nicht geladen ist.
Im Gegensatz dazu treten die Ereignisse "onload" oder "onclick" erst auf, wenn auch wirklich der komplette Quellcode (inkl. der JavaScripts) geladen ist.
Wird die Funktion schon im <head> deklariert, treten diese Probleme nicht auf.
<html>
<head>
<title>JavaScript Deklaration</title>
<script language="javascript">
function melde_dich (txt_wert) {
alert("Hallo Welt! " + txt_wert);
}
</script>
</head>
<body onload="melde_dich('Seite geladen.');">
<script language="JavaScript">
melde_dich('Mitten drin');
</script>
<p onclick="melde_dich('Erster Absatz');">
Dies ist der erste Absatz.
</p>
<p onclick="melde_dich('Zweiter Absatz');">
Dies ist der zweite Absatz.
</p>
</body>
</html>
Hier klappt alles so wie es soll.
Dies hat zur Folge, dass beim Laden der JavaScript-Dateien zum Schluss (also vor dem </body>-Tag) manche Erweiterungen funktionieren werden und manche nicht.
Der "Simple MooTicker" lässt sich durch ein paar Handgriffe auch zum Laufen bringen, wenn die mootools.js zum Schluss geladen werden. Doch im Ernst, wollt ihr wirklich jede Erweiterung, die Ihr einsetzt, debuggen und die Aufrufe hierfür anpassen, nur um die JavaScripts zum Schluss zu laden?
Ich persönlich hab zwar gern mal mit der Idee gespielt, hab mich dann dafür entschieden, die mootools doch in den <head> zu packen. Hier gibt es ja die Möglichkeit die mootools mit GZIP gepackt einzubinden.
Daher ist das - meiner Meinung nach - keine Lösung für Joomla!, sondern nur eine Idee für die Optimierung. Ggf. läuft das bei anderen Seiten. Habt Ihr die mootools gleich nach dem <head>-Tag, dann laufen die Erweiterungen wie Gallerien, Menüs und Ticker, die auf den mootools basieren.
- Details
- Erstellt: 25. Dezember 2013
- Zuletzt aktualisiert: 25. Dezember 2013
Weiterhin noch der Hinweis: Die Kommentar-Erweiterung arbeitet mit Cookies! Ohne aktive Cookies werden die Captchas nicht erkannt!