Was viele schon lange erwartet haben, wurde am 21. April 2015 Realität. Google brachte an diesem Tag ein Update heraus, dass speziell mobile Webseiten betrifft. Kurzum: Mobile Webseiten, die nicht für Mobilgeräte wie Smartphones und Tablets optimiert sind, müssen seit diesem Tag damit rechnen, im Ranking herabgestuft zu werden.

Während die Google-Updates Panda und Penguin in den Jahren zuvor Webseiteninhalte und Indexmanipulationen im Visier hatten, geht es nun um die Nutzerfreundlichkeit von Webseiten auf Mobilgeräten. Das Schlagwort, unter dem diese Updatekampagne läuft, lautet dementsprechend „mobile friendliness“. Anders als bei den früheren Updates, die überfallartig über die Netzwelt hereinbrachen – und das war neu – kündigte der Suchmaschinengigant sein Update Wochen vorher an. Zeit genug, um Vorkehrungen für den Tag X zu treffen, den Google auf den 21. April 2015 gelegt hat.

Sehen wir uns die Fakten an: Die Anzahl der Webseiten, die über Mobilgeräte aufgerufen werden, ist in den letzten Jahren rasant angestiegen. Bereits in 2014 lag der Anteil weltweit bei 27 Prozent – Tendenz weiter steigend.

Mehr Statistiken finden Sie bei Statista

Gleiches gilt für die mobile Internetnutzung: Lag sie im Jahr 2012 in Deutschland noch bei 27 Prozent, so hat sie sich in 2014 mit 54 Prozent verdoppelt. Vor diesem Hintergrund ist es nur zu verständlich, dass Google nun mobil-freundliche Webseiten als Rankingfaktor einführen will.

Wenn auch du deine Seiten für mobile Nutzer und das Mobile-Friendly Google-Update fit machen willst, dann fange am besten sofort damit an. Wir möchten dir mit diesen 8 Tipps aufzeigen, worauf es ankommt und was du tun kannst, um den Anschluss in der mobilen Welt nicht zu verpassen.

Tipp 1: Mach deine Webseite jetzt responsive und stelle sie auf mobile Geräte ein

Natürlich könntest du mehrere Layouts für die meistverbreiteten Bildschirmauflösungen erstellen. Der Nachteil dabei ist, dass du erstens für die Anzeige aller Seiten mehrere Versionen oder sogar Subdomains bräuchtest, zweitens eine Aktualisierung auf der Hauptseite nicht automatisch auf den anderen Seiten übernommen würde und drittens alle Webseiten einzeln für die Suchmaschinen optimieren müsstest. Davon abgesehen entstünde bei dieser Vorgehensweise Duplicate Content. Was Google davon hält, ist hinlänglich bekannt. Vergiss diese Strategie am besten gleich wieder und orientiere dich an den Google-Empfehlungen zu mobil-freundlichen Webseiten.

Die wichtigste Maßnahme, um deine Webseite mobil-freundlich zu gestalten ist, sie auf responsives Webdesign umzustellen. Dieses Konzept nutzt CSS Media Queries, über die sich feststellen lässt, welches Gerät mit welcher Bildschirmauflösung und Größe die Seite gerade aufruft. Die Seitenanzeige passt sich dann – je nach Umsetzung im Stylesheet – automatisch der Auflösung und Größe des Bildschirms an. Diese Maßnahme umfasst einen Mix aus flexiblen Layouts, Bildern sowie die intelligente Nutzung von Media Queries.

Beispiel einer Media Query per CSS für das iPhone 6

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2)
{ 
  // Hier deine CSS-Styles für das iPhone 6 im Landscape-Modus (quer)
}

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{ 
  // Hier deine CSS-Styles für das iPhone 6 im Portrait-Modus (hoch)
}

Tipp 2: Nutze am besten flexible Layouts für mehrere Geräte

