Tag Archives: Footer

WordPress schneller machen #1: JavaScripts in den Footer

Ich schreibe jetzt in unregelmäßigen Abständen über meine Erfahrungen bei der Geschwindigkeitsoptimierung von WordPress.

Heute: JavaScripts vom Header in den Footer verschieben.

Zu viele JavaScripte können das Laden der Seite verzögern. Das liegt offenbar daran, daß Browser nicht mehr als 2 Dateien gleichzeitig von der gleichen Adresse downloaden können (sollten). Das kann man sehen, wenn man mehrere größere Downloads vom gleichen Server durchführt…mehr als 2 gehen nicht. Wenn wir uns den HTML-Quelltext unserer WordPress-Seite ansehen, bemerken wir darin fast immer recht viele Links zu JavaScript-Dateien. (bei mir sind es 19!) Mehr als 2. Jedes Plugin scheint sein eigenes JavaScript mitzubringen…das muß dann natürlich auch immer geladen werden. Alle diese JS-Dateien liegen auf demselben Server (nämlich meinem), also sagt die obige Regel “Haaaaalt…mehr als 2 sind verboten”. Das macht die Seite dann doch etwas langsamer. Verschärfend kommt hinzu, daß die Aufrufe immer im Header zu passieren scheinen…unser wertvoller, wohlformulierter INHALT muß warten, bis alles da ist!

Abhilfe: Alle JavaScript-Links vom Header in den Footer verschieben…dann kann man schon mal die ersten paar Zeilen des Inhalts lesen, während im Hintergrund unbemerkt noch JavaScript lädt.

Dazu gibt es, wie immer natürlich, Plugins.

Bei der Suche habe ich zuerst dies hier gefunden:

JavaScript to Footer

Super-einfach gebaut mit 6 Zeilen PHP. 3x remove_action(‘wp_head’) und 3x add_action(‘wp_footer’). Funktioniert. Aber…ääähhhh…Momentn…wo ist jetzt mein schöner Header-Slider mit Ken-Burns-Effekt abgeblieben? Der ist WEG!

Das liegt daran, daß der Slider JavaScript braucht, um zu funktionieren…nämlich unseren beliebten Multi-Werkzeugkasten jQuery! Wenn jQuery im Footer geladen wird, kann der Header, der davon abhängig ist, nicht funktionieren! Wir brauchen also ein anderes Plugin mit der Möglichkeit, jQuery im Header zu belassen und alles andere nach unten zu schieben. Und siehe da, das gibt es wirklich 🙂

Scripts to Footer

Nach Installation dieses Plugins geht man dann auf Einstellungen -> Scripts to Footer und kreuzt unten noch “Keep jQuery in Header” an.

Fertig! Die Seite ist jetzt schneller 🙂

Demnächst mache ich sowas ähnliches mit den CSS-Dateien…