WordPress JavaScript asyncron laden

Javascript-Dateien haben oft gleich mehrere Nachteile. Sie sind zum einen oft recht groß, und zum Anderen liegen sie oft auf langsamen Servern. Beides führt dazuu, dass sich eine Seite langsam aufbaut, weil sie mitunter mit dem Rendern, also dem Seitenaufbau, auf die Scripte warten muss. Das ist natürlich suboptimal, weil der Besucher natürlich in erster Linie die Inhalte sehen möchte, und die Scripte ihn eigentlich gar nicht interessieren. Für den User wäre es besser zuerst alle Inhalte zu bekommen. Derweil kann er sich schon mal einen Eindruck verschaffen, während der Browser dann die Scripte nachläd.

Wofür sind die JavaScripte?
JavaScripte haben durchaus ihre Berechtigung. So erzeugen Scripte wie JQuery graphische Effekte und sind nötig damit Slider oder Gallerien überhaupt funktionieren. Oder sie blenden Werbung ein; nicht unwichtig um den Blog zu monetarisieren. Andere Scripte erzeugen Links im Content auf passende weiterführende Artikel. JavaScript ist also schon nützlich, um die Seite mit zusätzlichen interaktiven Elementen oder mit Animationen zu erweitern. Aber die Reihenfolge muss stimmen. Man braucht die grafischen Funktionen erste wenn die Grafiken geladen sind. Aber das kann man einstellen.

JavaScript asyncon laden
Viele JS-Dateien sind im Header eingetragen. Man muss die JavaScriptdateien nicht als Erstes Laden. Es würde genügen, wenn man erst, wenn die Seite komplett da ist, die Scripte läd. Das Zauberwort heißt asyncrones Laden. Die Scripte warten dann bis s Zeit ist für sie zu laden. Das kann man erreichen indem man in den Aufruf des Scriptes den kleinen Zuatz „async“ hinzufügt. Aus dem Aufruf
<script type=’text/javascript‘ src=’http://www.wp-ratgeber.de/ …jquery,js’>
wird somit
<script async type=’text/javascript‘ src=’http://www.wp-ratgeber.de/ …jquery,js’>

JavaScripte in Plugins
Das Wörtchen async einfügen wäre an sich kein Problem, doch viele Scripte werden vom Theme, oder von Plugins geladen. Hier hat man schon ein Problem den Aufruf des Scrips zu finden. Diese sind nicht im Header eingetragen, sondern werden erst beim Aufruf der Seite eingefügt. Aber auch hier gibt es eine Lösung, und zwar in Form eines kleinen Plugins. Installieren Sie einfach das Plugon „Asynchronous Javascript“ – das war es schon. Das Plugin schnappt sich alle Scripte und packt sie in eine Asyncron-Funktion.

Der Pagespeed ist durch dieses kleine Plugin gleich wieder um +2 geklettert.