searchmetrics email facebook github gplus instagram linkedin phone rss twitter whatsapp youtube arrow-right chevron-up chevron-down chevron-left chevron-right clock close menu search
1319913199

The Need for Speed, Teil 2: Der ultimative Guide für Website-Speed

Geschwindigkeit ist wichtig für Nutzer und SEO: Niemand möchte mehrere Sekunden warten, bis eine Website geladen ist. Das Zitat “Zeit ist Geld” von Benjamin Franklin gilt heute mehr denn je. Laut Google kostet eine Sekunde zusätzliche Mobile-Ladezeit bereits 20 Prozent des mobilen Umsatzes. Websites, die schneller laden als die Online-Konkurrenz, ranken auch bei Google besser. Wie ihr eure Website schneller macht, erklärt Tomek Rudzki, Head of Research und Development bei Elephate, die als “Best Small SEO Agency” bei den European Search Awards 2018 gewinnen konnte.

Dieser Website Speed-Guide erscheint in insgesamt drei Teilen. Ihr lest gerade den zweiten Teil. Hier geht es zu Teil 1 und Teil 3.

Gratis-Studie zu Pagespeed

8. Redirect-Ketten vermeiden

Manchmal ändert ihr eure Webseiten-Struktur; das ist völlig in Ordnung. Nach einer Strukturänderung sollter ihr jedoch sicherstellen, dass ihr so wenig Redirect-Ketten wie möglich habr. Um dies zu tun, müsst ihr die internen Links so aktualisieren, dass sie direkt auf die neuen URLs verweisen.

Manchmal ist das Problem extrem, wie ihr unten sehen könnt – über 5 Millionen URLs mit Weiterleitungen:

Randnotiz: Google behauptet, dass 3xx-Weiterleitungen den PageRank nicht mehr verlieren. Allerdings gibt es viele SEOs, darunter Barry Adams, die das anders beobachtet haben.

9. Download-Ressourcen begrenzen

Es ist immer eine gute Idee, die Anzahl der Anfragen zu reduzieren. Die meisten Browser können bis zu sechs Ressourcen gleichzeitig (über das HTTP 1.1-Protokoll) von einem Host anfordern. Wenn eure Seite also aus 100 Ressourcen besteht (Bilder, CSS, JavaScript-Dateien), kann der Browser sie nicht auf einmal herunterladen. Dies kann zu einem langsameren Rendern führen.

10. CSS-Sprites

Um die Anzahl der Anfragen zu reduzieren, könnt ihr CSS-Sprites verwenden. Was ist das? Angenommen, ihr verwendet die Share-Buttons für Facebook, Twitter, Pinterest, Google+ und Reddit. Das sind 5 Symbole – und damit auch 5 Anfragen. Aber ihr könnt diese Symbole zu einem einzigen Bild kombinieren. Dann könnt ihr festlegen, wo sie auf dem Bildschirm erscheinen sollen, indem ihr die CSS-Regeln angebt.

Ihr könnt auch die Anzahl der Ressourcen verringern, indem ihr kleine JS- und CSS-Dateien in den Inhalt einfügt.

11. CDN verwenden

Wenn ihr Benutzer aus der ganzen Welt habt, ist es gut, ein CDN für euren statischen Inhalt (HTML, JS, CSS, Bilddateien) zu verwenden.

Lasst mich kurz ein CDN erläutern, das für “Content Delivery Network” steht: Wenn ihr ein CDN verwendet, wird euer Inhalt auf Server auf der ganzen Welt verteilt.

© http://www.icytales.com/different-types-cdn-which-better-for-you/

Das Resultat ist dann wie folgt:

  • Wenn ein Benutzer aus den USA eure Website erreicht, lädt er den Inhalt von einem Server in den USA herunter.
  • Wenn ein Benutzer aus Russland eure Website besucht, lädt er möglicherweise den Inhalt von einem Server in Russland herunter.

Dies kann die Time to First Byte für wirklich JEDEN Request deutlich verringern – und als Folge wird eure Website schneller geladen.

12. Aufpassen bei Lazy Load

Lazy Load ist im Allgemeinen eine gute Vorgehensweise, da der Brower beim ersten Laden nur die benötigten Inhalte lädt, die sich im Browser-Viewport befinden. Habt ihr ein Karussell mit vielen Fotos und niemand klickt auf das letzte Bild? Zwingt eure User (bzw. deren Browser) nicht, es sofort herunterzuladen; Mit Lazy Load wird dieses Bild erst geladen, wenn der User auch durch das Karussell navigiert.

Vor einiger Zeit wechselte MediaVine zu Lazy-Loading-Anzeigen. Dies führte zu einer 200%-igen Verbesserung der Seitenladegeschwindigkeit.

Aber Achtung: Manchmal kann sich der Einsatz von Lazy Load auch negativ auf SEO auswirken. Denn der Googlebot ist ein “lazy” Nutzer – er klickt nicht, er scrollt nicht. Wenn ihr zum Beispiel Tabs habt und der Inhalt nach dem Klicken über AJAX-Aufrufe geladen wird, besteht die Gefahr, dass der Googlebot ihn nicht indiziert. Wenn ihr mehr zu diesem Thema wissen wollt, empfehle ich euch meinen Guide für JavaScript SEO.

13. Drittanbieter-Scripts

Ihr habt fast alles auf eurer Website verbessert und die Ladezeit ist noch immer nicht optimal? Es kann durch Skripte von Drittanbietern verursacht werden, zum Beispiel Video-Einbettungen, Share-Buttons oder Tracking-Software.

Hier zitiere ich nochmal aus der Dokumentation für Google Developers:

Skripts von Drittanbietern sind eine Hauptursache für Leistungseinbußen und werden häufig von Ressourcen außerhalb Ihrer Kontrolle verursacht.

Warum passiert das? JavaScript ist Render-Blocking. Das bedeutet: Wenn der Browser mit der Ausführung von JS beschäftigt ist, bremst dies das Laden eurer sonstigen Seiten-Inhalte.

Am besten, ihr untersucht zusammen mit euren Entwicklern, ob Skripte asynchron verschoben und damit nachträglich geladen werden können. Hier empfehle ich euch, die Google Developers-Dokumentation zum Laden von JavaScript von Drittanbietern zu lesen.

14. Preload & Preconnect nutzen

Wenn ihr möchtet, dass eure Website schnell ist, solltet ihr sicherstellen, dass der Browser alle für das Rendern erforderlichen Ressourcen so schnell wie möglich sammeln kann. Ressourcenhinweise (spezielle Codeteile, die entweder im Code oder in den HTTP-Headern platziert werden) können hilfreich sein.

Dies bedeutet: Ihr könnt den Hinweis “preload” verwenden, damit der Browser sofort Ressourcen herunterlädt, die für das Rendern erforderlich sind (Primärbilder, Schriftarten, CSS- und JS-Dateien). Dank des Preload-Hinweises können diese Ressourcen sofort heruntergeladen werden, noch bevor der Browser das HTML-Parsing beginnt.

So könnt ihr es in HTML implementieren:

Ein weiterer interessanter Punkt ist “Preconnect”. Ihr müsst dazu wissen, dass der Browser eine Ressource nicht einfach herunterladen kann. Zuvor muss der Browser eine DNS-Prüfung durchführen und die sichere TLS-Verbindung aushandeln. Das braucht Zeit.

Für die wichtigsten Ressourcen könnt ihr diese Schritte im Voraus durchführen, indem ihr link rel = “preconnect” verwendet. Wer sich näher mit diesem Thema beschäftigen möchte, kann diese Dokumentation lesen.