So testen Sie Ihre Website auf Mobilgeräten

Möchten Sie wissen, wie Sie die mobile Version Ihrer Website effizient testen können? Und was sind die besten Tools zum Testen mobiler Websites? Also, dieser Artikel ist für Sie.

Warum sollten Sie sich um die Optimierung Ihrer mobilen Site kümmern?

Ende 2016 hatten mehr als 3,2 Milliarden Menschen Zugang zum Internet, und etwa 2 Milliarden von ihnen verwendeten mobile Geräte dafür. Nach den analytischen Prognosen wird eine Reihe von Menschen, die nur mobile Geräte für Internetaktivitäten nutzen, in den nächsten 5 Jahren jährlich um 25 Prozent zulegen.

Daher ist es wichtig zu überprüfen, ob Ihre Website für Handys geeignet ist.

Bevor Sie mit dem Testen der mobilen Version Ihrer Website beginnen, versuchen Sie einfach, einige häufig gestellte Fragen zu beantworten:

  • Wie schnell wird die Site geladen?
  • Ist der Inhalt attraktiv?
  • Macht die Website auf die wichtigsten Punkte Ihres Geschäfts aufmerksam?
  • Bietet die Site eine gute Erfahrung?
  • Ist die Website einfach und verständlich zu navigieren?
  • Ist die Zielseite für andere Seiten Ihrer Website interessant?

Die Hauptfaktoren der mobilen Leistungsoptimierung

Auch wenn die Antwort für alle „Ja“ lautet, sollten Sie die nächsten Faktoren der mobilen Leistungsoptimierung berücksichtigen:

Download-Geschwindigkeit wird immer mit Netzwerklatenz, Arbeitsspeicher, CPU und Cachegröße kombiniert. Alle sind im Vergleich zum Desktop viel kleiner, daher dauert das Laden länger.

Restriktives Laden. Sie müssen sicherstellen, dass die Benutzer nichts herunterladen, was sich auf die Geschwindigkeit der Website auswirkt.

Responsive Framework beschleunigt das Prototyping mobiler Funktionen und Layouts.

Schnell Wird geladen Zeit Dies verschafft Ihnen einen ernsthaften Wettbewerbsvorteil. Die folgenden Aktionen wirken sich auf die Ladezeit aus:

  • Abhängigkeiten reduzieren
  • Reduzieren Sie die clientseitige Verarbeitung
  • Bildgröße reduzieren
  • Reduzieren Sie den Inhalt
  • Vermeiden Sie die Umleitung von m-Punkten
  • Suchen Sie sich die richtige Hosting-Lösung aus
  • Begrenzen Sie die HTTP-Anforderungen
  • Aktivieren Sie die Komprimierung

Betrachten wir weitere Schritte, die Sie ausführen müssen, um die normale Funktionsweise Ihrer mobilen Website zu überprüfen.

Testen der Verbindung zwischen Desktop- und Mobilversion der Site

Weiterleitungstests:

  • Mobile Besucher sollten auf die mobile Version der Website umgeleitet werden
  • Desktop-Besucher sollten zur Desktop-Version der Site umgeleitet werden
  • Weiterleitungen ermöglichen den Besuchern den Zugriff auf die von ihnen benötigte Seite, nicht auf die Startseite
  • Mobile Besucher sollten eine leicht zu findende Option zum Anzeigen der Desktop-Version der Site haben.

Überprüfung des HTTP-Headers. Wenn Ihre Websites dynamisch geschaltet werden, sollten Sie einen Vary-HTTP-Header einrichten, um Google und den Browsern mitzuteilen, dass Sie den HTML-Code durch den Benutzeragenten ändern.

rel = Überprüfung alternativer / kanonischer Tags. Wenn Ihre Websites über eine separate URL verfügen, sollten Desktopseiten mit einem eingerichtet werden rel = „Alternate“ -Tag Verweis auf die mobile Version dieser Seite. Mobile Seiten sollten mit einem rel = „canonical“ -Tag eingerichtet werden, das auf die Desktop-Version dieser Seite verweist.

Testen technischer Probleme

Mobile XML-Sitemap

  • Alle mobilen Seiten sollten über eine XML-Sitemap in den Google Webmaster-Tools an Google gesendet werden
  • Mobile Seiten sollten von Desktop-Seiten getrennt werden

