Page Speed Optimierung – so einfach klappt es


Page Speed Optimierung

So klappt es mit einer schnelleren Webseite – 9 Tipps, um die Ladegeschwindigkeit zu verbessern

Warum sollte man die Ladezeit einer Webseite verringern?

Es gibt mehrere Gründe warum die Ladezeit einer Webseite möglichst gering sein sollte. Die Seitenladezeit ist ein Google Ranking Faktor und hat somit Einfluss auf die Positionierung in den Google Suchergebnissen. Des Weiteren werden langsam ladende Webseiten von Google nicht so häufig gecrawlt, oder es werden weniger Unterseiten pro Crawl besucht, da dem Google Bot nur ein bestimmtes Crawl Budget zur Verfügung steht. Somit verschwenden langsame Ladezeiten einen Teil Ihres Crawl Kontingentes, weshalb die Wahrscheinlichkeit höher ist, dass die indexierte Version Ihrer Webseite nicht die aktuellste ist.

Doch der wichtigste Grund die Ladezeit zu verringern ist der User. Laut einer Studie von KissMetrics erwarten fast 50% der Internetnutzer, dass eine Webseite in 2 Sekunden oder schneller lädt und sogar jeder Vierte verlässt eine Webseite, wenn diese nicht innerhalb von 4 Sekunden geladen wird. Mit einer langsamen Ladezeit verliert die Webseite jedoch nicht nur Besucher, denn laut der genannten Studie hat die Geschwindigkeit einer Webseite auch Einfluss auf die Conversion Rate. Eine Verzögerung in Ladezeit um nur 1 Sekunde, kann die Conversion Rate um 7% verringern.

1. Bilder optimieren

Die erste und eventuell auch einfachste Maßnahme ist die Größe der Webseite zu verringern, sodass beim Laden der Seite weniger Bytes heruntergeladen werden müssen. Oftmals sind es insbesondere Bilder und Videos, die viele Bytes zum Laden benötigen und somit die Webseiten Ladegeschwindigkeit verringern. Um die Anzahl der zu ladenden Bytes möglichst gering zu halten empfehlen wir die Nutzung eines der gängigen Tools, die entwickelt wurden um Bilder ohne grafische Verluste zu komprimieren. Manche CMS Systeme, so wie WordPress, haben eine Erweiterung mit dessen Hilfe man Bilder komprimieren kann. Ansonsten gibt es die Möglichkeit externe Tools, wie beispielsweise Gimp oder Compressor.io, zum Komprimieren von Bildern zu nutzen.

Generell gilt es nur die Bilder und Videos zu nutzen, die für die Webseitengestaltung sinnvoll sind. Hochwertige Grafiken sollten dabei im JPEG Format Verwendung finden. Bei Bildern die kleiner als 10×10 Pixel sind, kann auch auf das GIF Format zurückgegriffen werden.

2. HTML und JavaScript minifizieren

Um die herunterzuladende Anzahl an Bytes weiter zu reduzieren, ist es ebenso ratsam die Größe von CSS-, HTML- und JavaScript-Code zu verringern. Da der Code von Maschinen und nicht von Menschen gelesen wird, ist es unnötig den Code möglichst übersichtlich zu gestalten. So kann man beispielsweise schon durch das Weglassen von Leerzeichen und Zeilenumbrüchen einige Bytes beim Laden sparen. Bei der Minifizierung des Codes sind Tools wie minifier.org hilfreich.

3. Antwortzeit des Servers verbessern

Unter Antwortzeit des Servers versteht man die benötigte Zeit, die es dauert, bis die erforderlichen HTML-Dateien geladen werden, um das Rendering der Seite vom Server zu starten. Es kann jeweils Abweichungen von einem Laden der Webseite zum nächsten Mal geben, aber diese Unterschiede sollten nicht groß sein. Wenn dies doch der Fall ist, kann das auf ein Problem mit dem Server hinweisen.

Es wird generell empfohlen die Antwortzeit des Servers auf unter 200ms zu reduzieren. Es gibt viele verschiedene potentielle Faktoren, die die Reaktion des Servers verlangsamen, wie beispielsweise langsame Datenbankabfragen, CPU-Ressourcenmangel oder Speicherplatzmangel.

