Was sind minimierte und gepackte HTML, JS und CSS Datieien?

Wenn ein Besucher eine Webseite aufruft, werden Daten vom Server an den Suchenden übermittelt. Dies umfasst viele Dateien, unter anderem HTML-, JS- und CSS-Dateien. Viele dieser Dateien sind nötig, um die Webseite korrekt anzuzeigen und müssen geladen werden, bevor die Seite angezeigt wird.
Weiterhin kann ein Browser beim HTTP/1.1-Protokoll nur 5 Dateien pro IP-Adresse gleichzeitig abrufen. Dies ist beim HTTP/2-Protokoll nicht mehr der Fall. Die Verbreitung von HTTP/2 geht trotz grosser Vorteile nur sehr langsam voran. Stanberg hatte im März 2015 vorausgesagt, dass schon Ende des Jahres 2015 die Verbreitung einen Wert von über 10 Prozent erreicht haben und voraussichtlich im Jahr 2016 der grösste Teil bereits auf HTTP/2 ausgeliefert werden würde. Aktuelle Statistiken aus dem Jahr 2017 zeigen jedoch die langsam voranschreitende Verbreitung, die erst bei rund 12 Prozent liegt.
Solange die Server noch auf dem HTTP/1.1-Protokoll laufen, ist es sehr wichtig, möglichst wenige Dateien (Anzahl) und diese so klein wie möglich (Grösse) zu übertragen. Dadurch wird eine Webseite schneller übermittelt und dem Endbenutzer früher angezeigt.

Aus Abbildung lässt sich entnehmen, dass Google 98 Millisekunden benötigt, um die HTML-Seite auszuliefern. Anschliessend vergehen weitere 1,022 Sekunden, bevor die Webseite dem Besucher angezeigt wird, da weitere Dateien geladen und die Seite gerendert werden müssen. Google hat dabei noch einen sehr kleinen Waterfall (Aufzeichnung der Anfragen an den Webserver über Zeit) mit 15 Anfragen. Amazon als Vergleich benötigt 133 Anfragen!

Die Untersuchung

Um eine möglichst geringe Anzahl an Dateien zu erreichen, werden alle CSS-Dateien einer Seite in einer Datei gespeichert und diese minimiert (unnötige Absätze und Leerzeichen eliminiert). JavaScript(JS)-Dateien werden bestenfalls in zwei Dateien aufgesplittet. Eine JS-Datei wird im «Head» platziert und beinhaltet alle JS-Funktionen, welche direkt nötig sind, sobald die Webseite angezeigt wird (bzw. schon vorher). Die zweite JS-Datei wird im «Footer» platziert und beinhaltet alle restlichen Funktionen, welche meist spürbar nach dem Anzeigen der Webseite geladen und ausgeführt werden. Dies lässt sich nicht immer unproblematisch bewerkstelligen, im Notfall können alle JS-Dateien im «Head» als eine Datei platziert werden. Auch die JS-Dateien werden minimiert bereitgestellt.
Diese Optimierung hat grossen Einfluss auf die durchschnittliche Seitenladezeit. Die nicht optimierte Webseite lieferte 20 Dateien einzeln aus, welche anschliessend auf 3 Dateien reduziert werden konnten. Ein Abruf pro Datei dauert rund 350 ms. Dies ergibt bei 17 Dateien und 5 Dateien parallel 1,2 Sekunden unnötige Ladezeit.
Bei der Untersuchung war die Situation nach Tabelle gegeben.

	Ausgangslage	De-Optimierung am 12.10.2016	Optimierung am 24.11.2016
HTML-Dateien	Minimiert	Normal	Minimiert
JS-Dateien	1 (Head)	13 Dateien (Head)	1 (Head)
CSS-Dateien	1	6	1
Durchschnittliche Ladezeit	2.0 Sekunden	3.76 Sekunden	2.0 Sekunden