Damit du nicht Layouts für 400 am Markt befindliche Gerätetypen vorhalten musst, gestaltest du das Layout so flexibel wie möglich. Denk vor allem daran, dass das Display eines Smartphones nicht sehr groß ist. Von daher sollte die Seitenanzeige auf dem Smartphone das Wesentliche enthalten. Hier gilt der Grundsatz „Weniger ist mehr“. Vermeide unbedingt ellenlange Texte, die sowieso niemand liest und durch die sich ein Nutzer erst scrollen muss, um zur Kernaussage deiner Webseite zu kommen. Strukturiere das mobile Layout so, dass Kontaktelemente, Telefonnummern, Zahlungsmöglichkeiten, Bewertungselemente und Schnittstellen zu sozialen Netzwerken möglichst zentral platziert werden und ohne Umwege zugreifbar sind. Auch so wichtige Informationen wie Versandkosten solltest du nicht irgendwo verstecken, sondern möglichst direkt ins Blickfeld des Nutzers rücken.

Um deine Webseite für die Mobilnutzung zu erweitern, kannst du entweder deine Stylesheets um responsive Styles über CSS3 Media Querys erweitern oder ein CSS Framework wie Bootstrap nutzen, das Stylesheets für responsives Webdesign umfassend unterstützt. Über ein zentrales Konfigurationsstylesheet lassen sich die Elemente wie Schriftart, Schriftfarbe und das Gestaltungsraster (Grid-Layout) anpassen. Media Querys fragen beispielsweise die maximale oder die Mindestbildschirmbreite ab. In den jeweiligen Abschnitten finden sich dann die entsprechenden Layoutanweisungen für diese Bildschirmgrößen.

Möchtest du mehrere Bilder in einer Übersicht anzeigen, ist es für Mobilgeräte wie Smartphones nicht unbedingt ratsam diese als Thumbnails auf der mobilen Webseite zu verkleinern. Viel sinnvoller ist es, eine Galerie anzubieten, durch die der Nutzer mit dem Finger scrollen kann.

Tipp 3: Verbessere die Geschwindigkeit deiner Webseite

Quelle: Studie „Mobile Internetnutzung – Gradmesser für die digitale Gesellschaft„

Bedenke, dass über das Mobilfunknetz nicht überall eine schnelle Internetverbindung verfügbar ist. Lädt eine Webseite zu langsam, dann verschwindet der Besucher erfahrungsgemäß so schnell, wie er gekommen ist. Aus dem Grund solltest du deine Webseite so optimieren, dass sie auch bei einer 3G-Verbindung zügig lädt.
Das erreichst du beispielsweise durch die Wahl der Elemente. Aufwendige Schriftarten, Animationen und hochauflösende Bilder laden relativ langsam und sollten deshalb vermieden werden. Die Dateigröße einer Bilddatei im PNG-Format kannst du übrigens mit TinyPNG um bis zu 70 Prozent ohne Qualitätsverlust reduzieren, damit das Bild schneller lädt. JPEG-Bilder lassen sich beispielsweisse in Adobe’s Photoshop mit der Funktion „Für Web speichern“ und einer Qualität von 60% in den meisten Fällen ebenso in optimaler Dateigröße und ohne Verluste speichern.

Tipp 4: Nutze Webhoster mit SSD-Festplatten und guter Anbindung

Natürlich hängt es auch vom Server ab, wie schnell eine Seite lädt. Nutze am besten nur schnelle Server mit SSD-Festplatten. Sie sorgen für schnelle Zugriffszeiten, was vor allem dann wichtig ist, wenn du mit Datenbanken arbeitest. Genauso wichtig wie die Festplatten ist natürlich auch der Rest der Hardware, wie genügend Arbeitsspeicher, CPU und eine gute Anbindung deines Webhosters an mehrere Internet-Backbones für schnelle Zugriffszeiten über das Netzwerk. Wir selbst haben sowohl mit Hosteurope, die WordPress Hosting mit SSD bieten, als auch mit Hetzner, der günstige Root-Server mit SSD-Festplatten bereitstellt, gute Erfahrungen gemacht. Ebenfalls empfehlenswert ist die Google Compute Engine, die Cloud Hosting mit SSD bietet.

Tipp 5: Nutze Caching und schreibe sauberen, reduzierten Code