Site-Geschwindigkeit für mobile Geräte. Insbesondere für mobile Nutzer ist die Zeit, die sie für Ihre App benötigen, wahrscheinlich begrenzt, sodass sie schnell bereitgestellt werden muss.Google Page Speed ToolWebPagetest sind nützliche Werkzeuge zur Geschwindigkeitsmessung.

Speicherung und Daten:

  • Stellen Sie sicher, dass der Programmcode nicht leicht zugänglich ist
  • Der Benutzer löscht den Cache nicht, stellen Sie also sicher, dass nichts kaputt geht.

Testen der Benutzererfahrung (UX)

Website-Ansicht Ein:

Smartphones: iPhone (iOS), Samsung Galaxy (Android), Nexus (ein weiteres Android) und Windows Phone (Windows).

Tablets: iPad (iOS), Samsung Galaxy Tab in verschiedenen Größen (Android), Kindle Fire (Amazon) und Asus Transformer Book (Windows).

Sie sollten Werkzeuge wie verwenden Google Analytics um Geräte zu identifizieren, die häufig von Ihren Besuchern genutzt werden.

Links Größe. Der Abstand zwischen den Links sollte mindestens 28×28 Pixel betragen. Also sollten alle leicht mit dem Finger zu klicken sein.

Blitz. Die meisten mobilen Browser können keine Flash-Inhalte rendern. Verwenden Sie Flash daher nicht, wenn Sie möchten, dass Ihre Website für Handys geeignet ist.

Ansichtsfenster ermöglicht mobilen Browsern, die Größe von Seiten so zu ändern, dass sie perfekt auf Geräte passen. Deshalb müssen Sie es einrichten.

Pop-ups. Es gibt zwei Gründe, Popups in der mobilen Version Ihrer Website nicht zu verwenden:

  • Popups verlangsamen die Ladezeit der Seite
  • Popups sind zu einfach, um sie versehentlich anzuklicken. Sie entfernen die Besucher von der Seite, auf der sie sich befinden möchten.

Elemente enden. Die wichtigsten Elemente müssen oben sein. Die anderen Elemente Platzierung sollte einen Sinn haben.

Navigation. Stellen Sie sicher, dass alle Seiten der mobilen Website für Besucher erreichbar sind.

Inhalt

  • Für jede Desktopseite sollte eine entsprechende mobile Seite vorhanden sein
  • Die Anzahl der mobilen Seiten kann höher sein als die der Desktopseiten, da die Navigation auf mobilen Websites häufig einfacher ist.
  • Stellen Sie sicher, dass es keine gib tlexikalisch, weder Grammatikfehler in Ihrem Site-Inhalt.
  • Wenn Ihre Website nicht nur für lokale Besucher gedacht ist, sollten Sie angeben Lokalisierungstests mit anderen Worten, um geeignete sprachliche und kulturelle Aspekte für ein bestimmtes Gebietsschema zu überprüfen.
  • Unnötige Bilder sollten entfernt werden.

Video

  • Stellen Sie sicher, dass die Videos geladen sind und ordnungsgemäß ausgeführt werden
  • Verwenden Sie einen HTML5-Videoplayer, da das Rendern von Handys sehr einfach und das Gewicht gering ist.
  • Stellen Sie sicher, dass Ihre Videos ansprechend sind

Suchmaschinen-Ergebnisseite, SERP:

Stellen Sie sicher, dass Ihre Handy-URL benutzerfreundlich ist und dass Google mit zahlreichen Keywords die Metabeschreibungen für Handys mit ca. 120 Zeichen abschneidet.

Daher sollte Ihre URL dieses Limit nicht überschreiten. Google gibt Ihnen ungefähr 70 Zeichen (512 Pixel) in Ihrem Seitentitel, aber die Breite des Bildschirms zwingt den Seitentitel in zwei Zeilen. Aus diesem Grund sollten Sie sicherstellen, dass jeder Seitentitel in zwei Zeilen gut aussieht.

Zu viele Plugins hat die gesamte Erfahrung Ihrer mobilen Website beeinträchtigt. Überprüfen Sie daher die von Ihnen verwendeten Plug-Ins und löschen Sie die Plug-Ins, die Sie wirklich nicht benötigen.

10 Tipps zur Optimierung der mobilen Version Ihrer Website

