Michael: Style und Skript

In genau DER Reihenfolge! Google bewertet eine Internetseite unter verschiedensten Gesichtspunkten. Damit ist jetzt nicht SEO gemeint, um einen möglichst hohen PageRank zu erhalten. Es gibt auch Kriterien, die vom Kontext der Seite unabhängig sind und sich an technischen Größen ausrichten. Dazu gehört auch die Ladegeschwindigkeit der Seite.

Moderne Webbrowser laden mehrere Seiteninhalte parallel um diese möglichst schnell zu erhalten und die Seite aufbauen zu können. Integraler Bestandteil jeder Seite sind Style-Dateien (.css) und Skripte (.js). Diese werden zumeist in dem <head>-Teil des Seitenquelltextes angegeben. Fügt man mehrere dieser Dateien in gemischter Reihenfolge ein, so verlangsamt sich künstlich Seitenaufbaugeschwindigkeit, da der Browser zuerst versucht alle Style-Informationen zu lesen, und anschließend alle Skripte auszuführen. Verweist man zuerst auf alle Style Dateien und anschließend auf die Skripte, können die beiden Dateigruppen jeweils vollständig parallel geladen werden und in optimaler Reihenfolge ausgeführt werden, ohne das nochmal eine CSS Datei geladen werden muss nachdem bereits alle Skripte geladen wurden.

Warum ist das so? JavaScript kann CSS Elemente Refferenzieren. In CSS hingegen kann man kein JavaScript sprechen. Wenn ich in CSS Datei 2 Elemente definiere, die ich nach Script 1 lade, kann ich Script 1 nicht ausführen, weil in CSS2 eventuell weitere betreffende Elemente definiert werden. Wenn aber alle CSS Informationen geladen und somit bekannt sind, kann ich die JavaScript-Dateien direkt nach dem Laden auch ausführen.

In WordPress hat man keine direkte Möglichkeit Einfluss darauf zu nehmen, in welcher Reihenfolge die einzelnen Plugins geladen werden und ihre Script- und Style-Informationen in den Seitenheader schreiben. Hier hilft ein bisschen PHP Code und ein Plugin von Satya Prakash. Nachdem der Seitenkopf komplett bestimmt wurde, geht das Plugin noch mal durch die Reihenfolge der Dateien und sortiert alle JavaScript-Referenzen nach den CSS Dateien an.

Allesblog#css#google#JavaScript#Page Speed#plugin#wordpress