Google Page-Speed: Langsame mobile Seiten vermeiden

Smartphone und Tablet sind aus unserem privaten und beruflichen Alltag nicht mehr wegzudenken und zu ständigen Begleitern geworden. Ob E-Mails schreiben, Bestellungen aufgeben oder nach Informationen suchen: Das alles machen wir gerne von unterwegs, wenn sich gerade ein Zeitfenster ergibt. Oder aber immer dann, wenn es zu Hause zu umständlich wäre, den PC anzuwerfen.

Dass User in diesem Fall lieber zu mobilen Endgeräten greifen, zeigen diverse Studien, die in der Vergangenheit durchgeführt wurden. Allein zwischen 2013 und 2015 hat sich die Verwendung mobiler Endgeräte weltweit nahezu verdoppelt. (Quelle: https://de.statista.com/statistik/daten/studie/181973/umfrage/genutzte-mobilgeraete-fuer-mobilen-internetzugang-in-deutschland/)

Navigiert man auf eine Website oder einen Online-Shop, der nicht für mobile Endgeräte optimiert ist, führt das zu Frustration. Schließlich lässt dann die Bedienbarkeit zu wünschen übrig und der User verlässt enttäuscht die Seite – ob er zu einem späteren Zeitpunkt nochmal wiederkehren wird, scheint eher unwahrscheinlich. Einmal „verprellte“ User lassen sich nur schwer zurück gewinnen.

Das verdeutlicht, warum Google im April 2015 die „Mobile Optimierung“ als offiziellen Rankingfaktor eingeführt hat. Doch immer noch gibt es hier und da Websites und Online-Shops, die entweder gar nicht oder aber nicht professionell für mobile Endgeräte optimiert wurden.

Einen ganz wesentlichen Aspekt stellt in diesem Zuge die Ladezeit einer Seite dar, denn: Lange Ladezeiten sind der „Conversion Rate-Killer“ mobiler Websites.

„Killer-Kriterium“: Zu lange Seitenladezeiten

Google hat sich zum Ziel gesetzt, das Web schneller zu machen. Die Ladezeit von Websites („Page Speed“) ist bereits seit einiger Zeit ein wesentlicher Rankingfaktor.

Sie kennen das sicher von ihrem Surf-Verhalten: Wer auf eine Seite mit langen Ladezeiten navigiert, ist schnell dazu geneigt, den Ladeprozess abzubrechen und eine andere Seite aufzurufen.

Studien haben herausgefunden: Pro 1 Sekunde mehr Wartezeit, resultieren 7% weniger Conversions, 11% weniger Seitenaufrufe und 16% Abnahme der User-Zufriedenheit. Das zeigt, wie fatal sich lange Ladezeiten auswirken können. (Quelle: http://mashable.com/2011/04/06/site-speed/#xpGYnvGx8kqP)

Unser Tipp: Um herauszufinden, wie lange es dauert, bis die eigene Seite geladen hat, gibt es online verschiedene Tools – suchen Sie einfach mal nach „Page Speed Test“.

Doch was ist zu tun, wenn sich herausstellt, dass die Seite wirklich Defizite im Hinblick auf die Ladezeit aufweist? Achtung, jetzt wird es zugegebenermaßen ein wenig „technisch“:

Stylesheets und Java Script-Dateien „minified“ verwenden

Die erste Möglichkeit besteht darin, Stylesheets und Java-Script-Dateien in verkleinerter Version zu verwenden, weil diese – anders als Inline-Styles oder Inline-Javascript-Code – im lokalen Browsercache zwischengespeichert werden können. Java-Script-Dateien haben längere Ladezeiten, da der Code beim Client, also beim Nutzer selbst, ausgeführt wird und nicht beim Server.

JavaScript vor Ende des Body-Tags einbinden

Bindet man das Script im Header ein, wird zuerst dieses Element geladen, der entsprechende Code ausgeführt und erst danach die weiteren Elemente der Website dargestellt – und genau das macht die Seite langsam. Aus diesem Grund ist es sinnvoll, das Java-Script erst vor dem Ende des Body-Tags einzubinden.

Schriftarten anpassen

Auch in Bezug auf Schriftarten gibt es einige Aspekte zu beachten. Nach Möglichkeit ist auf besondere Schriftarten, die in Webfonts konvertiert werden müssen, zu verzichten. Stellt das keine Option dar, so sind die erforderlichen Daten in externe Dateien auszulagern und zu minimieren. Als eine weitere Möglichkeit bieten Anbieter, wie Google oder Cufon, optimierte Webfonts an.

Nutzung von Code Distribution Networks

Durch die Benutzung von CDNS (Code Distribution Networks) können Bibliotheken, wie JQuery oder Bootstrap, extern über Google oder andere Anbieter gehostet werden, um Ladezeiten zu verringern. Die Anfrage an den Google-Server funktioniert dann wesentlich schneller, als das bei dem eigenen Server der Fall wäre. Ein weiterer Vorteil: Man muss sich nicht darum kümmern, dass die aktuellste Version der Bibliothek eingebunden wird, denn das passiert dann automatisch.

Keine Inline-Styles verwenden

Zudem sind Inline-Styles zu vermeiden – das heißt, das „Style Attribut“ sollten nicht direkt im Tag verwendet werden, denn das wirkt sich negativ auf die Ladezeit aus. Besser wäre, dem Tag eine eigene CSS-ID oder eine eigene CSS-Klasse zu zuweisen und den Style des Objekts dann in eine Datei ausgelagertem Stylesheet anzupassen.

Auf angepasste Bildgrößen achten

Bei der Verwendung von Bilddateien ist unbedingt auf die verwendete Dateigröße zu achten. Am besten wird mit “angemessenen” Dateigrößen von ca. 150 KB gearbeitet.

Neben der Dateigröße spielt auch das verwendete Dateiformat eine Rolle – so verkürzt die Verwendung der Formate .jpg, .gif und .png ebenfalls die Ladezeit, da diese Formate das Bild komprimieren.

Bilder sind nach Möglichkeit in nativer Auflösung bereit zu stellen, das heißt: Zum Beispiel sollte ein Thumbnail nicht in einer hohen Auflösung von 1000 x 1000 Px zur Verfügung gestellt werden, sondern in einer angemessenen Größe von etwa 150 x 150 Px. Für mobile Endgeräte mit hoher Auflösung kann man die doppelte Größe ansetzen, damit sich ein hochwertigeres Bildergebnis erzielen lässt. Je hochauflösender sich das Bild darstellt, desto mehr fördert es die User-Experience auf der Website. Schließlich muss der User auf dem Bild gut erkennen können, wonach er gesucht hat – ohne dabei Kompromisse bei der Ladezeit einzugehen. Wie Sie weiter Bilder optimieren können, erfahrern Sie dem Link folgend.

Optimierung von MySQL und Queries

Werden von der Datenbank viele Elemente oder eine große Menge an Daten abgerufen, bietet sich eine Optimierung von MySQL und von vorhandenen Queries (Anfragen an eine Datenbank, z.B. „Liefere mir alle veröffentlichte Postings“) ebenfalls an, um die Ladezeit der Seite zu verkürzen. Die Queries lassen sich optimieren, indem nur benötigte Ergebnisse abgerufen werden oder indem ein großes Query in mehrere kleine unterteilt wird.

Zugegeben: Zur Verkürzung der Ladezeiten einer Seite sind entsprechende Webentwicklungs-Kenntnisse von Vorteil und auch notwendig. Für wen das ein sprichwörtliches „Buch mit sieben Siegeln“ ist, sollte sich an einen Experten – also an einen erfahrenen Entwickler oder an eine entsprechende Agentur wenden – die dann die Optimierung hinsichtlich der Ladezeiten übernimmt. Üblicherweise berücksichtigt der Entwickler die genannten Aspekte bereits im Rahmen der Website-Erstellung.

Weitere Erfolgsfaktoren einer mobilen Optimierung

Natürlich gibt es im Rahmen der mobilen Optimierung neben dem Faktor „Ladezeit“ noch viele weitere Aspekte, denen Beachtung geschenkt werden sollte. Dazu gehören eine klare Website-Strukturierung, eine einfache Bedienbarkeit und übersichtliches Design. In der Praxis hat es sich bewährt, bei der Realisierung den Ansatz „Mobile First“ zu verfolgen – darüber haben wir in einem unserer vorigen Blogartikel bereits berichtet.

Ganz klar: Dabei sind Webentwicklungs-Kenntnisse erforderlich. Wer über diese nicht verfügt, sollte einen Experten zu Rate ziehen, der die genannten Handlungsempfehlungen bereits bei der Erstellung der Website berücksichtigt.

Fazit: Fehlende oder unzureichende mobile Optimierung hat Konsequenzen

In den Suchergebnissen sind optimierte Websites durch das Google-Label „Mobile friendly“ ausgewiesen. Fehlt diese Auszeichnung, besuchen User die jeweiligen Websites gar nicht erst. Und das wiederum bedeutet natürlich, man verliert als Unternehmen bares Geld und „verprellt“ die User langfristig. Da die mobile Optimierung seit dem Frühjahr 2015 einen wichtigen Rankingfaktor darstellt, wird Google die Seite bei Nichtvorhandensein einer mobilen Website-Version down ranken.

Wer herausfinden möchte, wie gut die eigene Website (oder die der Konkurrenz) für mobile Endgeräte optimiert ist und Handlungsempfehlungen benötigt, kann hierfür das Google-eigene Tool „Page Speed Insights“ kostenlos nutzen.

written by

Mitgründer von Backlinktest.com - DEM Backlinkchecker :-)
Related Posts

One Response to "Google Page-Speed: Langsame mobile Seiten vermeiden"

  1. Andy says:

    Habe eben den Google Speed Test gemacht und gesehen das ich noch einiges verbessern muss, auf jeden Fall ein guter Beitrag. Ich mach mich gleich and Werk 😀 Liebe Grüße

    Antworten

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.