Immer mehr Menschen nutzen das Handy, um ins Internet zu gehen. Es ist günstiger als ein Computer, lässt sich intuitiv bedienen und bietet mobile Daten für Internet außerhalb der eigenen vier Wände. Egal, ob Surfen auf dem Sofa oder Nachschauen der nächsten Zugverbindung, es ist einfach praktisch.
Laut Statista ist im Jahr 2020 der Anteil der Internetnutzer auf 80 % gestiegen. Das ist eine gigantische Zielgruppe, welche Sie jedoch nur mit einer schnellen Website erreichen können. Wir zeigen Ihnen deshalb, wie Sie Ihre mobile Website schneller machen können und dadurch zufriedene Besucher bekommen.
Das Wichtigste zuerst
Bevor wir uns an die konkreten Tipps für eine schnellere Website machen, noch ein Tipp für ein verbessertes Nutzererlebnis: Besonders bei mobilen Nutzern ist Empathie gefragt. Fragen Sie sich, wonach ein Besucher sucht, wenn er auf Ihre Seite gelangt und bieten Sie diese Inhalte auf den ersten Blick.
Bei einem Restaurant könnte das die Speisekarte und Öffnungszeiten sein, bei einem Steuerbüro die Lage und Leistungen. Für einen Onlineshop hingegen machen ein Suchfeld und die Produktübersicht Sinn. Finden Ihre Besucher ohne Probleme, das wonach sie suchen, sorgt das für positive Assoziationen mit Ihrem Unternehmen.
Was ist eine gute Ladezeit für mobile Seiten?
Nach Googles Richtlinien ist eine gute Ladezeit für mobile Seiten alles unter drei Sekunden. Dadurch werden Kaufabbrüche und Seitenausstiege signifikant verringert und die Kundenzufriedenheit erhöht. Zudem steigern Sie Ihre Wettbewerbsfähigkeit.
Besonders wichtig ist auch eine geringe „Time to First Byte“. Sie gibt an, wie lange es dauert, bis die Datenübertragung beginnt. Da niemand lange auf weiße Bildschirme starren möchte, empfiehlt Google hierfür unter 1,3 Sekunden.
Der passende Mobile PageSpeed Test zur Bestandsaufnahme
Wenn Sie wissen möchten, wie Ihre mobile Website abschneidet, gibt es dafür ein passendes Tool von Google. Test My Site ist ein Mobile PageSpeed Test, mit dem Sie die Ladezeit Ihrer Webseite überprüfen und dabei auswählen können, ob die Inhalte über 3G oder 4G geladen werden sollen.
Eine Website mit einer Ladezeit von weniger als 2,5 Sekunden gilt als schnell und zwischen 2,5 und 4 Sekunden als durchschnittlich. Braucht die Seite länger als 4 Sekunden zum Laden, wird sie von Google als langsam bewertet.
Google gibt anschließend auch einige Verbesserungsvorschläge. Damit Sie sich jedoch nicht erst umfassend belesen müssen, haben wir für Sie sieben einfache Tipps für eine schnellere mobile Website zusammengestellt.
Klein und fein – Website mobilfähig machen durch weniger Daten
Müssen weniger Elemente geladen und weniger Daten übertragen werden, so steigt die Ladegeschwindigkeit. Durch Kompression, geschickte Auswahl der Fonts und minimierten Code lässt sich die Datenmenge reduzieren. Beachten Sie auch immer die Tipps aus unserem Artikel zur PageSpeed Optimierung, wo wir bereits teilweise auf dieses Thema eingegangen sind.
Daten komprimieren mit GZIP
Durch GZIP-Komprimierung lassen sich Dateien schrumpfen, wodurch sich insgesamt die Größe von Seiten verringern lässt. Es funktioniert im Prinzip wie eine klassische Komprimierung mittels zip oder rar.
Auf Ihrem Server sind die benötigten Ressourcen in der GZIP-Version verfügbar und bei einem Aufruf der Website werden die GZIP-Dateien übertragen und vom Browser automatisch entpackt. Am einfachsten lässt sich GZIP über ein Plugin wie WP Rocket aktivieren.
Weniger und die richtigen Schriftarten wählen
Zwar können viele verschiedene Fonts (Schriftarten) manchmal ganz schick sein, in der Regel behindern sie jedoch den Lesefluss. Da unbekannte Schriftarten außerdem übertragen werden müssen, sollten Sie sich auf zwei Fonts pro Seite beschränken.
Dazu kommt, dass manche Fonts schneller laden als andere. Bei einer Auswertung von KeyCDN schnitten die beiden Schriftarten „Arial“ und „OpenSans“ am besten ab und lieferten die schnellsten Ladezeiten.
Code minimieren und Unnötiges streichen (Minify)
Alle Dateien auf Ihrer Seite bestehen aus Code und jedes Zeichen in dem Code erhöht die Dateigröße. Minify (das Minimieren von Code) zielt darauf ab, Überflüssiges zu streichen und dadurch Platz zu sparen. Kommentare, Formatierungen und unnötige Leerzeichen verschwinden so. Ein praktisches WordPress-Plugin dafür ist Autoptimize.
Beim Minimieren werden oft auch mehrere CSS, HTML oder JavaScript Dateien zusammengefügt. Mit dem neuen HTTP/2 Standard ist dies jedoch nicht mehr notwendig und sogar nachteilig, da viele kleine Dateien parallel geladen werden können, eine große jedoch lange Zeit in Anspruch nimmt.
HTTP-Requests optimieren – weniger Fragen, weniger Stress
Je mehr Fragen Ihnen jemand stellt, desto mehr beansprucht er Ihre Kapazitäten und desto langsamer antworten Sie höchstwahrscheinlich. Ähnlich funktioniert es beim Webserver. Wenn Sie Ihre Website dahin gehend optimieren, dass Besucher möglichst wenige HTTP-Requests an den Server senden müssen, lädt Ihre Seite infolge schneller.
Weiterleitungen verringern oder vermeiden durch Responsives Design
Gibt es auf Ihrer Website Weiterleitungen, so sind diese in der Regel Zeitfresser. Grund dafür ist, dass der Server die benötigten Ressourcen ebenfalls durch die weitergeleitete Seite anfordern muss, wodurch zusätzliche HTTP-Requests entstehen.
Viele Seiten leiten mobile Nutzer beim Besuch der Homepage auf eine extra Version wie „m.IhreWebsite.de/home“ weiter. Sparen Sie Ihren Nutzern diese Weiterleitung und dadurch Zeit und setzen Sie stattdessen auf ein Responsives Webdesign. Das Ergebnis ist eine einzige Version Ihrer Seite, die sich optisch an das jeweilige Endgerät anpasst.
Die neueste PHP-Version nutzen
Manchmal lassen sich die HTTP-Requests nicht weiter reduzieren, in diesem Fall kann an der Stellschraube PHP gedreht werden. PHP ist eine Programmiersprache und ist für eine WordPress-Website unerlässlich. Je aktueller die PHP-Version, desto mehr Anfragen (Requests) können gleichzeitig bearbeitet werden.
Verschiedene Auswertungen zeigen, dass die Unterschiede zwischen den einzelnen PHP-Versionen dabei signifikant ist. Je nach verwendeten Plugins und WordPress Versionen unterscheiden sich zwar die konkreten Ergebnisse, doch ein Update ist es in den meisten Fällen. Bei Shared-Hosting müssen Sie dafür mit Ihrem Webhosting-Anbieter sprechen.
Ladezeiten direkt verringern – oder zumindest die Illusion erzeugen
Es gibt zwei einfache Methoden, mit denen Sie im Handumdrehen das Nutzererlebnis Ihrer mobilen Website verbessern können. Eine sorgt für die sofortige Umsetzung von Eingaben auf dem Touchscreen, die andere gibt dem Besucher das, was er braucht.
Doppeltipp-Zoom deaktivieren
Wenn Sie eine Internetseite auf Ihrem Handy besuchen und die Schrift zu klein ist, müssen Sie zoomen. Dies geht entweder durch das Auseinanderziehen von zwei Fingern oder durch ein doppeltes Tippen. Da sich der Browser immer auf Letzteres einstellen muss, werden Befehle um ca. 300 Millisekunden verzögert ausgeführt, das sind zwei Wimpernschläge.
Sie können diese Verzögerung mühelos entfernen, indem Sie etwas Code in den Header Ihrer Seite einfügen. Wie immer eignet sich dafür ein Plugin, zum Beispiel Head, Footer and Post Injections. In den Header Ihrer Seite müssen Sie nach erfolgreicher Installation nur folgenden Code einsetzen:
<meta name=“viewport“ content=“width=device-width“>
Dadurch wird das Sichtfenster zu der Breite des Geräts gesetzt, wodurch Browser denken, dass die Texte gut auf kleinen Bildschirmen lesbar sind. Sie sollten also gleichzeitig sicherstellen, dass alles auf einen Blick erkennbar ist, denn nur dann ist es auch eine Hilfe für Ihre Nutzer.
JavaScript-Code am Ende der Seite einbauen
JavaScript wird für die Ausführung von Funktionen auf einer Website benötigt. Die Programmiersprache sorgt für eine interaktive Website, indem es beispielsweise dafür sorgt, das Login-Buttons den Nutzer in sein Konto einloggen.
Normalerweise „liest“ der Browser den Code der Webseite von oben nach unten. Trifft er auf JavaScript, lädt er zuerst die erforderlichen Dateien runter und führt das Script anschließend aus. Erst dann baut er die Seite weiter auf.
Da die meisten Scripts jedoch erst benötigt werden, nachdem die Seite bereits aufgebaut ist, sollte JavaScript, wenn möglich, am Ende der Seite eingebaut werden oder mittels „defer“-Tags verzögert geladen werden. Mit dem Plugin Async JavaScript können Sie unkompliziert die „defer“ Option für Ihr JavaScript aktivieren.
Somit wird das Wichtigste zuerst aufgebaut und erst im Anschluss JavaScript ausgeführt und aktiviert. Sie geben also dem Nutzer also auf den ersten Blick genau das, wonach er beim Aufruf Ihrer Website sucht – womit wir wieder beim ersten Punkt wären.
Fazit – die Website für mobile Geräte optimieren heißt Fokus auf den Nutzer
Damit Ihre mobile Website schneller lädt, sollte die Dateigröße der Website verringert und HTTP-Requests minimiert werden. Im Kern geht es allerdings immer um die Nutzer, denn sie sollen schließlich von den schnellen Ladezeiten profitieren.
Da die Wahrnehmung jedoch subjektiv ist, können eine Ausführung von JavaScript am Ende und die frühe Darstellung der wichtigen Informationen sogar noch mehr Auswirkungen haben als die anderen Tipps. Sie verbessern zwar nicht zwangsläufig die Ladezeiten, geben den Besuchern aber schneller das, wonach sie suchen.
Optimieren Sie Ihre Website deshalb stets im Sinne der Besucher. Bei Bedarf helfen wir Ihnen auch gerne dabei!
