Die besten Tipps zur SEO-Page-Speed-Optimierung

von Timo Abid

Die drei Ladephasen

Es gibt drei Phasen, in denen es beim Laden einer Seite zu Performance-Engpässen kommen kann:

  1. Die Server-Antwortzeit (Zeit bis zum ersten Byte): Wenn eine Seite aufgerufen wird, dann muss der Server die Anfrage beantworten. Ein Server wird im Hintergrund Daten zusammentragen und sie, sobald fertig, zurück an den Browser schicken. Die Zeit zwischen Anfrage und Antwort bis zum ersten Byte sollte dabei laut Google nicht mehr als 1,3 Sekunden
  2. Die Größe des Dokumentes: Je größer das HTML-Dokument, desto länger dauert auch die Übertragung der Daten zwischen dem Server und dem Client (Browser oder Spider, zum Beispiel Googlebot). Die Größe des Gesamtdokumentes liegt im Idealfall bei unter 500 KB.
  3. Die Anzahl der Unteranfragen: Die meisten HTML-Dokumente laden viele weitere Dateien nach. Seien es CSS-Stylesheets, JS-Dateien, Bilder, Videos etc. Moderne Webseiten haben manchmal Dutzende von Megabyte an Daten, die der Besucher erst noch nachladen muss. Dies bietet sehr viel Optimierungspotenzial. Die durchschnittliche Zahl der Unterabfragen liegt im Idealfall bei unter 50.

Bildunterschrift: Der klassische Ablauf bei einer Anfrage und Serverantwort.

Alles in allem sollte der Ladevorgang einer Seite mit allen Unterabfragen unter 3 Sekunden betragen, smileydenn je länger dies dauert, desto wahrscheinlicher ist es, dass der Besucher abbricht.

 

Googles eigene Forschung hat zutage gebracht, dass bei einer Steigerung der Ladezeit, die Absprungrate immer weiter ansteigt:

Quelle: Think with Google, Source: Google/SOASTA Research, 2017.

Für alle drei Ladephasen gibt es Verbesserungsmöglichkeiten:

Phase 1: Optimieren bis zum ersten Byte

Der Client stellt eine Anfrage. Der Server muss so schnell wie möglich antworten. Wie lässt sich die Zeit bis zur Übertragung des ersten Bytes reduzieren?

Caching auf dem Server

Ob die Serverhardware schnell ist, spielt heutzutage oft eine untergeordnete Rolle. Bei vielen Websites werden Daten eher live aus einer Datenbank abgefragt, zum Beispiel durch Wordpress und andere datenbankbasierte Content-Management-Systeme.

Je nach Struktur und Umfang der Daten dauert dies in jedem Fall deutlich länger, als einfach nur eine statische HTML-Datei auszuliefern. Hier hilft das sogenannte serverside caching. Das Ergebnis der Datenbankanfrage wird dabei nicht bei jeder Anfrage neu ermittelt, sondern in einem bestimmten Zeitraum nur einmal, zum Beispiel einmal in der Stunde/am Tag/in der Woche. Dann wird es in einer Datei zwischengespeichert und muss nur noch von der „Festplatte“ gelesen werden.

Das serverseitige Caching kann das Laden einer Webseite um den Faktor 1.000 oder mehr beschleunigen. Alle Open Source-Systeme bieten entsprechende Plugins. Der Einsatz ist unbedingt zu empfehlen. Starke Performancezuwächse sind garantiert.

Hostingtyp und -anbindung

Schon die Auswahl des Hostingproviders kann über die Ladegeschwindigkeit entscheiden. Das sog. shared hosting, also das Hosten von vielen Kunden auf einem Server, kann die Geschwindigkeit maßgeblich beeinflussen. Es ist zwar nicht grundsätzlich davon abzuraten, allerdings sollte jeder, der seine Website in so einer Umgebung betreibt, regelmäßig Performance-Tests durchführen, um die Geschwindigkeit stets im Auge zu behalten.

Es können täglich neue Kunden hinzukommen und Probleme verursachen, die dann alle anderen Kunden auf dem Server mit ausbaden müssen. Deutlich ruhiger schläft, wer von vornherein seine Website auf einem dedizierten Server (oder wenigstens auf einer dedizierten virtuellen Instanz) betreibt.

Es empfiehlt sich, falls möglich, vor der Hosterwahl bzw. der Festlegung auf einen Hoster eigene Tests zu machen.

CDN steht für Content-Delivery-Network

Von woher kommen die Besucher der Website? Kommen Sie hauptsächlich aus einem Land, dann sollte dort auch die Website gehostet werden. Besuchen die Website Menschen aus aller Welt, dann reicht dies nicht aus. Für solche Fälle gibt es Content-Delivery-Netzwerke.