Ganz wesentlich kannst du die Ladezeiten deiner Webseiten auch dadurch verbessern, wenn du dich an bestimmte Regeln beim Programmieren hältst. Nutze das Caching im Browser und auf dem Server und sorge dafür, dass dynamische Webseiten in dessen Arbeitsspeicher zwischengespeichert werden. Die Programmierung sollte nur „sauberen“ Code enthalten. Entferne daher allen unnötigen Code, weil dieser nur Ballast darstellt. Anstatt Grafiken solltest du nach Möglichkeit Stylesheets (CSS) nutzen und diese sowie Javascripts komprimieren. Eine weitere Verbesserung der Ladezeit lässt sich dadurch erzielen, wenn du Javascripts im Footer der Seiten lädst oder wenn du Bilder, CSS und Javascript auf eine andere Subdomain auslagerst.

Tipp 6: Prüfe die Geschwindigkeit deiner Webseite mit Google Pagespeed

Möchtest du Performanceschwachstellen deiner Webseite zuverlässig herausfinden, dann solltest du deine Webseite mit Google Pagespeed analysieren, mögliche Fehler korrigieren und die Empfehlungen unbedingt umsetzen.

Tipp 7: Teste deine Webseite mit den Google Webmaster Tools

Wenn du nicht sicher bist, ob deine Seite den Google-Anforderungen an eine mobil-freundliche Webseite bereits entspricht oder nicht, dann teste zunächst deine Webseite mit den Webmastertools von Google und unterziehe sie dem Google-Test auf Optimierung für Mobilgeräte. Gib einfach die URL deiner Webseite in das Eingabefeld ein und klicke dann auf die Schaltfläche „ANALYSIEREN“. Nach wenigen Sekunden zeigt dir Google das Testergebnis an und sagt dir gegebenenfalls, was noch verbesserungsbedürftig ist. Detaillierte Empfehlungen zur Verbesserung der Nutzerfreundlichkeit erhältst du, wenn du links unten auf den Textlink „PageSpeed Insights“ klickst. Hier listet Google nicht nur alle kleinen und großen „Sünden“ beim Webdesign auf und sagt dir konkret, was zu tun ist, sondern teilt dir auch mit, was an deiner Seite positiv auffällt. Alles bezieht sich wie gesagt auf die Nutzerfreundlichkeit sowohl auf mobilen Geräten als auch auf dem Desktop.

Tipp 8: Mach diese Änderungen noch heute, spätestens aber in den nächsten Tagen

Bedenke, dass Google einige Zeit braucht, bis deine Änderungen von den Crawlern erfasst und im Index gespeichert werden. Wenn du die Änderungen für deine mobil-freundliche Webseite erst in zwei Wochen machst, sind diese unter Umständen erst in zwei Monaten im Google-Index wirksam. Aus diesem Grunde solltest du die Änderungen möglichst sofort, spätestens aber innerhalb der nächsten Tage vornehmen. Nur so kannst du sichergehen, dass du so schnell wie möglich eine gute Positionierung in den mobilen Suchergebnissen hast und viele mobile Nutzer deine Webseite besuchen.

Sobald du mit den Optimierungen deiner Seite fertig bist, kannst du die erneute Indexierung deiner Webseite beschleunigen, indem du Google über die Aktualisierung informierst. Dies kannst du in den Webmaster Tools von Google tun. Logge dich mit deinem Account ein und wähle deine Webseite aus. Solltest du diese in den Webmaster Tools noch nicht angelegt haben, wird es jetzt nächste Zeit dafür. Klicke dann unter dem Punkt „Crawling“ den Link „Abruf wie durch Google„, wähle aus dem Dropdown den Punkt „Mobile: Smartphone“ aus und klicke auf „Abrufen„. Wenn der Status in der Tabelle auf Abgeschlossen steht, kannst du jetzt mit einem Klick auf den Button „An den Index senden“ Google über dein Update informieren.

Ich hoffe, wir konnten dir mit diesem Artikel die wichtigsten Informationen und Schritte mit auf dem Weg geben, wie du deine Webseite für mobile Nutzer und das große Mobile-Friendly-Update wappnen kannst. Direkt nach dem Lesen dieses Artikels solltest du nun beginnen, deine Webseite zu prüfen und mobil-freundlich zu optimieren. Vorher kannst du uns natürlich gerne noch einen Kommentar auf dieser Seite schreiben, über den wir uns sehr freuen würden.