SEO: Geschwindigkeitsoptimierung
Für einen Webentwickler gibt es neben der Tatsache, dass die Website gut aussehen muss, den Zwang eine gewisse Funktionalität bereitzustellen.
Hier für meine Website gilt dabei, dass ich diverse Rubriken angelegt und auf den dazugehörigen Übersichtsseiten dann Verweise zu den Unterseiten mit den Details hinterlegt habe. Natürlich ist meine Website nicht stark frequentiert, verglichen z.B. mit einem Online-Shop oder einem Newsportal. Trotzdem möchte ich unter Berücksichtigung, dass keine Abstriche bei den Features gemacht werden, die bestmögliche Performance für den User zu erzielen.
Für die Webentwickler sind deshalb Stichworte wie Minifying oder Combining an der Tagesordnung.
Ersteres beschäftigt sich dabei, die Inhalte von Dateien aufs minimalste zu reduzieren. Dies wird dadurch erreicht, dass z.B. im JavaScript-Code Variablennamen gekürzt werden, Leerzeilen entfernt oder auch Funktionsnamen abgeändert werden. So wird „unnötiger“ Ballast wie Zeilenumbrüche, Kommentare oder auch lange Namen, die den User eigentlich nicht interessieren sollten, zugunsten der geringeren Datenmenge aufgegeben.
Je nach Theme (z.B. hier bei WordPress), eigener Webseitenentwicklung (rudimentär, mit HTML, CSS, JavaScript) oder auch dynamischer Erzeugung durch ein CMS kann es vorkommen, dass mehrere Dateien mit gleichem Inhaltstyp erzeugt werden. Zum Beispiel eine JavaScript Datei mit „Hauptfunktionen“ und dann eine weitere je Thema oder genutzter/entwickelter Komponente. Jede Datei, sei es ein Bild, eine CSS oder JavaScript-Datei oder auch nur der Inhalt selber (HTML, ASPX, PHP, …) muss vom Browser abgerufen werden. Dafür müssen dann sogenannte Requests erzeugt werden. Grob kann man deshalb sagen, je mehr Requests, umso länger ist das Ladeverhalten. Zusätzlich spielen natürlich noch andere Faktoren (wie: „Liegt das alles auf der gleichen Domain“, Dateigröße, …) hier hinein, die das Laden zusätzlich noch verlangsamen könnten. Deshalb wird mit Combining versucht, die Anzahl an Dateien und damit der Requests zu reduzieren. JavaScript Dateien oder auch CSS Dateien werden deshalb in möglichst wenigen Dateien zusammengefasst. Hierfür gibt es sowohl Tools, die ein Webentwickler offline nutzen kann und für den Produktivbetrieb dann eine einzelne zusammengefügte CSS Datei erhält als auch Plugins, die so etwas „on-the-fly“, d.h. vor dem Ausliefern der Website an den User dynamisch erzeugen können.
Ich selbst nutze hier im WordPress dafür das Plugin „Autoptimize“. Mit diversen Optionen lassen sich hier Feineinstellungen wie HTML, JavaScript und CSS optimieren einzeln setzen. Ebenso war es in Verbindung mit meinem Theme notwendig, den JavaScript Code zwingend im <head>-Bereich des HTML Codes unterzubringen. Leider ist es durch die Kategorie-Auswahl auf der „Neuigkeiten“-Seite, also dem eigentlichen Blog, notwendig geworden, die JavaScript Komprimierung komplett zu deaktivieren. (geändert 12.07.2015)
Durch die Nutzung dieses Plugins konnte ich in Verbindung mit dem „WP Super Cache“ erreichen, dass nach erstmaligem Laden der „Basisdateien“ nahezu keine Datenlast mehr übertragen werden muss. Klar, eine Verbindung zum Prüfen, ob neuere Inhalte vorliegen wird schon aufgebaut, aber eine wirkliche Nutzdatenlast existiert nicht.
In Zahlen (gemessen mit Firebug):
- Erstes Laden der Startseite (Text, Bilder, etc.): 645,1 KB alt, 980,6 KB neu
- wiederholtes Laden der Startseite (durch Reload Button): 318 Byte
- wiederholtes Laden der Startseite (via Link): 0 KB
Laden einer anderen Seite: 187,2 KB in Total, davon kamen 74,3 KB aus dem Cache –> fast 40 % Datenmenge musste nicht nochmal übertragen werden
Laden einer anderen Seite mit nur Text (z.B. Neuigkeiten): 528,8 KB, 516,3 KB aus dem Cache –> fast 98 % der Datenmenge liegt im Browser-Cache vor und muss nicht erneut übertragen werden- JavaScript Dateien: 456,2 KB (ohne Optimierung) und nur 121,8 KB mit Optimierung
Letztlich hat die Deaktivierung der JavaScript-Code Optimierung dazu geführt, dass beim ersten Aufruf viel mehr Datenlast übertragen werden muss. Dies wird damit zusammenhängen, dass erstens mehr Dateien und zweitens die ganzen Zeilenumbrüche und Leerzeichen Overhead Datenmenge erzeugt haben.
Natürlich wäre es mit Optimierung schöner, aber hier gehen die Funktionen bzw. die Funktionalität der Website vor. Letztlich ist nur der erste Aufruf langsamer, danach sieht man an Punkt 4, dass die Daten aus dem Browser-Cache kommen (dank „WP Super Cache“) und keine erneute Übertragung stattfindet. Somit ist es egal, ob bei nachfolgenden Aufrufen weniger oder mehr an Datenlast übertragen werden muss, da die Übertragung erst gar nicht notwendig wird.
(ergänzt/geändert am 12.07.2015)