Das sind Serverfarmen, die auf der ganzen Welt platziert sind und einzig und alleine die Aufgabe haben, Seiten so schnell wie möglich an einen Besucher auszuliefern, je nachdem wo dieser gerade ist.

Der eine Besucher sitzt gerade im Büro in Hamburg, der nächste in einem Café in Sydney und wieder ein anderer in seinem Wohnzimmer in Rio de Janeiro. Wenn das Geschäftsmodell wirklich international ist, dann ist die Verwendung eines CDNs unumgänglich.

Empfehlenswerte Anbieter:

Je nachdem von wo der Request kommt, kann ein CD-Netzwerk jeweils die Anfrage über den regional nächsten Server ausliefern.

Redirects reduzieren

Umleitungen können sehr nützlich sein, um zum Beispiel bei einer Umstellung eines CMS oder Wechsel der Domain die URL-Struktur zu übertragen. Wer dies jedoch schon zum X-ten Mal macht, der hat vielleicht, ohne es zu wollen, längere Redirect-Ketten geschaffen.

Google empfiehlt Redirects für wenigstens ein Jahr aktiv zu lassen, weil deren Server teilweise so lange brauchen, bis sie einen Umzug als solchen auch vollständig erkannt haben. Danach sollte dann aber auch gut sein. Eine kleine Reise durch alte .htaccess-Dateien kann sich also lohnen.

Das betrifft natürlich nicht nur Redirects aus Umzügen. Manchmal gibt es auch Trackingskripte, die unnötig viele Hops einbauen. Auch hier lässt sich vielleicht bei wichtigen Seiten etwas rausholen.

Phase 2: Optimieren bis zur perfekten Dokumentengröße

Wenn die Daten beim Client so schnell wie möglich ankommen sollen, dann sollte die Übertragung so wenig Zeit wie möglich in Anspruch nehmen. Das klappt natürlich besser, wenn die Ursprungsdateien so klein wie möglich sind.

GZip-Kompression macht Textdateien kleiner

Jeder Webserver bietet eine Form der Seitenkompression. Gerade HTML, aber auch das Bildformat SVG, CSS- und JavaScript-Dateien lassen sich als Textformate ideal komprimieren. Bei der Kompression wird, vereinfacht gesagt, aus jeder Datei erst eine ZIP-Datei gemacht, diese ZIP-Datei überträgt der Server dann an den Client und dieser entpackt die Datei erst bevor er sie anzeigt. Davon bekommt der Nutzer nichts mit, außer dass es schneller ging.

Ein kurzer Test zeigt wie effizient dieses Verfahren ist. Unser Beitrag SEO-Strategie hat durch die GZip-Komprimierung stolze 68,5 % Ersparnis:

Tutorial für die drei wichtigsten Webserver:

Tipp: Google hat mit Brotli ein Kompressionsformat herausgebracht, welches im Vergleich zu GZip nochmals um ca. 15–20 % effizienter verkleinert. Alle Webserver unterstützen mittlerweile Brotli.

Bilder lassen sich fast immer verkleinern

Bilder verursachen ohne Zweifel auf den meisten Seiten das höchste Datenaufkommen. Nicht selten vergessen SEOs Bilder zu optimieren. Dabei gibt es hier schon seit Jahrzenten entsprechende Tools.

Wer eine hohe Anzahl an Bildern verkleinern möchte, der macht dies geschickter Weise direkt auf der Kommandozeile bzw. auf dem Server.  Hier gibt es zahllose Tools, darunter ImageMagick, Pngcrush, pngquant uva. Die jeweils passenden Einstellungen zu finden, erfordert etwas Geschick, aber es lohnt sich allemal.

Wie sehr es sich lohnen kann, zeigt zum Beispiel der Einsatz von TinyPNG, dem kostenlosen Onlineoptimierer. Ein paar von unseren Bildern für diesen und andere Artikel konnte das Tool drastisch verkleinern, ohne erkennbaren Qualitätsverlust.

Durch das Komprimieren von Bildern lassen sich erhebliche Datenmengen sparen.

Minifikation macht alles kleiner

Wie das Wort schon andeutet, hier wird noch weiter verkleinert. Schließlich zählt jedes Byte. Bei der Minifikation geht es darum, überflüssige Zeichen in einer Datei zu eliminieren. Zwei Leerzeichen werden so zu einem, Leerzeilen werden zusammengefasst. So lässt sich wirklich das allerletzte Stück Performance herauskitzeln.

Ob sich das noch lohnt, wenn ohnehin GZip und Brotli aktiviert sind, muss jeder für sich prüfen. Jedenfalls gibt es auch hierfür diverse Tools, die einem dabei helfen, HTML, JS, CSS & Co zu minifizieren. Insgesamt 14 davon stellt Hongkiat im Beitrag vor.