Es ist zunächst einmal wichtig, die genaue Antwortzeit des Servers zu messen. Erst dann kann nach der genauen Ursache einer langsamen Server Antwortzeit geforscht werden, um diesezu beheben. Anschließend ist es wichtig die Server Antwortzeit regelmäßig zu überprüfen und gegebenenfalls Alerts für erhöhte Antwortseiten einzurichten.

4. CSS Sprites nutzen

CSS Sprites, auch Image Sprites genannt, sind eine Methode, um eine Handvoll Bilder in einer einzigen größeren Bilddatei zu kombinieren. Es erscheint zunächst nicht unbedingt logisch, dass das Generieren einer einzigen großen Datei, statt mehrerer kleiner Dateien, die Ladezeit verkürzen soll. Die Idee dahinter ist aber, dass sich die Anzahl der Anfragen bei einer einzelnen größeren Datei gegenüber mehreren kleinen Dateien verringert. Der Computer muss also nicht jeweils die einzelnen kleinen Dateien vom Server holen, sondern nur einen Rundgang zwischen dem Server auf dem die Webseite gehostet ist und dem Server auf dem das einzelne Bild zu finden ist, erledigen. Auf diese Weise kann also bereits Ladezeit eingespart werden, da jeder dieser Wege ein bisschen Zeit in Anspruch nimmt. Daher gilt: Je mehr dieser Rundgänge ausgeführt werden, desto länger dauert das Laden Ihrer Seite.

Ein Tool um schnell und einfach CSSSprites zu generieren ist der Generator von Toptal.

5. Above-the-Fold Content priorisieren

Der Begriff Above-the-Fold stammt ursprünglich aus dem Zeitungsdruck und bezeichnet den Abschnitt einer Zeitung der zu sehen ist, wenn diese gefaltet auf der Titelseite liegt. In diesem Abschnitt ist grundsätzlich das Top Thema des Tages zu sehen, oftmals mit Überschrift und Bild. Dieser Ausschnitt ist der, den Sie sehen, wenn Sie eine Zeitung kaufen.

Im Web Design bezeichnet Above-the-Fold ein ganz ähnliches Konzept, nämlich den Abschnitt den ein Webseiten Besucher zu sehen bekommt, bevor das erste Mal gescrollt wird. Dabei ist dieser Abschnitt davon abhängig mit welchem Endgerät der User auf die Seite zugreift.

In den letzten Jahren ist die Nutzung von mobilen Endgeräten immer weiter gestiegen und in Bezug auf Ladezeit bei diesen Devices, ist das Above-the-Fold Konzept besonders wichtig. Das Laden einer Webseite mit dem Handy dauert oftmals länger, als auf dem Desktop. Hinzu kommt, dass viele Seitenbesucher eine Webseite schnell wieder verlassen, lädt diese auf ihrem Handy nicht bereits nach wenigen Sekunden.

Das Above-the-Fold Konzept sieht vor, eine Webseite gestaffelt zu laden und dabei den Inhalt zu priorisieren, der dem Benutzer ohne zu scrollen angezeigt wird. So kann der Nutzer den ersten Abschnitt einer Webseite schneller sehen und der Rest der Seite, der vor dem Scrollen nicht sichtbar ist, wird nachgelagert geladen.

Dies erwirkt zwar keine absolute Reduzierung der Ladezeit, hilft aber die Absprungrate möglichst gering zu halten, da der Nutzer schneller mit der Seite interagieren kann.

Welche Ressourcen als Above-the-Fold gelten und daher priorisiert geladen werden müssen, ist dabei von Webseite zu Webseite unterschiedlich.

6. Anzahl an HTTP-Anfragen reduzieren

Laut einer Studie von Yahoo wird etwa 80% der Ladezeit von Seiten damit verbracht, aus verschiedenen Quellen einzelne Teile der Webseite herunterzuladen.

Da eine HTTP-Anfrage für jedes Element gemacht werden muss, gilt: Je mehr Elemente eine Seite besitzt, desto länger dauert es die Webseite zu rendern.

In diesem Fall ist der schnellste Weg zur Verbesserung der Ladegeschwindigkeit, die Anzahl der HTTP-Anfragen zu reduzieren. Die Anzahl der Anfragen kann man mit Hilfe von mehreren Techniken, wie beispielsweise CSS Sprites und Stylesheets, reduzieren.

