Wie kann man die Seite beschleunigen?
Ladezeiten verbessern - Teil 8 - mootools deaktivieren
- Details
- Erstellt am Freitag, 02. April 2010 20:25
- Zuletzt aktualisiert am Donnerstag, 03. Juni 2010 07:18
"Deaktiviere unter Joomla! die mootools für die Startseite", so lautet Tipp, der dafür sorgt, dass die Startseite schneller geladen wird. Das klappt für die mootools.js und die caption.js z. B. mit folgenden Skript nach dem <head>-Tag in der index.php des Templates:
...
<head>
<?
// Remove mootools.js and caption.js on StartPage
$menu =& JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
$headerstuff = $this->getHeadData();
unset ($headerstuff['scripts'][$this->baseurl . '/media/system/js/mootools.js']) ;
unset ($headerstuff['scripts'][$this->baseurl. '/media/system/js/caption.js']) ;
$this->setHeadData($headerstuff);
}
?>
<jdoc:include type="head" />
...
Das Skript deaktiviert die mootools nur auf der Startseite. Wenn Ihr Gallerien jenseits der Startseite eingebunden habt, so werden die mootools beim Wechseln auf eine andere Seite geladen. Die Gallerien laufen.
Nutzt Ihr Templates, die keine JavaScript Effekte der mootools einsetzen oder auch Erweiterungen, die darauf verzichten, so ist es durchaus denkbar die mootools für das Frontend komplett zu deaktivieren. Hierzu findet man auch wieder ein paar Beispiele. Fügt den folgenden Code an der gleichen Stelle ein (nach dem <head>-Tag der index.php des Templates):
...
<head>
<?
// Remove mootools.js and caption.js for Guests
$user =& JFactory::getUser();
if ( $user->guest ) {
$menu =& JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
$headerstuff = $this->getHeadData();
unset ($headerstuff['scripts'][$this->baseurl . '/media/system/js/mootools.js']) ;
unset ($headerstuff['scripts'][$this->baseurl. '/media/system/js/caption.js']) ;
$this->setHeadData($headerstuff);
}
}
?>
<jdoc:include type="head" />
...
Beachtet, dass ab jetzt auch manche Lightboxen (so z. B. die Popups in der JoomGallery) oder auch der "Simple MooTicker" nicht mehr funktionieren. Probiert alles mal durch und schaut ober Ihr mit diesen Einschränkungen leben könnt.
Weitere Infos im Web zum Thema mootools deaktivieren
mootools entfernen
- mootools.js und caption.ja aus Joomla! entfernen ... beim Frontend Editor aktiviert lassen (http://www.gn-webdesign.de/joomla-tutorials/mootools-caption-joomla-entfernen.html)
- Schnellere Ladezeiten durch Ausschalten von mootools (http://www.joomla-user-group-hessen.de/anpassen/26-schnellere-ladezeiten-durch-ausschalten-von-mootools.html)
Ladezeiten verbessern - Teil 9 - CSS nach vorn, JavaScript nach hinten
- Details
- Erstellt am Freitag, 02. April 2010 20:25
- Zuletzt aktualisiert am Donnerstag, 13. Mai 2010 21:50
|
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.