Fassen Sie zusammen, hier sind 10 Ratschläge Um zu überprüfen, ob die mobile Version Ihrer Website für die Besucher zugänglich ist, gehen Sie wie folgt vor:

  1. Stellen Sie die Kompatibilität mit Funktions-Smartphones und -Tablets sicher
  2. Überprüfen Sie die normale Ladezeit
  3. Machen Sie die Site-Navigation so einfach wie möglich
  4. Stellen Sie sicher, dass die Tasten groß genug für Menschen mit großen Fingern sind
  5. Keine großen Textblöcke. Verwenden Sie Stichpunkte und kurze Sätze.
  6. Verwenden Sie kein Flash.
  7. Verwenden Sie keine Popups.
  8. Stellen Sie sicher, dass die Bilder die optimale Größe haben.
  9. Stellen Sie sicher, dass Ihre Telefonnummer nur einen Klick vom Wählen entfernt ist
  10. Stellen Sie sicher, dass die Website über GPS auf Ihren Standort zugreifen kann

Wenn wir nun wissen, was genau getestet werden sollte, sollten wir einige Tools und Methoden zum Testen in Betracht ziehen.

Testen auf den realen Geräten

In einer perfekten Welt sollte jede Website auf jedem gängigen Mobilgerät getestet werden, auf dem sie angezeigt werden kann. Das Testen an realen Geräten hat natürlich viele Vorteile:

  • Das Testen erfolgt in einer realen Umgebung mit sehr realen Bedingungen
  • Das Testen erfolgt auf dem realen Betriebssystem mit den Verbesserungen des Herstellers
  • Die tatsächliche Geräteleistung von a ist im Vergleich zu anderen virtuellen Optionen einfacher
  • Das Testen der Interoperabilität ist einfacher
  • Einfache Fehlerreplikation
  • Bildschirmauflösung und -helligkeit können in einer Reihe verschiedener Szenarien problemlos getestet werden
  • Funktionen wie Push-Benachrichtigung, Geolocation und Orientierung sowie WLAN-Konnektivität dürfen getestet werden
  • Die Funktion bei eingehenden Interrupts wie SMS und Anrufen konnte getestet werden
  • Die Funktion unter Bedingungen der Batterieentleerung konnte getestet werden

Leider ist die Welt, in der wir leben, nicht perfekt. Hier sind einige Nachteile des Testens auf den realen Geräten:

  • Es gibt viele mobile Geräte
  • Das Testen auf den realen Geräten ist teuer und zeitaufwändig
  • Selbst wenn Sie in Ihrem Unternehmen über eine breite Palette mobiler Geräte verfügen, haben Mitarbeiter, die sich in anderen Büros befinden oder remote arbeiten, nicht Zugriff auf alle Geräte
  • Die Wartung des Gerätes ist ebenfalls kostenaufwendig

Online Mobile Testing auf den realen Geräten

Wir müssen also eine andere Möglichkeit finden, um die mobile Website zu testen. Es gibt spezielle Tools, die tatsächlich die Remote-Verbindung zu realen Geräten nutzen. Einige dieser Tools werden im Folgenden vorgestellt.

Keynote Mobile Testing (ehemals Keynote DeviceAnywhere)

Keynote-Logo

Keynote Mobile Testing Cloud-basierte Lösung mit der umfassenden Bibliothek realer mobiler Geräte. Natürlich ist es viel mehr als nur ein Tool zum Testen mobiler Seiten.

Wenn wir jedoch Keynote Mobile Testing als ein solches Tool betrachten, sollten die nächsten Vorzüge erwähnt werden:

  • Echte Mobilfunknetze und WLAN
  • Support am ersten Tag für neue Geräte, sobald diese verfügbar sind
  • Es wird automatisch eine Liste der Geräte basierend auf den Abdeckungskriterien erstellt: Speicher, CPU, Hersteller, Betriebssystemversion, Netzbetreiber usw.
  • Detaillierte Datenbank mit Funktionen nach Gerät und Betriebssystem
  • Der benutzerfreundliche Assistent hilft Ihnen dabei, schnell zu bestimmen, welche Geräte für die Entwicklung und das Testen priorisiert werden sollen