Es ist jedoch auch ratsam zu schauen, welche Elemente auf der Webseite wirklich gebraucht werden und auf welche man eventuell verzichten kann. So gibt es beispielsweise einige Plug-Ins, Bilder oder Skripte die nicht dringend benötigt werden. Der Verzicht auf diese Ressourcen kann hier dann eine Verbesserung der Ladegeschwindigkeit Ihrer Seite bedeuten.

7. Anzahl der Weiterleitungen reduzieren

Weiterleitungen in jeglicher Form sind ebenso HTTP-Anfragen und können daher auch die Ladegeschwindigkeit erhöhen. Daher ist es ratsam die Anzahl an Weiterleitungen so niedrig wie möglich zu halten. Die Verzögerung der Ladegeschwindigkeit pro Weiterleitung ist recht gering, aber besonders bei vielen Weiterleitungen oder Weiterleitungsketten leidet die Seitenladegeschwindigkeit. Bei jeder Weiterleitung wird eine neue HTTP-Anfrage gestellt, da eine neue URL aufgerufen werden muss.

Um Weiterleitungen zu vermeiden, sollte die Webseite regelmäßig gecrawlt werden und kaputte interne Links herausgefiltert werden, um das Linkziel anzupassen. Dies ist besonders bei der Homepage wichtig.

8. Browser Caching aktivieren

Beim Browser Caching speichert der Browser statische Komponenten, wie Bilder und CSS-Dateien, für einen festgelegten Zeitraum im lokalen Speicher zwischen. Bei einem erneuten Besuch der Webseite reduziert sich so die Anzahl der notwendigen Serveranfragen drastisch, da vieles schon vom vorherigen Besuch zwischengespeichert ist und die Seite daher erheblich schneller lädt. Die reduzierte Ladegeschwindigkeit erhöht den Komfort für User und auch Suchmaschinen ordnen die höhere Ladegeschwindigkeit als vorteilhaft ein.

Der Browsercache funktioniert allerdings nur dann korrekt, wenn am Webserver entsprechende Regeln bzw. ein Ablaufdatum für die einzelnen Dateitypen festgelegt wird. Diese „expire“ Regel teilt dem Browser mit, wie lange die Dateien gespeichert werden können. Für statische Ressourcen ist es daher ratsam ein Datum in ferner Zukunft, etwa 1 Jahr zu nehmen, da für wiederkehrende Nutzer das erneute Laden der Webseite in dem angegebenen Zeitraum deutlich schneller geschieht.

Um Browser Caching zu aktivieren ist es nötig die .htaccess Datei zu modifizieren. Dieser Schritt sollte am besten zusammen mit dem technischen Support Ihrer Webseite unternommen werden.

9. Crawl Auffälligkeiten untersuchen

Bei vielen Tools mit denen man die Webseitengeschwindigkeit überprüfen kann gibt es eine Art Waterfall-Diagramm, das veranschaulicht wie und in welcher Reihenfolge die einzelnen Elemente der Webseite geladen werden. Anhand einer Zeitachse kann man nachvollziehen wie genau sich das Laden der Webseite zusammensetzt, welche Ressourcen als erstes bzw. letztes geladen werden und welche Ressourcen besonders lange zum Laden brauchen. Die Zeit die jede Ressource benötigt ist dabei untergliedert in verschiedene Abschnitte wie etwa DNS Lookup, Warten oder Laden.

Es benötigt zwar ein bisschen Übung um genaue Erkenntnisse aus diesen Grafiken zu gewinnen, aber es lassen sich damit gezielt Elemente identifizieren, die die Ladegeschwindigkeit übermäßig negativ beeinflussen.

Page Speed Test

10. Fazit

Abschließend lässt sich sagen, dass die Reduktion der Ladezeit für Webseiten sehr stark vom Einzelfall abhängt, man jedoch besonders wenn man mit der Optimierung anfängt, schnell messbare Erfolge erzielen kann. Vor allem die Reduzierung der herunterzuladenden Bytes, beispielsweise durch das Komprimieren von Bildern und die Reduzierung der HTTP-Anfragen, kann die Ladezeit Ihrer Webseite deutlich beschleunigen.

Schreibe einen Kommentar

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.