WordPress Probleme (Teil 1) – Plugins
Wer kennt es nicht? Da hat man sich ein frisches WordPress Blog aufgesetzt und hat Freude das es so schnell läuft und auf Anhieb alles funktioniert.
Da aber nicht jeder einfach so ein 0815 Blog haben will, installiert man sich zuerst ein anderes Theme und begibt sich dann auf eine Webseite und liest einen Artikel dessen Titel “100 Must Have WordPress Plugins & Hacks” ist. Man entscheidet sich für ein paar Plugins und installiert schlussendlich ein Plugin für die Live Validierung von Formularen, eines für den “sliding”-Effekt in der Navigation, das Plugin für die Share Icons darf auch nicht fehlen den wenn die nicht animiert sind klickt ja niemand drauf ;), der Preloader für die Bilder schaut auch gut aus und das Plugin um Kommentare mit AJAX einzufügen darf auf keinen Fall fehlen.
Nach der Installation und Konfiguration der Plugins kommt dann aber die Ernüchterung.. das Blog ist nicht mehr schnell sondern das Gegenteil davon. Ok.. vielleicht nicht das Gegenteil von Schnell aber das Blog ist langsamer geworden.
Was zum Henker ist passiert?
80% der installierten Plugins benötigen Javascript Code welcher sich in einer eigenen Datei befindet und für das Styling gibt es zustätlich auch noch eine CSS Datei welche eingebunden werden muss.
2 zusätzliche externe Dateien welche eingebunden werden müssen sind nicht das Problem sondern das Problem liegt darin das wenn man 5 solcher Plugins installiert hat bis zu 10 externe Dateien eingebunden werden müssen und das noch grössere Problem liegt darin das viele Entwickler diese Dateien im <head> einbinden. Es ist nicht falsch Javascript Dateien im <head> aufzurufen aber es ist auch nicht ganz richtig.
Webseiten werden nicht kompiliert und ausgegeben sondern prozedual von oben nach unten verarbeitet und im Browser ausgegeben. Was viele Entwickler nicht zu wissen scheinen ist das die meisten gängigen Browser nur 2 Dateien parallel von einer Domain laden können (Wer es nicht glaub kann dies hier in der HTTP 1.1 Spezifikation nachlesen ;)). Hat man also 10 externe Dateien im <head> eingebunden werden 2 Dateien geladen und danach wird eine neue HTTP Abfrage gestartet und die nächsten 2 Dateien werden geladen. Bei 10 Dateien sind das 4 zusätzliche HTTP Abfragen welche natürlich Zeit kosten. Da der Browser, wie oben erwähnt, Webseiten von oben nach unten verarbeitet verlängert sich die Zeit bis der der Besucher den Inhalt im <body> sieht um bis zu einige Sekunden (je nach Anzahl der zu ladenden Dateien) weil zuerst die externen Dateien geladen werden.
Bindet man jedoch die Javascripts als vor dem </body> Element ein, kann der Inhalt der Webseite geladen und gerendert werden bevor die Javascripts geladen sind. Der Besucher kriegt also schon was den Inhalt lesen bevor die ganzen Javascripts überhaupt geladen sind. Es macht zb. gar keinen Sinn das Javascript für die Live-Formularvalidation zu laden bevor das Formular geladen wurde.. das gleiche gilt für die Animation von HTML Elementen. Bevor das HTML nicht geladen ist kann auch nichts animiert werden. (Hier ein gutes Beispiel wie eine der Quellcode eine Webseite aussehen sollte.)
Die Lösung des Problems ist also, externe Javascript Dateien am Ende vor dem </body> einzubinden und somit dem Browser zu ermöglichen den Inhalt zuerst zu laden. Simpel und effektiv
Doch wie kann dieses Problem bei WordPress Plugins gelöst werden?
In dein meisten WordPress Plugins wird eine Funktion erstellt in der die benötigten 2 Dateien (Javascript und CSS) eingebunden werden. Hier ein mögliches Beispiel einer solchen Funktion:
1 2 3 4 5 6 7 | function foo() { echo '<link rel="stylesheet" href="..../style.css" type="text/css" media="screen" />'; echo '<link rel="stylesheet" href="..../functions.js" type="text/javascript" />'; // oder auch so wp_enqueue_script('scriptaculous'); } add_action('wp_head', 'foo'); |
Mit der WordPress Funktion add_action(‘wp_head’, ‘foo’); wird bewerkstelligt das die Funktion foo(); ausgeführt wird wenn in deinem header.php Template die Funktion wp_head(); ausgeführt wird.
Der Fehler hierbei ist, dass CSS Dateien im <head> geladen werden sollten, Javascripta jedoch vor dem </body> Tag also wenn die Funktion wp_footer(); aufgerufen wird.
Die Lösung
Um das Problem korrekt zu lösen müssten im Plugin 2 Funktionen erstellt werden. Eine Funktion um das CSS zu laden und eine welche das Javascript lädt. Einbisschen mehr Code aber dafür stimmt der Output und die Performance der Seite wird besser.
Hier ein Beispiel:
1 2 3 4 5 6 7 8 9 | function write_css() { echo '<link rel="stylesheet" href="..../style.css" type="text/css" media="screen" />'; } add_action('wp_head', 'write_css'); function write_js() { echo '<link rel="stylesheet" href="..../functions.js" type="text/javascript" />'; } add_action('wp_footer', 'write_js'); |
Schlusswort
Wie man unschwer erkennen kann, wäre es eigentlich keine Hexerei WordPress einwenig besser zu machen, zumindest was die Performance-Optimierung angeht. Ich verstehe nicht warum es in WordPress keine vorgefertigten Funktionen für dieses Problem bereitstellt. Aber was nicht ist, kann ja noch werden
Meine Lösung erhöht die Geschwindigkeit des Blogs nicht massiv aber doch einwenig, aber mehreren solch kleinen Optimierungen kann schlussendlich doch einiges an Geschwindigkeit rausgeholt werden.
Ich hoffe das die Entwickler von WordPress sich wieder mal der Funktions Referenz annehmen und diese optimieren und erweitern damit gewisse oft verwendeten Funktionen nicht immer und immer wieder neu geschrieben werden müssen.
In meinem nächsten Artikel werde ich erklären wie man die Anzahl der HTTP Anfragen um minimum die Hälfte halbieren kann und somit wieder etwas an Geschwindigkeit gewinnen kann.