Desktop-Computer haben bessere Prozessoren und oft eine zuverlässigere Internetverbindung als Mobilgeräte im Datennetz eines Anbieters. Das bedeutet, dass das Laden von Websites auf Mobilgeräten oft etwas länger dauert als auf einem Desktop – selbst dann, wenn die Website für Mobilgeräte optimiert ist.
Die Seitengeschwindigkeit (beziehungsweise die Geschwindigkeit, mit der deine Website geladen wird) ist ein wichtiger Aspekt der mobilen Suchmaschinenoptimierung (SEO). Die Website-Performance wirkt sich nicht nur auf die Suchrankings aus, sondern auch auf die mobile Benutzererfahrung. Zur Optimierung der Seitengeschwindigkeit für Mobilgeräte müssen Umlaufzeiten, Render-Blocking, Lazy Loading, Komprimierung, Caching und die HTML-Codeoptionen für Accelerated Mobile Pages (AMP-HTML) berücksichtigt werden.
Lies weiter, um mehr darüber zu erfahren, wie du eine schnell ladende Website für Mobilgeräte erstellen kannst.
So erhöhst du die Seitenladegeschwindigkeit in 7 Schritten: Tipps für eine schnellere Website
Wenngleich sich die Mobilgeräte-Richtlinien von Google stark auf ein mobilfreundliches Design und die Benutzerfreundlichkeit konzentrieren, ist die Geschwindigkeit einer Website für mobiles SEO aus gleich mehreren Gründen wichtig. Die Seitengeschwindigkeit ist Teil der Core Web Vitals von Google – essenzielle Rankingfaktoren, die die Benutzererfahrung auf deiner Website messen.
Google verbringt nur eine begrenzte Zeit mit dem Crawlen der einzelnen Websites, und wenn Websites schneller laden, kann Google mehr von deren Seiten crawlen. Das bedeutet, dass die Verbesserung deiner Seitenladezeit das schnellere Auffinden und Indexieren neuer Seiten und Inhalte sowie ein umfassendes Crawlen tieferer Seiten auf der Website fördern kann.
Selbst wenn dein Rang im Hinblick auf die Seiten gleich bleibt, nimmt die Gesamtzahl der Seiten zu, die in die Rangliste eingehen können, und das wirkt sich häufig auf den gesamten organischen Traffic aus, insbesondere für Long-Tail-Keywords.
Neben Überlegungen zum Crawl Budget haben deine mobile Geschwindigkeit und deine Reaktionszeit auch für echte Benutzer Auswirkungen, die sich oft in hohen Bounce-Raten äußern. Letztendlich führt eine langsame Website dazu, dass die Leute sie verlassen möchten.
Bei der Optimierung der Ladezeit und Leistungsfähigkeit deiner mobilen Website sollte das Ziel immer sein, das Worst-Case-Szenario für das Laden auf mobilen Geräten zu berücksichtigen – jegliche andere Kennzahlen für Website-Performance kommen danach.
Teste die Geschwindigkeit deiner Website und optimiere ihre Performance, um sicherzustellen, dass du möglichst vielen mobilen Benutzern eine möglichst schnelle Seite bereitstellst. Auch wenn Mobilfunknetze immer schneller werden, ist es ideal, wenn eine Seite in weniger als 3 Sekunden oder gemäß den Empfehlungen von Google in weniger als 1 oder 2 Sekunden geladen wird
Aber mobile Browser parsen und laden Seiten anders als Desktop-Browser. Einfach gesagt: Desktop-Browser sind besser darin, Seiten mit vielen kleinen Anfragen zu laden, während Mobilgeräte besser darin sind, Seiten mit weniger, aber organisierteren Anfragen zu laden, selbst wenn sie etwas größer sind.
Die Anzahl der Elemente, die vom Server abgerufen werden müssen, um eine Seite zu laden, bezeichnet man als Umlaufzeiten oder Round Trip Requests (RTRs). Ein wesentlicher Bestandteil der Optimierung und Verbesserung der Ladegeschwindigkeit mobiler Seiten ist die Minimierung von RTRs.
Du kannst dir RTRs wie Fahrten zum Lebensmittelgeschäft vorstellen, um Artikel zu holen, die du benötigst, um ein Rezept nachzukochen. Wenn du vier Zwiebeln benötigst, möchtest du wohl kaum für jede der Zwiebeln einzeln losziehen – es wäre besser, sie auf einmal zu holen, und noch besser wäre es, wenn du bei diesem Einkauf die vier Zwiebeln und einige der anderen Zutaten gleichzeitig erstehen könntest. Wenn die vier Zwiebeln mit anderen Zutaten, die du für dein Rezept benötigst, verpackt wären, etwa mit Paprikas, Pilzen und Sellerie, wäre das noch besser.
Hier sind ein paar Empfehlungen zur Optimierung der Geschwindigkeit deiner mobilen Websites:
1. Ermittle Seiten mit übermäßig hohen RTRs.
Die Minimierung von RTRs beginnt damit, dass du sie dir bewusst machst. Viele Seiten werden mehr als 100 RTRs pro Seite aufweisen, aber dein eigentliches Ziel sollten weniger als 50 sein.
Häufig stellen Entwickler oder Experten für SEO, die sich alle Anfragen auf einer Seite ansehen, fest, dass einige der angeforderten Elemente fehlen (404), ohne dass es jemandem aufgefallen ist. Auch wenn diese Elemente nicht mehr vorhanden sind, dauert es dennoch einen Moment, bis der Browser feststellt, dass die Anfrage nicht umsetzbar ist. Daher sollten derartige Seiten sofort entfernt oder repariert werden.
Du solltest auch Assets, die verschoben wurden, reparieren und eine 301- oder 302-Antwort zurückgeben. Diese Antworten bedeuten, dass der Browser zu einem Ort navigieren und dann weitere Anweisungen befolgen musste, um das Asset an anderer Stelle zu erhalten. Und natürlich kostet jeder neue Ort Zeit.
Es ist, als würdest du in einen Lebensmittelladen gehen, um dort zu erfahren, dass er das, was du brauchst, nicht führt, du es aber in einem anderen Laden die Straße runter bekommen kannst. Noch schlimmer ist es, wenn es eine Kette von Weiterleitungen gibt. Das ist so, als würdest du in den zweiten Lebensmittelladen gehen, um festzustellen, dass auch dieser den Artikel nicht mehr führt, und du es nun bei einem dritten Laden probieren musst.
2. Kombiniere Dateien, wo immer es möglich ist.
Der nächste Schritt hin zu einer optimierten Website besteht darin, Dateien (wie JavaScript und CSS) zu kombinieren, wo immer dies möglich ist. Wenn eine Seite beispielsweise zehn Formatvorlagen (CSS-Dateien) verwendet, die alle in einer kombiniert werden könnten, solltest du genau das tun. Ebenso gilt: Wenn du eine Vielzahl von JavaScript-Dateien verwendest, die in einer kombiniert werden könnten, solltest du auch das tun.
Versuche, in den Kategorien „Website-weit“ und „Vorlagenspezifisch“ zu denken. Für JavaScript, das auf jeder Seite der Website vorkommt, solltest du eine website-weite JavaScript-Datei erstellen, und eine vorlagenspezifische JavaScript-Datei für jede Seitenvorlage auf der Website. Dasselbe kann mit CSS gemacht werden. Wenn du sicherstellst, dass diese Dateien immer mit demselben Dateinamen und Speicherort referenziert werden, hilft das auch, wenn sie korrekt zwischengespeichert werden.
3. Optimiere die Rendering-Reihenfolge.
Nachdem du Dateien gelöscht und zusammengefasst hast, um die Gesamtzahl der RTRs zu reduzieren, kannst du die Reihenfolge anpassen, in der Elemente angefragt werden, um die Geschwindigkeit zu erhöhen.
Ebenso wie bei einem Kochrezept, bei dem bestimmte Schritte abgeschlossen werden müssen, bevor weitere Schritte gestartet werden können, gibt es auch eine bestimmte Reihenfolge, der ein mobiler Browser folgen muss – und an die muss man sich bei Erstellen einer Seite halten.
Zurück zum Beispiel mit den Lebensmitteln: Wenn dein Rezept eine Zutat erfordert, die für zwei Tage mariniert werden muss, benötigst du als Erstes die Zutaten für die Marinade, damit du mit dem Marinieren beginnen kannst, bevor du den Rest der Zutaten besorgst.
Wenn wir diese Analogie in die Web-Welt übertragen, ist die Marinade das Render-Blocking, da kein anderer Schritt des Kochprozesses beginnen kann, bevor dieser Schritt abgeschlossen ist. Du kannst dich nur insofern auf die nächsten Kochschritte vorbereiten, indem du während des Marinierens die übrigen Zutaten besorgst.
Es ist eine Art kritischer Rendering-Pfad, bei dem du die kritischen Elemente wie das Head-Tag, den Seiteninhalt und das Grundlayout der Seite priorisierst und die Elemente, die weniger kritisch sind, verzögerst – insbesondere, wenn diese das Laden wichtigerer Elemente verzögern würden. Dies kann die Ladeerfahrung für Benutzer drastisch verbessern und ihnen Zuversicht vermitteln, dass der Rest der Seite ebenfalls schnell geladen wird. Zudem erhalten sie so Assets, mit deren Bewertung sie beginnen können, während der Ladevorgang läuft.
4. Erstelle eine Seitenladestrategie.
Da Suchmaschinen menschliche Benutzer imitieren, erleben sie Seiten auf ähnliche Weise wie du selbst. Das Beste, was du tun kannst, um Anfragen bezüglich Website-Geschwindigkeit zu priorisieren, besteht darin, zu wissen, was für die Benutzer- und die Bot-Erfahrung in den ersten Sekunden auf deiner Seite entscheidend ist.
Dies sind im Allgemeinen die Informationen im Head-Tag sowie der Text und die Bilder auf der Seite. In der Regel dauert es ein paar Sekunden, bis Benutzer sich mit interaktiven Elementen auf der Website beschäftigen, sodass das meiste JavaScript nicht als erstes geladen werden muss.
Stattdessen können visuelle JavaScript-Darstellungen wie z. B. Eingabefenster oder Expander als Platzhalter geladen werden, bevor das JavaScript erforderlich ist. Das Laden von JavaScript ist besonders langwierig und umständlich. Um sicherzustellen, dass das Laden von JavaScript nicht so lange dauert, dass Benutzer und Bots lange Zeit eine leere Seite vor sich haben, ist es ideal, zunächst einen visuellen Aspekt zu laden. Erst anschließend wird das JavaScript im Hintergrund geladen, während die Benutzer die Seite ansehen.
Nach JavaScript sind Videos und Bilder die am langsamsten ladenden Elemente. Videos und Bilder, die weiter unten auf der Seite angezeigt werden, sollten nicht die Erfahrung oben auf der Seite beinträchtigen, wo Benutzer und Bots normalerweise beginnen. Das Konzept, das Laden von nicht sichtbaren Inhalten aufzuschieben, wird „Lazy Loading“ genannt. Lazy Loading kann auf verschiedene Arten erfolgen: in aufgeführter Reihenfolge („deferred“), parallel zu anderen Elementen („async“) und per Lazy-Loading-Meta-Tag von Google.
Das beste Tool zur Suche nach Möglichkeiten für Bilder, die mittels Lazy Loading geladen werden können, ist Google PageSpeed Insights. Um Bilder zu optimieren, kannst du auch das Lazy-Load Image Tag von Google verwenden, aber bisher wird dieses nur in Chrome-Browsern für Mobilgeräte und Desktop-PCs berücksichtigt (obwohl die Unterstützung in Zukunft erweitert werden könnte). Egal, für welche Methode du dich entscheidest: Du solltest das URL-Prüftool der Google Search Console verwenden, um sicherzustellen, dass die Elemente, die per Lazy Loading geladen werden, in der Seitendarstellung des Tools und im gerenderten HTML-Code sichtbar sind.
5. Komprimiere so viel wie nur möglich.
Nachdem du die RTR für jede Seitenvorlage minimiert und priorisiert hast, solltest du möglichst viel komprimieren. Durch Komprimierung kannst du die Seitengeschwindigkeit erhöhen, indem du Bandbreite einsparst. Die gzip-Komprimierung ist eine Methode zur Komprimierung von Dateien und kann auf den meisten Servern eingerichtet werden, aber es sind auch noch andere Optionen verfügbar.
Du kannst zudem die meisten Codes einen Minimalisierungsprozess durchlaufen lassen, was wiederum die Größe der endgültigen Übertragungsdatei reduziert. Allerdings ist es schwierig, mithilfe dieser Methoden Bilder zu komprimieren. Du kannst die Seite „Performance Review“ (Leistungsüberprüfung) auf WebPageTest.org nutzen, um eine umfassende Optimierungscheckliste einzusehen, die alle Assets auf der Seite anzeigt, und auch, ob sie mit gzip komprimiert wurden und zu welchem Grad.
Für die Komprimierung von Bildern führst du keine zip-Komprimierung und Minimierung durch, sondern stellst sicher, dass der Designer die Bilder dem Entwickler in einem möglichst komprimierten Format zur Verfügung stellt und so die Größe der Bilddateien reduziert. Im Wesentlichen muss der Designer die Dateigröße so klein wie möglich halten, ohne dadurch die Optik des Bildes zu beeinträchtigen.
Fotos sollten generell als JPG-Dateien gespeichert werden, Symbole und Illustrationen als GIF-Dateien. Damit große Bilder auf Vollbildcomputern ansprechend aussehen, ohne kleine Bildschirme von Mobilgeräten ins Stocken zu bringen, solltest du in Betracht ziehen, das Protokoll für Responsive Images oder einen Image-Server wie den von Fastly zu verwenden, um eine vorskalierte Version des Bildes dynamisch an kleinere Bildschirme zu senden.
6. Speichere die richtigen Seiten zum richtigen Zeitpunkt zwischen.
Der nächste Schritt besteht darin, Browsern und Bots dabei zu helfen, zu erkennen, was wiederverwendet werden kann und was jedes Mal neu abgerufen werden muss, und zwar durch Browser-Caching. Browser-Caching ist eine Funktion, die auf unterschiedliche Arten eingerichtet werden kann – eine von ihnen erfolgt über CDNs (Content Delivery Networks).
Die meisten Elemente einer Website – vor allem bei Websites, die höchstens einmal pro Woche geändert werden und keine Echtzeit-Informationen wie Nachrichten, Wetter oder Sportergebnisse übermitteln – können bis zu einem Jahr im Cache zwischengespeichert werden. Caching bedeutet, dass der Browser beim Besuch einer Seite durch einen Benutzer den lokalen Speicher durchsucht, um herauszufinden, ob bereits eine Datei vorhanden ist, die für das Anzeigen der Seite gebraucht wird.
Das reduziert Umlaufzeiten und verbessert die Ladezeit. Suchmaschinen-Bots betrachten Seiten immer, als hätten sie sie noch nie zuvor besucht, sodass sie kein aktives Caching verwenden, aber sie können Caching registrieren und gegebenenfalls zur Schätzung der Ladezeit einer Seite verwenden.
Im Hinblick auf Caching ist es wichtig, zu verstehen, dass es auf Dateinamen und deren Speicherort auf dem Server basiert. Wenn du also eine Datei auf vielen Seiten verwendest, wie beispielsweise ein Logo, solltest du sie immer mit dem gleichen Dateinamen und derselben URL referenzieren, auch, wenn sie an mehreren Orten auf deinem Server vorhanden ist.
Du kannst diese Funktion zu deinem Vorteil nutzen, da dies bedeutet, dass du einfach nur den Dateinamen eines Elements und dessen Referenz im HTML-Code aktualisieren musst, um eine neue Version des zwischengespeicherten Elements zu erhalten. Wenn du also beispielsweise dein Logo optimiert hast, musst du einfach nur den Dateinamen von „Logo“ zu „Logov2“ ändern. Dadurch wird die neue Version im Cache zwischengespeichert und die alte Version vergessen.
Wenn du ein Element also für ein Jahr im Cache zwischenspeichern lässt, bedeutet das nicht, dass du das Element ein Jahr lang nicht ändern wirst. Es bedeutet, dass du im Falle von Änderungen das aktualisierte oder neue Element mit einem neuen Dateinamen referenzieren wirst.
Cache-Einstellungen können ein wenig kompliziert sein. Daher solltest du sie dir am besten wie Lebensmittel vorstellen, die ablaufen können. Einige Lebensmittel laufen schneller ab als andere. Daher musst du den Browser darüber informieren, welche Dinge schneller alt werden und weggeworfen werden müssen und was sich ohne Ersatz problemlos für eine Weile aufbewahren lässt.
Du kannst ein Tool wie WebPageTest.org verwenden, um herauszufinden, welche Möglichkeiten du hast. Wichtig ist vor allem, zu beachten, dass es kein festgelegtes Ablaufdatum und keine maximale Dauer gibt, für die ein Element im Cache existieren kann. Daher geht der Browser standardmäßig davon aus, dass er das Element jedes Mal neu abrufen muss – Browser-Caching ist erst möglich, sobald diese Details angegeben wurden.
Da die Cache-Einstellungen dem Browser mitteilen, wann ein Element zu alt ist, um verwendet zu werden, wird diese Zeitspanne manchmal als „Caching-Lebensdauer“ oder „Haltbarkeitsdauer“ bezeichnet. Wenn ein Element seine Haltbarkeitsdauer oder Caching-Lebensdauer überschritten hat, muss der vollständige Umlauf durchgeführt werden, um vom Server eine aktuelle Version zu erhalten. Wenn Elemente als „abgelaufen“ aufgeführt sind, bedeutet das, dass sie ihre Haltbarkeitsdauer überschritten haben, was sowohl in Bezug auf Lebensmittel als auch in der Browseranalogie bedeutet, dass sie ersetzt werden müssen, wenn sie das nächste Mal benötigt werden.
Ebenso wie es wenig Sinn macht, eine Speisekammer voller abgelaufener Lebensmittel zu haben, macht es auch keinen Sinn, einen Zwischenspeicher voller abgelaufener Webinhalte zu haben. Umgekehrt ist es ebenso wenig sinnvoll, Lebensmittel (Dateien) zu entsorgen, die noch problemlos verwendbar sind. Wenn du deinen Dateien Caching-Lebensdauern zuweist, ist es nützlich, diesen Aspekt im Hinterkopf zu behalten und auch die Konsequenzen einer besonders langen Caching-Lebensdauer zu berücksichtigen.
Wenn du geringfügige Änderungen an deinem Logo vornimmst, wird es nicht das Ende der Welt bedeuten, wenn das alte Logo noch angezeigt wird. Deshalb kannst du diese Caching-Lebensdauer länger halten, vor allem, wenn du planst, Dateinamen bei Änderungen sorgfältig zu aktualisieren. Wenn du unterschiedliche Dateinamen verwendest, musst du dir keine Sorgen machen, dass noch das alte Logo angezeigt wird
7. Erstelle Accelerated Mobile Pages (AMPs).
All das kann kompliziert erscheinen, darum hat Google eine einfachere Lösung zur Optimierung der Seitengeschwindigkeit konzipiert. Accelerated Mobile Pages (AMP) ist eine Untergruppe von HTML, für die viel strengere Richtlinien darüber gelten, was enthalten sein kann. Das Ziel ist, die Ladezeit der meisten Seiten auf Mobilgeräten auf eine Sekunde zu reduzieren. Dies wird meistens auch erreicht. AMP ermöglicht es Google, den Großteil der komplizierteren Aspekte durch Caching und die Konfigurierung des Ladeprozesses sowie die Mehrheit der oben beschriebenen Elemente zu übernehmen. Das sorgt für eine bestmögliche Optimierung.
In einigen Fällen erstellen Unternehmen neue AMP-Seiten und verlinken sie, ausgehend vom Head-Tag, mit bestehenden Seiten auf der Website. So weiß Google, dass die AMP-Seite angezeigt werden soll, wenn die Person, die die Seite anfordert, ein Mobilgerät oder eine langsame Verbindung verwendet. In anderen Fällen kannst du die bestehenden Seiten (oder ihre bestehenden mobilen Seiten, wenn separate Websites vorhanden sind) durch AMP-Seiten ersetzen. Dies wird als „kanonische AMP“ bezeichnet.
Google bevorzugt diese Methode, da Google AMP-Seiten äußerst einfach crawlen, rendern, indexieren und ranken kann. Unternehmen mögen die Methode jedoch nicht unbedingt, da die Einschränkungen und Anforderungen von AMP die Seiten sehr nüchtern erscheinen lassen können. AMP kann außerdem einige der Tracking- und Testmöglichkeiten einschränken oder verkomplizieren, die dir für Desktop-Seiten zur Verfügung stehen; das ist ein weiterer Grund, warum einige diese Methode vermeiden.
Websites, die AMP-gültig sind, befolgen alle AMP-Regeln und -Richtlinien, und Google zeigt in den mobilen Suchergebnissen einen kleinen grauen Blitz neben ihnen an. Google fügt sie eher in spezielle Ergebniskarussells ein, die häufig oben auf der Seite angezeigt werden.
Das ist von großem Vorteil. Wenn aber die AMP-Gültigkeit zu viele Probleme für deine Website verursacht, ist es in Ordnung, AMP-Code zu verwenden, ohne AMP-gültig zu sein. Du solltest AMP-HTML verwenden, wann immer möglich – ohne dir darüber Sorgen zu machen, ob du alle Regeln befolgst. Du wirst trotzdem von der Geschwindigkeit von AMP-HTML und AMP-JavaScript profitieren. Das ist kein schlechter Deal, wenn man bedenkt, dass es kostenlos ist.
Denke daran, dass die Geschwindigkeit einen direkten Einfluss auf das Engagement und die Konversion hat, aber wahrscheinlich auch im Hinblick auf Crawl-Tiefe und andere Aspekte der Crawl-Effizienz hilfreich ist.
Mobile Browser funktionieren anders als Desktop-Browser. Zudem haben sie langsamere Prozessoren und weniger zuverlässige Verbindungen. Aufgrund dieser Faktoren ist es wichtig, die Ladezeit der Seiten deiner Website unter den denkbar schlechtesten Bedingungen zu prüfen. So findest du heraus, wo echte Verbesserungsmöglichkeiten vorhanden sind.
Geschrieben von Cindy Krum für Mailchimp. Cindy ist Expertin für mobile SEO-Features.
Wichtige Erkenntnisse
- Höhere Seitengeschwindigkeiten verbessern das Crawl Budget von Google und helfen dabei, mehr Seiten deiner Website zu indexieren, um insgesamt besseren organischen Traffic zu erzielen.
- Mobile Benutzer möchten, dass Seiten in weniger als 3 Sekunden laden, und langsame Geschwindigkeiten führen zu hohen Bounce-Raten, die dein Ranking beeinträchtigen.
- Mobile Browser funktionieren anders als Desktop-Browser, daher ist die Reduzierung der Anzahl der Serveranfragen entscheidend für die Optimierung der mobilen Geschwindigkeit.
- Die Seitengeschwindigkeit wirkt sich direkt auf die Core Web Vitals-Metriken von Google aus, die heutzutage wesentliche Rankingfaktoren für die Mobile-First-Indizierung sind.