Benutzer erwarten, dass Deine Webseite schnell lädt und wenn dies nicht der Fall ist, verlierst Du Besucher. Warum ist das so?
Untersuchungen deuten darauf hin, dass Menschen das Interesse verlieren, wenn eine Seite nicht sofort geladen wird (im wortwörtlichen Sinne), und zwar in 400 Millisekunden. Nur eine Sekunde Verzögerung kann die Kundenzufriedenheit um 16 % verringern. Jeder vierte Besucher verlässt eine Webseite, wenn das Laden länger dauert als vier Sekunden.
Ganz zu schweigen von dem Ranking-Faktor für mobile Webseiten, auf die Google so viel Wert legt. Wenn Deine Webseite nicht schnell lädt, sind Deine Besucher und Google enttäuscht. Folglich verlierst Du Rankings und Traffic.
Also, wie schnell ist Deine Webseite?
Wenn das Laden länger als ein oder zwei Sekunden in Anspruch nimmt, verlierst Du in diesem Moment Traffic. Es ist nicht schlimm, wenn sie langsam ist, denn es gibt Schritte, die Du unternehmen kannst, um sie schneller zu machen.
Schritt Nr. 1: Teste die Geschwindigkeit Deiner mobilen Webseite
Bevor wir etwas unternehmen, sollten wir testen, wie schnell Deine mobile Webseite lädt. Du magst vielleicht denken, dass sie schnell lädt, in Wirklichkeit könnte sie aber viel langsamer sein als Du glaubst, darum prüfen wir die mobile Ladegeschwindigkeit mit Ubersuggest, und zwar so:
Schritt Nr. 1: Gib Deine URL ein und klick auf “Suchen”.
Schritt Nr. 2: Wähle “Seiten-Audit” aus.
Schritt Nr. 3: Scrolle nach unten, bis Du die Ladezeiten siehst.
Hier findest Du die Ladezeit für Desktop- und Mobilgeräte. Die mobile Ladezeit meiner Webseite beträgt 2 Sekunden. Das ist ein gutes Ergebnis.
Du solltest die folgenden sechs wichtigen Elemente prüfen:
- First Contentful Paint
- Speed Index
- Time to Interactive
- First Meaningful Paint
- First CPU Idle
- Estimated Input Latency
Wenn Deine Webseite ebenfalls ein zufriedenstellendes Ergebnis erzielt, musst Du Dir keine Sorgen machen. Falls jedoch Raum für Verbesserungen besteht, solltest Du schnellstens Maßnahmen ergreifen, denn bei jeder Verzögerung von 0,5 Sekunden springen unweigerlich Besucher von Deiner Webseite ab.
Ich werde im Folgenden weiter auf die häufigsten Ursachen für langsame mobile Webseiten eingehen und erklären, wie man das Problem behebt.
Schritt Nr. 2: Perfektioniere das Design Deiner mobilen Webseite
Denke an die Zeit zurück, als Du Deine Webseite entworfen hast. Hattest Du damals schon das mobile Design im Blick? Wahrscheinlich nicht (Wenn doch, hast Du an dieser Stelle ein Lob verdient). Wenn nicht, ist es jetzt an der Zeit, Dein Design mit Blick auf die mobile Nutzung zu überdenken.
Mobile Webseiten haben sich in den letzten Jahren stark gewandelt. Früher gab es immer zwei Webseite, eine mobile und eine Desktop-Version. Die mobile Webseite lässt sich leicht am „m“ in der URL erkennen. Im unteren Fall handelt es sich um zwei Webseiten, die getrennt voneinander agieren.
Das ist heute nicht mehr der Fall, denn heute arbeitet man fast ausschließlich mit responsivem Design. Eine responsive Webseite passt sich dynamisch unterschiedlichen Bildschirmen an und verändert ihr Aussehen oder ihre Größe. Deine mobilen und Deine Desktop-Nutzer sehen also immer dieselbe Webseite.
Diese Methode wird von Google bevorzugt und das hat das Unternehmen auch schon mehrmals zugegeben.
“Google empfiehlt responsives Webdesign, weil dieser Ansatz am einfachsten zu implementieren und zu verwalten ist.”
Jetzt denkst Du wahrscheinlich: “Okay, aber was hat das mit Geschwindigkeit zu tun?”
Responsive Seiten werden in der Regel schneller geladen als reine mobile Webseiten, wodurch ein massiver SEO-Vorteil erzielt werden kann. Ein responsives Design kommt zudem besser beim Nutzer an und wird häufiger in den sozialen Medien geteilt, was der SEO ebenfalls zugutekommt.
Ein responsives Web-Design hat kurzfristige und langfristige Vorteile, falls Du also noch kein responsives Design hast, solltest Du Dich jetzt so schnell wie möglich darum kümmern.
Schritt Nr. 3: Entferne unnötige Elemente
Die Verlockung eines auffälligen Designs ist sehr groß, dies kann aber auch zu Problemen führen, weil zu viele und zu schwere Elemente Deine Webseite langsamer machen, da sie nicht so schnell geladen werden können.
Dieses Phänomen bezeichnen Entwickler als “Code Bloat“. In der Computerprogrammierung ist Code Bloat ein Quelltext, der als unnötig lang empfunden wird.
Dieses Problem tritt auf, wenn man sich zu sehr auf das visuelle Erscheinungsbild einer Webseite konzentriert.
Versteh mich jetzt bitte nicht falsch, das Aussehen Deiner Webseite ist natürlich wichtig, darf ihre Leistung aber nicht beeinträchtigen. Das muss es zum Glück aber auch nicht. Hier sind einige Tipps, die Du bei der Erstellung und dem Design Deiner Webseite beachten solltest.
Halte die Webseite einfach
Leonardo da Vinci sagte einst Folgendes über Einfachheit:
Einfachheit ist das entscheidende Merkmal für Kultiviertheit.
Heute, über 500 Jahre später, gilt dieser Grundsatz noch immer. Du musst Dich nur mal umschauen. Die komplexen Designs der Vergangenheit wurden fast alle durch die minimalistischen Designs ersetzt. Dies gilt natürlich auch für Webseiten, vor allem für mobile Webseiten.
Auf einem kleinen Bildschirm kann eine Webseite schnell “zu voll” wirken, daher ist es wichtig, das Design simpel und übersichtlich zu halten.
Als Faustregel gilt: Nur ein Call-to-Action pro Seite. Auf diese Weise kannst Du Deinen Code reduzieren und die Benutzererfahrung verbessern.
Ziehe eventuell ein einfacheres Design wie dieses von Rug Doctor in Betracht:
Es ist nicht zu auffällig, zieht aber dennoch die Aufmerksamkeit des Betrachters mit seinem eleganten Stil auf sich. Du brauchst keine leuchtenden Farben oder viele Fotos, um Deine Webseite hervorzuheben. Weniger ist oft mehr, wenn es ums mobile Design geht.
Eliminiere überflüssige Schritte
Je weniger der Besucher tun muss, desto besser. Warum sollte ein Kunde sieben Schritte durchlaufen, um einen Kauf abzuschießen, wenn dies in nur drei Schritten erledigt werden könnte?
Die Vereinfachung (also, die Verkürzung) des Verkaufsprozesses, wirkt sich positiv auf die Benutzererfahrung aus. Viele E-Commerce-Shops verwenden diese Strategie, um ihren Absatz zu steigern.
Der Kauf auf der mobilen Seite von Boden ist supereinfach und schnell abgeschlossen. Man fügt das Produkt dem Warenkorb hinzu, geht zur Kasse und bezahlt. Fertig.
Supereinfach und ganz ohne unnötige Schritte. Dies trägt natürlich auch dazu bei, Code Bloat zu vermeiden, denn je weniger Elemente eine Seite enthält, desto sauberer der Code.
Das Weglassen unnötiger Schritte ist das beste, was Du für Deine Besucher tun kannst. Mobile Nutzer verweilen viel länger auf Deiner Webseite, wenn sie nicht viel tun müssen, erspare ihnen also ein paar Klicks und ernte später die Belohnung.
Verwende weniger Bilder
Bevor ich näher auf diesen Punkt eingehe, möchte ich betonen, dass gute Fotos definitiv wichtig sind und auch SEO-Vorteile haben. Man kann aber auch “zu viel des Guten” haben.
Bilder können Deine Webseite verlangsamen. Du magst jetzt vielleicht denken, dass das keine große Sache ist, aber Fotos machen ungefähr 63 % des gesamten „Gewichtes“ einer Seite aus. Bereits von 2011 bis 2015 hat sich die Größe der durchschnittlichen mobilen Webseite verdreifacht, und das war vor fast 10 Jahren!
Bilder gehören definitiv zu den anspruchsvollsten Elementen Deiner Webseite. Sie nehmen viel Platz ein, darum darf man nicht zu viele haben.
Eine Lösung besteht darin, weniger Bilder zu verwenden. Eine andere (und, wahrscheinlich praktischere) Lösung besteht darin, die Bilder zu komprimieren, um die Dateigröße zu reduzieren. Die Komprimierung macht Deine Bilder kleiner, ohne die Qualität zu beeinträchtigen, dadurch verkürzt sich die Ladezeit Deiner Webseite.
Ein weiterer Bonus, es reduziert die Zeit, die Such-Bots zum Crawlen und Indexieren Deiner Webseite benötigen.
Du kannst Deine Bilddateien auf Plattformen wie Compressor.io im Handumdrehen komprimieren.
Die Komprimierung von Bildern ist übrigens auch zu empfehlen, wenn die Webseite bereits blitzschnell lädt.
Verwende keine benutzerdefinierten Schriftarten
Ich mag schöne benutzerdefinierte Schriftarten natürlich genauso wie Du, einige sind aber sehr pflegebedürftig und aufwendig. Einige Schriftarten verwenden zu viel CSS, während andere stark auf JavaScript setzen. So häuft sich wieder eine Menge Code an.
Wenn Du Dich intensiver mit diesem Thema befassen möchtest, solltest Du Dir diese Beiträge von Google durchlesen. Hier ist die wichtigste Erkenntnis für Dich zusammengefasst: Verwende benutzerdefinierte Schriftarten nur, wenn es unbedingt erforderlich ist.
Schritt Nr. 4: Minimiere Deinen Code
Die Minifikation ist eine äußerst nützliche Technik zur Bereinigung von JavaScript- und CSS-Code. Hier ist eine kurze Erklärung, worum es bei der Minifikation geht:
Im Wesentlichen werden beim Minimieren werden alle unnötigen Zeichen aus dem Quellcode entfernt, ohne die Funktionalität zu ändern. Dies trägt wesentlich dazu bei, die Webseite “leichter” zu machen.
Du kannst Deinen Code manuell minimieren (hier findest Du eine Anleitung), ich würde Dir diesen Weg aber nicht empfehlen, weil man dafür Fachkenntnisse und technisches Verständnis braucht.
Glücklicherweise gibt es mehrere kostenlose Programme, mit denen man seinen Quelltext im Handumdrehen minimieren kann. Minifycode.com bietet verschiedene Funktionen, mit denen man HTML, CSS, JavaScript, sowie andere Skriptsprachen schnell bereinigen kann.
Wenn Deine Seite mit WordPress erstellt wurde, kannst Du ein Plug-in wie Better WordPress Minify herunterladen, um Deinen Code zu minimieren.
Dieses Plug-in ermöglicht es Dir, Deinen Code mit nur wenigen Klicks zu verkleinern. So bist Du auf dem besten Weg zu einer schnelleren Webseite.
Natürlich setzt Du alles daran, dass kein unnötiger Code auftritt, manchmal lässt sich das aber nicht vermeiden. Mit diesen Programmen kannst Du Fehler schnell identifizieren und beheben, um Deine Webseite zu optimieren.
Schritt Nr. 5: Reduziere Deine Weiterleitungen
Ich liebe Weiterleitungen. Sie sind nützlich und kommen dem Besucher zugute, doch leider haben sie auch Nachteile. Du kannst nicht überall Weiterleitungen setzen und erwarten, dass Deine Webseite fehlerfrei funktioniert, da sie Deine Ladezeiten ausbremsen.
Wenn Du auf einen mobilen Link ohne Weiterleitung klickst, stellt der Server das unter diesem Link gefundene Dokument bereit. Bei einer Weiterleitung ist das Dokument jedoch nicht unter diesem zu finden. Der Server muss erst auf die Seite zugreifen, auf der sich das Dokument befindet, um es abzurufen, und das dauert.
Dieser Vorgang muss mit jeder Datei, die sich auf der jeweiligen Seite befindet, wiederholt werden. Das bedeutet, dass jedes Bild, jede CSS-Datei und jede JavaScript-Datei über diese Umleitung abgerufen wird. Infolgedessen kann die Seite nicht innerhalb weniger Sekunden geladen werden, und bis sie lädt, ist der Benutzer schon längst wieder verschwunden.
Verwende das Programm Screaming Frog, um Deine Weiterleitungen zu prüfen.
Du kannst den Ursprung Deiner Weiterleitungen nachverfolgen und alle, die nicht unbedingt erforderlich sind, entfernen.
Je weniger Arbeit der Server leisten muss, desto schneller kann die Seite geladen werden. Obwohl Weiterleitungen sinnvoll sind, sollte man seine Webseite nicht überbeanspruchen oder von ihnen abhängig sein.
Schritt Nr. 6: Lade zuerst alle Elemente im sichtbaren Seitenbereich
Deine Besucher sehen zuerst die Elemente im sichtbaren Seitenbereich. Warum sollte man also sofort die gesamte Seite laden? Wäre es nicht besser, wenn man zuerst alle sichtbaren Inhalte laden würde und weitere dann nach Bedarf abruft?
Dieses Konzept ist als „Lazy Loading“ bekannt und kann Wunder für die Geschwindigkeit einer Webseite bewirken. Durch die Implementierung von Lazy Loading gibst Du Deiner Webseite die Möglichkeit, nur so viel Arbeit zu leisten, wie unbedingt nötig ist, nicht mehr.
Wenn Du Dich mit Programmieren auskennst, kannst Du das Plug-in jQuery verwenden. WordPress-Webseiten können alternativ das Plug-in BJ Lazy Load verwenden.
Wenn keine dieser Optionen für Dich infrage kommt, musst Du möglicherweise einen Entwickler mit dieser Aufgabe beauftragen. Es handelt sich um eine eher fortgeschrittene Technik, die Deiner Webseite langfristig aber viel Arbeit ersparen kann.
Fazit
Geschwindigkeit ist nicht nur in der Formel 1 von oberster Wichtigkeit. Es ist einer der grundlegendsten Bestandteile großartiger mobiler Webseiten. Schnelle, für Mobilgeräte optimierte Webseiten erzielen mehr Traffic und folglich auch mehr Kunden und Konversionen. Keine große Überraschung.
Mobile Webseiten sind der neue Standard. Die Leistung der Desktop-Version ist zwar immer noch wichtig, aber Mobil ist Gegenwart und Zukunft. Sorge dafür, dass Deine Webseite so schnell wie möglich lädt und reduziere den Datenumfang der Elemente Deiner Seite.
Dieser Artikel auf Think With Google brachte es auf den Punkt: “If speed thrills, friction kills.” Frei übersetzt heißt es so viel wie: Wenn mit der Geschwindigkeit alles stimmt, können Reibung Probleme verursachen.
Die Optimierung der Geschwindigkeit Deiner mobilen Webseite hat zwei Vorteile, weil sie sowohl die Erfahrung der Besucher als auch die der Suchmaschinen verbessert. Wenn Du Deine Webseite bisher noch nicht für Mobilgeräte optimiert hast, solltest Du das jetzt schnellstens tun.
Welche dieser Techniken wirst Du anwenden, um Deine mobile Webseite schneller zu machen?