Überflüssige Plugins entfernen

Die Anzahl der kostenlosen Plugins für Open Source-CMS ist Segen und Fluch zugleich. Ihr Einsatz sollte auch immer aus SEO-Gesichtspunkten überprüft werden, denn sehr oft blähen sorglos programmierte Addons den HTML-Code unnötig auf.

Hier hilft nichts anderes als das Prüfen der Größe nach dem An- und Abschalten eines neuen Plugins. Rechtfertigt ein Plugin durch seine Funktionalität tatsächlich längere Ladezeiten? Das will getestet werden.

Phase 3: Optimieren der Seite, wie sie der Browser rendert

Ist erstmal alles „am Laden“, kann immer noch einiges stocken. Auch dafür gibt es Lösungen.

Wenn das JavaScript den Rendervorgang blockiert

JavaScript wird an verschiedenen Stellen beim Laden einer Seite ausgeführt. Wie genau das funktioniert, ist wahnsinnig komplex. Es lohnt sich als nur für ausgesprochene Experten mit Programmiererfahrung, sich hier tief einzuarbeiten. Der wahrscheinlich einfachste Trick ist es, verschiedene JS-Dateien aus dem Kopfbereich des HTMLs an das Ende des BODYs zu stellen.

Code-Beispiel:

Der Trick: JS aus dem Kopfbereich nach ganz unten in das body-Element. Wichtig dabei, die Skripte müssen wirklich ganz unten eingebunden sein.

HTTP/2 macht alles parallel

Das WWW, wie wir es kennen, basiert auf dem Hyper-Text-Transfer-Protokoll. Schon seit Jahrzehnten liefern Webserver mit diesem Protokoll Dateien aus – bisher hauptsächlich über die Version 1.1, die seit ca. 1994 nicht großartig geändert wurde.

Die Bandbreite war zu dieser Zeit derart gering, dass Webserver pro Browser nur zwei Dateien gleichzeitig auslieferten. Seit Modem, ISDN und CO hat sich jedoch vieles deutlich verschnellert, was in der heutigen Zeit oft zu Engpässen bei der Übertragung von Dateien führen kann.

HTTP Version 2 ist angetreten, um all die technischen Unzulänglichkeiten der Vorgängerversion auszugleichen. Die neue Version hat so viele Vorteile, dass sich in jedem Fall eine Umstellung lohnt. In unserem Strategie-Papier haben wir schon recht ausführlich auf die Möglichkeiten hingewiesen: Multiplexing, Server-Push, Priorisierung von Streams und komprimierte Header sind nur ein Auszug der Möglichkeiten für schnellere Webseiten.

Weitere Möglichkeiten und Ausblick

In diesem Beitrag sind wir auf viele Möglichkeiten eingegangen, mit denen wir Seiten schneller machen können. Selbstverständlich gibt es noch mehr. Ganze Bücher sind über dieses Thema bereits erschienen. Allerdings lassen sich unserer Einschätzung nach mit diesen Tipps Seiten genügend schnell machen.

Geschwindigkeit ist ein Rankingfaktor, der sich laut den neusten Erkenntnissen nur negativ auswirkt, wenn die eigenen Seiten zu langsam werden. Es ranken immer noch die Seiten mit den besten Inhalten und Links ganz oben. Nur die langsamsten Seiten fliegen aus dieser Liste wieder raus. Geschwindigkeit ist sehr wichtig, aber alleine genommen natürlich nicht entscheidend für Toprankings.

Empfehlenswerte Tools für weitere Analysen

Es gibt eine ganze Menge Tools, die dabei helfen, die Performance der eigenen Seiten zu verbessern. Hier eine Auswahl:

  • io: Die wahrscheinlich umfangreichste Toolsammlung für ausfürhliche Performance-Tests, Open Source und kostenlos. Für Experten.
  • io, TinyPNG oder Sqoosh für kleinere Bilddateien.
  • Die Pingdom-Tools erlauben diverse Tests.
  • Google Lighthouse ist direkt in Google Chrome eingebaut. Einfach mal ausprobieren.
  • PageSpeed Insights ist das offizielle Tool von Google. Wer hier eine 100 schafft, darf sich zurecht „Meister der Page-Speed-Optimierung“ schimpfen.
  • GTmetrix ist ein weiterer Anbieter mit einem umfangreichen Tool.

Welche Tipps gibt es sonst noch?

 

Bildquelle:

Teaserfoto: www.unsplash.com © William Iven

Zurück

© 2019 seo2b.de. All Rights Reserved. — Designed by seo2b - Onlinemarketing Agentur im Raum Trier, Luxemburg und Saarbrücken