Einige Nachteile von Keynote Mobile Testing:

  • Keynote Mobile Testing überprüft nicht die Vitalwerte des Geräts
  • Es gibt keine Gerätereservierungsunterstützung

 

BrowserStack

Browser-Stack-Logo

BrowserStack ist ein browserübergreifendes Testtool, mit dem Sie auf die große Auswahl an realen Mobilgeräten zugreifen können. Hier sind einige Funktionen des BrowserStack:

  • Umfangreiches iOS- und Android-Spektrum: iOS-Versionen von iOS 3 bis iOS 10, Android – von Donut (1.6) bis Nougat (7.1)
  • Schnelle Kontrollen mit Screenshots
  • Webanalyse für Ihre Website
  • Debuggen Sie Ihre mobilen Websites ganz einfach mit Chrome-Entwicklertools für iOS und Android.
  • Zugriff auf die zusätzlichen Geräte über geografische Parameter
  • Natürliche Gesten und Interaktionen
  • Option für Sicherheitstests

Einige Schwachstellen des BrowserStack:

  • Die Serverleistung scheint sich im Laufe der Zeit zu verschlechtern, wenn viele Benutzer testen
  • BrowserStack ist in der Regel recht teuer und die kostenlose Option ist sehr begrenzt.
  • Eine Möglichkeit, das Ein- und Ausziehen mit zwei Fingern auf Telefonen und Tablets zu simulieren

Perfecto Mobile Kontinuierliches Qualitätslabor

Perfecto-Logo

Perfecto Mobile Continuous Quality Lab ist eine weitere cloudbasierte Plattform, die nicht nur die Möglichkeit zum Testen mobiler Seiten bietet. Im Zusammenhang mit dem Testen der mobilen Version Ihrer Website sollten die folgenden Vorteile ermittelt werden:

  • Echtzeit-Tests auf mehr als 500 verschiedenen Geräten
  • Zum Testen stehen neben Android und iOS auch WinPhone-, Symbian- und Blackberry-Plattformen zur Verfügung
  • Gerätefreigabe
  • Gleichzeitiges Testen der Automatisierung auf mehreren Geräten
  • Screenshot-Unterstützung

Einige der Nachteile von Perfecto Mobile Continuous Quality sind:

  • Undeutliches (oft unlesbares) Bild
  • Lange Reaktionszeit
  • Die kostenlose Testversion ist auf 60 Minuten begrenzt.

Testen mit mobilen Emulatoren

Eine andere Möglichkeit, um das Problem von echten Geräten zu lösen, ist die Verwendung spezieller Tools, die deren Funktionalität emulieren oder simulieren.

Mithilfe dieser Tools können Sie Probleme und Probleme mit der Website lokalisieren und Korrekturmaßnahmen ergreifen, um die Website auf Mobilgeräten optisch ansprechend und funktionsfähig zu gestalten.

Die Leute verwechseln oft den „Emulator“ und „Simulator“. Obwohl beide fast gleich klingen, gibt es dennoch einen Unterschied zwischen ihnen.

Ein Emulator ersetzt das ursprüngliche Gerät. Es kann die gleiche Software und Anwendungen des Originalgeräts ausführen, ohne diese zu ändern, und es kann nicht einmal den Unterschied im doppelten System aufzeigen.

Auf der anderen Seite kann ein Simulator eine ähnliche Umgebung wie das Betriebssystem des Originalgeräts einrichten, ist jedoch nicht bemüht, die Hardware zu replizieren.

Daher sind die Emulatoren für das Testen mobiler Websites vorzuziehen, während die Simulatoren für das Testen mobiler Apps besser geeignet sind.

Betrachten wir einige häufig verwendete Emulatoren

MobileMoxie

Mobile Moxie-Logo

MobileMoxie Emulator ist ein integraler Bestandteil des MobileMoxie Marketing Toolset, mit dem Sie Ihren Kunden großartige mobile Erlebnisse bieten können. Es ist einfach zu bedienen. Geben Sie einfach Ihre Website-URL in das entsprechende Feld ein.

Mobile Moxie

Windows Phone Emulator

Windows Phone-Logo

Windows Phone Emulator ist die spezielle mobile Umgebung, in der Sie Windows Phone-Apps testen, anzeigen und debuggen und den Browser zum Überprüfen von Websites verwenden können.