Der Test wurde auf einem HTTP/1.1-Server durchgeführt.
In Abbildung ist auf der linken Seite ersichtlich, wie viele Keywords-Seiten-Übereinstimmungen in den Top 100 vorhanden waren. Die Auswertung wurde über 33 Keywords-Seiten-Übereinstimmungen vorgenommen. Der Traffic blieb in dem Messzeitraum relativ stabil, weshalb Einfluss durch Traffic ausgeschlossen wird. Auf der rechten Seite der Abbildung ist der Verlauf der Rankings nach den Veränderungen zu sehen. Der nächste Messpunkt nach einer Veränderung wurde rot gekennzeichnet. Bei der Auswertung wird deutlich, dass nach dem De-Optimieren der Website die durchschnittliche Position bei Google nach rund 2 Wochen sank. Nach der erneuten Optimierung 6 Wochen später stiegen die Positionen im Ranking nach rund 2 Wochen wieder an, bei einer durchschnittlichen Steigerung um 4 Plätze.
Innerhalb des Beobachtungszeitraumes hat sich die Domain nicht komplett die alten Rankings zurückerobert. Dies kann jedoch auch an dem kürzeren Beobachtungszeitraum liegen. Nach der erneuten Optimierung fiel das Ranking kurzzeitig noch weiter ab. Es kann nicht abgeschätzt werden, wie tief das Ranking bei einem längeren Beobachtungszeitraum gefallen wäre. Der Trend zeigt jedoch eindeutig, dass die Minimierung der Ressourcen einen Einfluss auf das Ranking hat.
Ob eine Seite die Dateien gepackt und minimiert ausliefert, wird von Google mit dem PageSpeed Insights Tool ausgewertet. Ob diese Optimierung direkten Einfluss auf die Suchpositionen hat, oder diese nur auf die schnellere Ladezeit zurückzuführen sind, ist damit noch nicht geklärt. Betrachtet man die Resultate von Abschnitt 4.10 über die Ladezeit, kann man davon ausgehen, dass die Verringerung der Ladezeit zu diesem Ergebnis führte.

Aufwand

Für den Seitenbetreiber: Kein Aufwand

Für den Webagentur: Moderne CMS bieten die Möglichkeit, Ressourcen automatisch zu packen und zu komprimieren. Dies ist gerade bei JS-Dateien nicht immer einfach möglich. Aus diesem Grund muss eine Webagentur die Möglichkeiten sorgfältig prüfen. Zu erwartender Aufwand 2 bis 16 Stunden.

Erwarteter Effekt auf SEO: Gepackte Dateien schlagen sich automatisch auch auf die Übertragungsgeschwindigkeit und die Zeit nieder, bis eine Seite dem Besucher angezeigt werden kann. Diese Optimierung hatte mittleren Einfluss auf das Ranking. Das HTTP2-Protokoll löst das Problem mit dem Packen automatisch. Minimieren muss man die Seiten jedoch weiterhin.

Folgen bei Nichtbeachtung: Mehrere Dateien müssen übertragen werden. Diese Dateien sind grösser, als sie sein müssten. Google prüft dies genau nach. Ob ein Problem vorhanden ist, kann mit dem Google PageSpeed Insights Tool getestet werden.

Unsere Empfehlung

Für die Seitenauslieferung verwende lieber das HTTP/2-Protokoll.
Bei HTTP/1.1 Protokoll ist das Minimieren von HTML-, CSS- und JS-Dateien verwantwortlich für eine niedrige Ladezeit. Vernachlässige daher diese Optmierungsmassnahme nicht.

Die technische Umsetzung

Bei der Minimierung von Dateien geht es darum, Dateien möglichst klein zu übertragen. Generell werden dabei alle unnötigen Leerzeichen und Enter entfernt.
Beispiel für einen strukturierten Code:

Beispiel für einen minimierten Code:

Die Datei wird kleiner, aber der Code ist nicht mehr so übersichtlich. Diese Vorgehensweise nennt man Minimieren. Dies kann mit CSS-, JS- und HTML-Dateien durchgeführt werden.