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 Onely, 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 ersten Teil – hier geht es zu Teil 2 und Teil 3.
1. Zeit ist Geld
Es gibt viel Forschung, die darauf hinweist, dass eine schnellere Website mehr Umsatz bedeutet.
- Pinterest erkannte, dass die Reduzierung der Ladezeit zu einer Erhöhung der Sign-Up-Rate um 15% führte.
- BBC erklärte, dass mit jeder zusätzlichen Sekunde Ladezeit 10% der Nutzer die Website verlassen.
- DoubleClick von Google hat ermittelt, dass eine Reduzierung der Seitenbelastung von 19 (extrem!) auf 5 Sekunden zu 35% niedrigeren Absprungraten und 70% längeren Sitzungen führte.
- Eine Studie von Amazon zeigt, dass eine Verzögerung der Website-Ladezeit von nur einer Sekunde dazu führen kann, dass 1,6 Milliarden Jahesumsatz fehlen.
Google hat ein nettes Tool erstellt, das den Einfluss der Geschwindigkeit auf potenzielle Einnahmen berechnet – den Google Impact Calculator. Ich habe das Tool mit folgenden Beispieldaten gefüllt: Eine Millione monatliche Besucher, 3,26% Conversion-Rate, durchschnittlicher Warenkorb von 82 Dollar. Die Daten habe ich übrigens Statista entnommen. Danach lag der durchschnittliche Warenkorb im Online-Shopping in den USA im 4. Quartal 2017 bei 82 US-Dollar und die durchschnittliche Conversion-Rate bei 3,26%. Und so sieht es aus:
Laut des Google Impact Calculators führt eine Reduzierung der Ladezeit von 5 Sekunden auf 2,8 Sekunden zu fast zwei Millionen US-Dollar mehr Umsatz pro Jahr führen kann. Hört sich gut an! Natürlich ist es nur ein “Taschenrechner”. Der Rechner basiert jedoch auf echten Daten. Ich glaube nicht, dass Google am Ende des berechneten Werts ein paar Nullen hinzufügt, damit es ernst aussieht.
2. Denkt IMMER an eure mobilen Benutzer
Laut Statcounter nutzten im Februar 2018 über 55% der Nutzer das Internet per Handy oder Tablet.
Wenn ihr eure mobilen Benutzer zufriedenstellen möchtet, solltet ihr also sicherstellen, dass eure Website auf Mobilgeräten einwandfrei funktioniert und wirklich schnell ist. Mobile Benutzer haben oft ein langsames Netz (und häufig auch Low-End-Geräte), so dass jedes Kilobyte wirklich zählt. Eure Website funktioniert möglicherweise schnell auf einem Desktop-PC mit allen Extras, aber auf mobilen Geräten ist sie möglicherweise sehr langsam.
3. Nutzt GTMetrix
Es gibt mit GTMetrix ein großartiges Tool, das euch sagt, was ihr verbessern könnt, um eure Website schneller zu machen. Ihr könnt jede Website kostenlos prüfen – im Folgenden habe ich den Website-Audit für giphy.com durchgeführt. Das Tool kombiniert sowohl Daten als auch Hinweise aus Google PageSpeed Insights und Yahoo Slow. Das sieht dann im Ergebnis so aus:
Ihr könnt die Liste mit Empfehlungen zur Verbesserung der Website-Geschwindigkeit anzeigen, indem ihr entweder auf die Registerkarten “PageSpeed” oder “YSlow” klickt:
Momentan sind viele Informationen auf diesen Tabs möglicherweise nicht verständlich, da sie zu technisch sind. Ich werde mein Bestes tun, sie euch zu erklären. Es gibt einen interessanten Abschnitt namens “Waterfall”, der euch genau anzeigt, wann die Ressourcen (JS & CSS-Dateien, Bilddateien) heruntergeladen und geladen wurden.
Ich empfehle dringend, dass ihr euch ein GTMetrix-Konto anlegt – es ist auch kostenlos. Registrierte Benutzer können den Test anpassen und den Browser- und Serverstandort ändern. Sobald ihr euch angemeldet habt, können Sie die Option “Video erstellen” aktivieren. Die Videooption ist großartig. Es zeigt euch, wie lange Benutzer warten müssen, bis sie die visuellen Änderungen auf eurer Website sehen können:
Aber: Macht euch nicht verrückt mit GTMetrix! Obwohl GTMetrix ein großartiges Werkzeug ist, können die Empfehlungen manchmal zu etwas Optimierungs-Hektik führen. Es ist aber so, dass es bei der Optimierung der Geschwindigkeit keine einheitliche Regel gibt – ein Problem, das GTMetrix kennt:
Zum Beispiel empfiehlt GTMetrix, dass ihr Ressourcen im Browser zwischenspeichern sollst, die aber auf Google- oder Facebook-Servern gespeichert sind. Diese Ressourcen liegen außerhalb eurer Kontrolle – ihr könnt nichts tun. Die Entwickler von Google und Facebook haben entschieden, dass diese Ressourcen aus irgendeinem Grund nicht für längere Zeit zwischengespeichert werden sollten.
Natürlich gibt es viele Tools, die GTMetrix ähnlich sind, wie WebPageTest (der viel mächtiger ist als GTMetrix). Ich habe mich jedoch aus zwei Gründen dazu entschlossen, euch GTMetrix vorzustellen:
- GTMetrix ist benutzerfreundlicher
- WebPageTest gibt Ihnen keine klaren Empfehlungen, was zu tun ist.
Ich möchte ein weiteres interessantes Tool erwähnen – Google Lighthouse (Wenn ihr Chrome verwendet, habt ihr es bereits installiert und könnt es über die Entwickler Tools in Chrome aufrufen). Kamila Spodymek von Onely hat einen großartigen Artikel darüber geschrieben, wie SEOs von den Leistungskennzahlen von Google Lighthouse profitieren können. Definitiv eine gute Lektüre!
4. Verwendet GZIP-Komprimierung
Wenn eine Ressource weniger Daten beansprucht, kann der Browser sie viel schneller herunterladen. Eure mobilen Nutzer werden davon wirklich profitieren.
Ihr können die Größe von Textdateien wie HTML, SVG, CSS und JS verringern, indem ihr die GZIP-Komprimierung implementiert. Es ist ziemlich krass, dass die GZIP-Komprimierung 70% bis 80% der Ressourcengröße einspart, ohne dass Informationen verloren gehen:
Auf https://checkgzipcompression.com/ könnt ihr checken, wie viele Kilobyte ihr durch Implementierung von GZIP sparen würdet (oder bereits gespart habt). Für unsere Hompepage von searchmetrics.com ist GZIP aktiviert – und es werden 83% der Seitengröße eingespart:
Aber Vorsicht! Manchmal machen Webmaster einen Fehler und komprimieren alle statischen Dateien, einschließlich JPEG, PNG-Bilder und PDFs. Lasst mich die Yahoo Developer Network-Dokumentation zitieren: “Bild- und PDF-Dateien sollten nicht gezippt werden, da sie bereits komprimiert sind. Der Versuch, sie zu gzipieren, verschwendet nicht nur die CPU, sondern kann auch die Dateigröße erhöhen. “
Wenn ihr also weitere Kilobytes sparen möchtet, solltet ihr auch eure HTML-, JS- und CSS-Dateien minimieren.
5. Scale Bilder ausliefern
Wenn eure Website viele Bilder nutzt, verlängert das die Ladezeit – vor allem auf Mobiltelefonen.
Statt Bilder zu löschen, würde ich empfehlen, bestehende Bilder zu optimieren. Das heißt, Bilder, die ihr an eure Nutzer geliefert werden, sollten skaliert und komprimiert werden (entweder verlustfrei oder verlustbehaftet).
Lasst uns zuerst über das Skalieren der Bilder sprechen. Nehmen wir an, es gibt zehn Thumbnails à 220×220 Pixeln pro Seite, aber ihr habt Bilder in 800 x 800 Pixeln auf den Server hochgeladen. Solltest du die bereits skalierten Bilder den Nutzern zur Verfügung stellen oder den Browser zwingen, sie “on the fly” zu skalieren?
Die Antwort ist einfach. Wenn ihr die Bilder Server-seitig nicht skaliert, muss der Browser viel mehr Kilobyte herunterladen als benötigt. Für nichts, weil Bilder sowieso skaliert werden. Außerdem ist es eine zusätzliche Aufgabe für die GPU auf der Client-Seite – ganz zu schweigen von der Ladegeschwindigkeit der Seite…
6. Bilder-Komprimierung
Im Allgemeinen gibt es zwei Arten der Bildkomprimierung:
- Verlustfrei (macht einen wirklich guten Job. Hier könnt ihr sicher sein, dass die Qualität nicht leidet)
- Lossy (macht normalerweise ein Bild leichter, aber, wie der Name sagt: Ihr verliert etwas von der Qualität)
Die Frage stellt sich: Welche Art von Kompression ist besser: verlustfrei oder verlustbehaftet?
Es hängt wirklich von der Situation ab. Wenn eure Website Bilder des Weltraums liefert, ist jedes Detail wichtig. Aber wenn ihr einen persönlichen Blog erstellt, werdet ihr wahrscheinlich mit einer verlustbehafteten Komprimierung zufrieden sein, selbst mit einer hohen Komprimierungsrate. Ich empfehle euch zu experimentieren, um zu sehen, welche Einstellungen am besten zu eurer Website passen.
7. Foto-Parameter für mobile User
Mobile Nutzer haben viel kleinere Bildschirme und werden einfach nicht von Ihren HD-Fotos profitieren. Stattdessen werden sie wütend, wenn ihr sie zwingt, große Bilder herunterzuladen.
Betrachten wir das Beispiel von Elephate.com. Wir haben ein ziemlich großes Foto (2600×1463 Pixel) unserer Firmenmitglieder oben auf unserer Homepage (522kb):
Desktop-Benutzer werden nicht leiden, weil sie das vollständige HD-Foto sehen werden. Aber für mobile Nutzer verwenden wir jedoch die “srcset”-Parameter von HTML:
Dank der Implementierung werden mobile Benutzer einfach ein viel kleineres Bild herunterladen (sie brauchen kein größeres), was sich positiv auf die Seitenladezeit auswirkt.