Einige Vorteile von Windows Phone Emulator:

  • Ausgereiftes SDK mit Geräteemulator
  • Mehrere Bildschirmauflösungen
  • Screenshot-Tool
  • Beschleunigungssensorsimulation

Einschränkungen von Windows Phone Emulator:

  • Es funktioniert nur unter Windows.
  • Die Helligkeit des Emulators ist immer „Hoch“
  • Kamera und Video werden mit Einschränkungen verwendet

 

Android Studio Emulator

Android Studio-Logo

Mit dem Android Studio-Emulator können Sie ein virtuelles Mobilgerät zum Ausführen von Android-Anwendungen und zum Testen mobiler Websites erstellen. Der Emulator befindet sich im Android SDK-Paket. Vorteile des Android Studio Emulators:

  • Es funktioniert unter Windows, Mac OS X, Linux
  • Der Android Studio-Emulator kann Informationen schneller übertragen als mit einem angeschlossenen Hardwaregerät
  • Einheitliche Umgebung, in der alle Android-Geräte verwendet werden können

Einige Nachteile des Android Studio-Emulators:

  • Wenn Sie nur den Browser zum Testen mobiler Websites benötigen, sollten Sie viele unnötige Inhalte herunterladen
  • Einige technische Einschränkungen: 8 GB RAM werden empfohlen; 4 GB verfügbarer Speicherplatz werden empfohlen.

Opera Mobile Emulator 

Opernlogo

Opera Mobile Emulator ist eine Live-Demo des Opera-Browsers für Mobiltelefone, die wie bei der Installation auf einem Mobilteil funktioniert. Einige zusätzliche Debugging-Tools sind ebenfalls verfügbar, z. B. Tastaturkürzel, die Profilauswahl und verschiedene Befehlszeilen-Flags.

Die Hauptvorteile des Opera Mobile Emulators:

  • Es ist einfach zu installieren und leicht zu bedienen. Sie müssen kei
  • ne komplexen SDKs oder ähnliches installieren.
  • Es stehen drei Eingabemodi zur Verfügung: Touch, Tastatur und Tablet.
  • Es ist mit einer Reihe von Telefon- und Tablet-Geräteprofilen vorkonfiguriert
  • Alle Modi können über Links und Steuerelemente aktiviert und gesteuert werden
  • Remote-Debugging mit realen Geräten

Einige Schwachstellen des Opera Mobile Emulators:

  • Sie können überprüfen, wie Seiten nur im Opera Mobile-Browser angezeigt werden.
  • Weniger Medienunterstützung

Handyfreundliche und Validierungs-Tools

Es ist bekannt, dass Google sowohl mobile als auch nicht mobile Websites indiziert. Aus diesem Grund sollten Sie spezielle Tools verwenden, um zu überprüfen, ob Ihre Website die allgemein anerkannten Kriterien erfüllt. Alle diese Tools sind in der Regel einfach zu bedienen.

Alles, was Sie tun sollten, geben Sie einfach Ihre Seiten-URL in das entsprechende Formular ein.

Googles Handy-freundlicher Test

Google Entwickler-Logo

Googles Handy-freundlicher Test zeigt Ihnen, ob Google Ihre Seite für Handy-freundlich hält oder nicht. Wenn Ihre Website den Test besteht, wird eine grüne Meldung mit dem Titel „Awesome! Diese Seite ist für Handys geeignet. “ Wenn es nicht bestanden wird, wird die Nachricht rot und lautet „Nicht für Handys geeignet“.

In diesem Fall wird die Seite in den mobilen Suchergebnissen zugunsten ähnlicher Seiten von anderen Sites, die für Handys geeignet sind, nach unten verschoben.

mobiReady

mobiReady-Logo

Mit mobiReady können Sie die Bereitschaft Ihrer Website für Mobilgeräte anhand von Best Practices und Standards der Branche bewerten. Der kostenlose Bericht enthält sowohl eine Bewertung (von 1 bis 5) als auch eine detaillierte Analyse der Seiten, um festzustellen, wie gut Ihre Website auf einem mobilen Gerät funktioniert.

Die Hauptvorteile von mobiReady sind:

  • Detaillierte Fehlerberichte
  • Site wide testing
  • Ein Visualisierungstool, um zu sehen, wie Ihre Site auf einem Handybildschirm aussieht
  • W3C mobileOK-Tests
  • Es empfiehlt die Verbesserung der mobilen Bereitschaft Ihrer Website

W3C mobileOK Checker Service

w3c logo

W3C mobileOK checker ist ein kostenloser Dienst von W3C (dem weltweiten Konsortium für Webstandards), mit dessen Hilfe der Grad der Benutzerfreundlichkeit von Webdokumenten überprüft und insbesondere festgestellt werden kann, ob ein Webdokument „mobil in Ordnung“ ist.

Die Tests sind definiert in dem mobileOK Basic Tests 1.0Spezifikation. Nur wenn das Webalter alle Tests bestanden hat, erhält es den Status „mobileOK“. Die anderen Optionen, die validiert werden könnten:

Varvy

Varvy-Logo

Varvy ist eine Sammlung kostenloser Tools zum Testen von SEO, Geschwindigkeit und mobiler Funktionalität einer Website.

Hauptmerkmale von Varvy:

  • Google Richtlinien gemäß Test
  • Seitengeschwindigkeitsoptimierung
  • Eine Vielzahl von Tipps und Richtlinien zur Optimierung der Webseitenleistung

Testen Sie die Website Speed Tools

Wie oben erwähnt, haben der Download und die Betriebsgeschwindigkeit Ihrer Website einen direkten Einfluss auf die Anzahl ihrer Besucher.

Es gibt sowohl einfache als auch erweiterte Tools zum Testen der Seitengeschwindigkeit, der Suchmaschinenoptimierung und der Leistung von mobilen Browsern. Sie sollten nicht nur die Geschwindigkeit Ihrer Website messen, sondern auch die Ihres Konkurrenten. Folgen Sie umsetzbaren Empfehlungen, um Ihre Ergebnisse zu verbessern.

Hier sind einige Tools, die Ihnen dabei helfen können.

Google Page Speed Online

Google Page Geschwindigkeitstest Logo

Page Speed Online von Google ist ein umfassendes Tool, mit dem Sie nicht nur die Leistung überprüfen, sondern auch zahlreiche Informationen erhalten. Dazu gehört auch ein Bericht über die Best Practices, die Sie für mobile Geräte verwenden können, um deren Leistung zu optimieren.

Pingdom

Pingdom-Logo

Mit Pingdom können Sie schnell, langsam, zu groß und die Best Practices identifizieren, die Sie nicht befolgen. Alle Tests werden mit echten Webbrowsern durchgeführt, sodass die Ergebnisse dem Endbenutzererlebnis entsprechen. Tests werden gespeichert, damit Sie Ihre Leistung im Laufe der Zeit verfolgen können.

GTmetrix

GTmetrix-Logo

Mit GTmetrix können Sie Tests aus mehreren Regionen durchführen und Ihre Leistung auf Mobilgeräten analysieren. Ermitteln Sie die Ladegeschwindigkeit Ihrer Website sowie umsetzbare Empfehlungen zur Behebung von Engpässen.

Auswirkungen laden

Laden Sie das impact-Logo

Mit Load Impact können umfangreiche Belastungstests mit bis zu 1,2 Millionen gleichzeitigen Benutzern durchgeführt werden. Es generiert Last von bis zu 10 verschiedenen Standorten gleichzeitig und fügt auf Anfrage sogar weitere Standorte hinzu. Load Impact simuliert den Verkehr genau so, wie er im wirklichen Leben ablaufen würde.

Dotcom-Monitor

Dotcom-Monitor-Logo

Mit dem Geschwindigkeitstest von Dotcom-Monitor können Benutzer auswählen, mit welchem Browser sie testen möchten – Chrome, Firefox, Internet Explorer und mobile Browser, einschließlich iPhone, iPad und mehr. Sie können Ihre Website an 20 Standorten weltweit testen. Sobald ein Test abgeschlossen ist, können Benutzer einen Drilldown zu Leistungsberichten und einer Wasserfalldiagrammanalyse durchführen.

Ich hoffe, die in diesem Artikel erwähnten Informationen und Tools sind wirklich nützlich, um die mobile Bereitschaft Ihrer Website zu erhöhen. Wir möchten über Ihre Erfahrungen mit der praktischen Anwendung Bescheid wissen. Vielleicht können Sie einige andere Tools empfehlen. Lass es uns in den Kommentaren wissen.