Wie können Sie Ihre Website für mobile Benutzer optimieren?

Haben Sie dafür gesorgt, dass Ihre Website mobilfreundlich ist?

Wussten Sie, dass Google eine neue Richtlinie namens Mobile-First eingeführt hat?

Immer mehr Internetnutzer wenden sich von Desktop-Computern ab und surfen und kaufen stattdessen mit ihren mobilen Geräten ein.

Responsive Webdesign hat es möglich gemacht, Websites zu erstellen, die auf allen Plattformen gleich gut funktionieren. Aber selbst dann ist Responsive Design nur ein Bruchteil der UX-Optimierungsstrategien für Mobilgeräte.

Wenn Sie eine echte Leistungsoptimierung wünschen, müssen Sie auch andere Alternativen in Betracht ziehen.

Aus diesem Grund wird so viel Wert darauf gelegt, Ihre Website so zu gestalten, dass sie für mobile Endgerätegeeignet ist. Einfach ausgedrückt bedeutet Mobile-First, dass Ihr Design und Ihre Inhalte zuerst für mobile Benutzer optimiert werden.

In diesem Beitrag geht es jedoch nicht um die Gestaltung einer völlig neuen Website. Stattdessen werden wir uns mit einigen grundlegenden Mobile-First-Designprinzipien beschäftigen. Außerdem werden wir uns mit den technischen Aspekten befassen, um das Benutzererlebnis für Ihre mobilen Benutzer zu optimieren.

Design mit Blick auf Mobilgeräte

Das Web ist weitgehend auf dem Prinzip der Bedienung von Desktop-Benutzern aufgebaut. Das echte Web, die wirklichen technologischen Fortschritte, lassen sich am besten auf einem schönen Vollbildschirm darstellen. Aber Smartphones und andere mobile Geräte gibt es schon lange, und es ist an der Zeit, sich auf das Konzept des Mobile-First-Designs einzustellen.

Welche anderen Designelemente sollten Sie, abgesehen vom vernünftigen responsiven Design, in Ihre Mobile-First-Webdesigns einbauen?

• Prioritätensetzung. Mobile Bildschirme sind auf die verfügbare Anzeigefläche beschränkt. Außerdem werden Inhalte auf mobilen Bildschirmen vertikal dargestellt, im Gegensatz zu einer viel breiteren - horizontalen - Struktur bei Desktops. Das bedeutet, dass Sie bei der Gestaltung Prioritäten setzen müssen. Welche Elemente sind für den Benutzer am wichtigsten? Wenn es CTA-Schaltflächen gibt, wie leicht sind sie für den mobilen Benutzer zu sehen?
• Zuerst der Inhalt. Farbe an zweiter Stelle. Sie können mit dem mobilen Design einige interessante Dinge anstellen, aber sicher nicht in dem Umfang wie beim Desktop-Design. Geben Sie auch dem Inhalt den Vorrang. Machen Sie Ihre Texte und andere Inhalte leicht lesbar und zugänglich. Ein mobiler Bildschirm verzeiht viel weniger ablenkende visuelle Elemente.
• Einfache Navigation. Auf einem mobilen Gerät können Sie nicht einfach irgendwo klicken und zur Homepage zurückkehren. Es sei denn, Sie haben diese Art der Navigation von vornherein eingeplant. Und das sollten Sie. Experimentieren Sie mit Scroll-to-Top-Widgets, aber auch mit nahtlosen Sticky Headers, wann immer dies möglich ist.

Am besten überprüfen Sie, ob Sie das richtig machen, indem Sie Ihr Handy benutzen(Ich mache das ständig!) und Ihre Website besuchen. Prüfen Sie gründlich, wie sich die Dinge anfühlen und wie sie zusammenfließen.

Wenn Sie in einem Café sitzen oder am Flughafen auf einen Flug warten, klopfen Sie jemandem auf die Schulter und bitten ihn höflich, Ihre Website für Sie zu überprüfen. Lehnen Sie sich dann zurück und hören Sie sich das Feedback an. Meistens werden Sie überrascht sein, wie die Leute die Benutzerfreundlichkeit Ihrer Website wahrnehmen.

Ressourcen-Optimierung

Wie oft ertappen Sie sich dabei, dass Sie visuelle Elemente nur aus persönlicher Vorliebe und nicht aus UX-Gründen verwenden? Das kommt vor, und wenn Sie kreativ werden wollen, lohnt es sich, zu verstehen, wie Medienoptimierung funktioniert.

Visuelle Elemente wie Fotos, Illustrationen, Ikonen und Videos sind die größten Bandbreitenverbraucher auf Webseiten.

Es gibt zwar keine feste Größe für Webseiten, die jeder einhalten muss, aber es ist allgemein bekannt, dass eine kleinere Webseite schnellere Ladezeiten bedeutet.

Wie können Sie auch einige zusätzliche KBs oder sogar MBs von Ihren visuellen Inhalten abschneiden?

• Ändern Sie die Größe Ihrer Bilder. Klingt einfach, oder? Nun, ich kann gar nicht mehr zählen, wie oft ich eine mobile Website besucht habe, nur um 1980 x 1200 Bilder im Hintergrund laden zu lassen. Stattdessen sollten Sie Fotos in voller Größe als alternative Links anbieten, wenn es angebracht ist. Durch eine Größenanpassung können Sie bis zu 80% der Gesamtgröße des Bildes einsparen, je nachdem, welche Abmessungen Sie benötigen. Für mobile Geräte gibt es jedoch keinen Grund, die Größe von 600-700px zu überschreiten.
• Reduzieren Sie die Dateigröße durch Komprimierung. Bei der Bildkomprimierung/-optimierung wird die Anzahl der Farben in einem Bild mit Hilfe von Drittanbieter-Software reduziert. Dies kann so weit gehen, dass Ihre Fotos nicht ihre eigentliche Qualität verlieren, sondern ihre Dateigröße drastisch reduziert wird. Wenn Sie Hilfe bei der Komprimierung von Bildern benötigen, hilft Ihnen unsere umfassende Übersicht über Bildkomprimierungstools weiter.
• Erforschen Sie alternative Dateiformate. Jeder hat schon einmal von den Dateiformaten PNG und JPEG gehört. Schließlich sind sie die De-facto-Bildstandards im Internet. Aber nicht mehr lange. Die neueste und beste Technologie für die Bereitstellung digitaler Bilder dreht sich um die Dateiformate WebP und SVG. SVG-Dateien können beispielsweise automatisch auf die Bildschirmgröße skaliert werden, wodurch die Anzahl der zum Laden bestimmter visueller Komponenten benötigten Ressourcen reduziert wird.

Die Optimierung der Benutzererfahrung für Mobile-First ist nur eine Frage der Aufmerksamkeit. Impulsives Design bedeutet, dass Sie die langfristigen Auswirkungen Ihrer Entscheidungen nicht berücksichtigen. Ein achtsamer Ansatz hingegen hilft Ihnen dabei, die mobilen Benutzer von Anfang an zu berücksichtigen.

Aufschlussreich: Im Einklang mit dem Konzept des intuitiven mobilen Designs müssen Sie nicht dieselben visuellen Komponenten in Ihren mobilen Designs wiederverwenden. Wenn Sie einige Hintergrundbilder entfernen und durch farbige Hintergründe ersetzen - auf dem Handy - wird das dem Benutzererlebnis nicht schaden. Suchen Sie immer nach Möglichkeiten, auch nur die kleinste Menge an Bandbreite zu sparen.

Vorladen und Lazy-Loading

Ist es notwendig, alle Medienressourcen auf Seiten zu laden, die sehr viel Zeit zum Lesen benötigen? Und kann es hilfreich sein, externe Seiten zu rendern, bevor die Benutzer sie besuchen?

Schauen wir uns zunächst die Preloader an, auch bekannt als Browser-Hinweise.

Preloader sind Möglichkeiten, mit denen eine Seite den Browser über potenzielle Navigationsmöglichkeiten informieren kann. Ein Benutzer könnte z.B. von Seite A aus Seite B besuchen.

Mit dem Preload kann der Benutzer die Seite B anzeigen, bevor er auf den Navigationslink auf Seite A klickt.

Denken Sie daran, dass das Vorladen nicht immer funktioniert und dass die endgültige Entscheidung beim Browser liegt. Faktoren wie Gerätetyp und Bandbreite werden individuell abgewogen.

Was sind die gängigsten Preloader-Typen?

• Prefetch. Dieser Typ schlägt vor, dass eine bestimmte URL höchstwahrscheinlich die nächste Navigationsmöglichkeit sein wird. Und wenn der Browser der Anfrage zustimmt, werden automatisch wichtige Seitenressourcen zwischengespeichert, wodurch die nächste Seite viel schneller geladen wird.
• Vorberechnung. Während der oben genannte Typ nur bestimmte Ressourcen abruft, wird beim Prerender die gesamte Seite zwischengespeichert. Alle gerenderten Inhalte werden im Speicher des Geräts des Benutzers gespeichert.
• DNS-Prefetch. Beim DNS-Prefetch wird die angegebene DNS aufgelöst und nichts anderes. Wenn ein Benutzer auf Ihrer Website eine bestimmte Abzweigung nimmt, sparen Sie im Grunde genommen die Zeit, die er zum Navigieren benötigt.
• Vorverbinden. Dasselbe wie oben, stellt aber auch Verbindungen und Handshakes mit TCP- und TLS-Verbindungen her.

Was sind einige Codebeispiele für Preloader?

<link rel="dns-prefetch" href="customURL.com">
<link rel="preconnect" href="customURL.com">
<link rel="prefetch" href="folder/script.js" as="script">
<link rel="prerender" href="customURL.com/preview.html"&gt

Da Preloader dynamische HTML-Tags verwendet, können Sie Inhalte wie Google Fonts vorladen oder ein eigenes Skript zum Vorladen von JavaScript-Assets in WordPress erstellen.

Wenn Sie übrigens WordPress verwenden, können WP Rakete Ihnen dabei helfen, Ihre Website zu optimieren.

Nun, da Sie mehr über Preloader wissen, lassen Sie uns über das andere heiße Thema sprechen: Lazy Loading.

Was ist Lazy Loading?

Jedes Mal, wenn Sie eine neue Webseite besuchen, egal ob es sich um einen Blogbeitrag oder eine statische Website handelt, ruft der Browser den gesamten Inhalt der Seite ab und stellt ihn dann als natives Browsererlebnis bereit. In den meisten Fällen sind Sie gezwungen, die gesamte Seite herunterzuladen, ohne dass Sie mehr als den Inhalt der Seite sehen.

Beim Lazy Loading hingegen wird der Browser angewiesen, Inhalte zu laden (zu rendern), die sich nur innerhalb des Viewports des Benutzers befinden. Wenn auch einer bestimmten Seite größenabhängige Fotos oder Videos hinzugefügt wurden, werden diese Dateien nur angezeigt, wenn Ihr Browserbildschirm diesen Teil der Website erreicht.

Und wenn Sie sich Sorgen über mögliche SEO-Probleme machen, brauchen Sie das nicht. Yoast hat bestätigt, dass Google Seiten, die Lazy Loading verwenden, durchaus gerendert und als ein weiteres Signal zur Leistungssteigerung betrachtet.

Meine Empfehlung für eine Bibliothek ist Layzr.js - Einfaches und effektives Lazy Loading für Ihre Bilder! Das Skript ist auch auf der Homepage des Projekts aktiviert, so dass Sie seine Leistung in Echtzeit sehen können. WordPress-Benutzer finden Dutzende von Lazy-Loading-Plugins in der öffentlichen Plugin-Repositorium.

Web-Caching

Web-Caching basiert auf dem Konzept, eine Version einer Seite zu kopieren, die dem Benutzer dann jederzeit wieder zur Verfügung gestellt werden kann. Die Seiten werden beim ersten Besuch einer Website im Cache gespeichert. Wenn ein neuer Benutzer dann versucht, auf diese Seite zuzugreifen, zeigt der Webserver nicht die aktuelle Version, sondern die im Cache gespeicherte Version an.

Ziel jeder Art von Caching ist es, die Leistung der Website zu verbessern und die erforderlichen Backend-Ressourcen zu verringern. Je nach Caching-Lösung können Sie benutzerdefinierte Intervalle und andere Trigger-basierte Ereignisse konfigurieren.

Einige der bekanntesten Namen für Web-Caching sind Varnish, Squid und Memcached. Aber Sie können sicher sein, dass es noch viele andere Lösungen auf dem Markt gibt, vor allem, wenn Sie ein WordPress-Benutzer sind.

Sie können auch in Erwägung ziehen, sich bei einem CDN anzumelden.

Was ist ein CDN (Content Delivery Network)?

Ein Content Delivery Network nutzt einen globalen Cluster von verteilten Servern, um eine unglaublich schnelle Bereitstellung von Inhalten zu ermöglichen. Ein CDN ist in der Lage, alle gängigen Inhalte im Internet schnell zu übertragen: Videos, Fotos, JavaScript usw. Heutzutage läuft der größte Teil des Internetverkehrs über eine Form von CDN.

Bei Content Delivery Networks ist zu beachten, dass sie am besten funktionieren, wenn sie für eine Website mit hoher Nachfrage eingesetzt werden. Wenn Sie also nur ein paar tausend Besucher pro Monat haben, könnte es schwierig werden, spürbare Verbesserungen zu erzielen. Dennoch ist ein CDN eine hervorragende Lösung, um die Ladezeiten Ihrer Website zu verbessern, die Kosten für die Bandbreite zu senken, die Verfügbarkeit von Inhalten zu erhöhen und die allgemeine Sicherheit zu verbessern.

Wenn Sie noch keine Erfahrung mit CDNs haben, empfehlen wir Ihnen, Cloudflare auszuprobieren - das Unternehmen bietet einen kostenlosen Plan für immer und ist eine großartige Plattform, um mit dem Lernen zu beginnen. Und wenn Cloudflare Ihre Erwartungen nicht erfüllt, lesen Sie unseren Beitrag über die besten kostenlosen CDN-Anbieter auf dem Markt.

AMP (Beschleunigte mobile Seiten)

Das AMP-ProjektvonGoogle ist mobile Optimierung auf Steroiden! Im Wesentlichen reduziert AMP Ihre Seiten auf das Wesentliche, um ein superschnelles Laden zu ermöglichen, aber auch um die Lesbarkeit der Inhalte in den Vordergrund zu stellen. Können Sie angesichts der Wichtigkeit der Seitengeschwindigkeit den Mut aufbringen, zu nahezu sofortigen Ladezeiten Nein zu sagen?

Okay, all diese Schlagworte klingen toll, aber wie funktioniert AMP?

AMP ist eine nackte HTML-Seite mit bestimmten Einschränkungen für die Art der Inhalte, die angezeigt werden können. Dies führt zu viel schnelleren Ladezeiten und einer besseren Gesamtleistung aufgrund von Einschränkungen bei der Ausführung von Skripten und dergleichen.

JavaScript funktioniert zum Beispiel nicht mit AMP. Es sei denn, Sie verwenden die AMP JS-Bibliothek, die auf GitHub verfügbar ist ist. Mit der JS-Bibliothek können Sie bestimmte Ergebnisse erzielen, z.B. die Umgehung von Werbeblocker, aber wenn Sie echte Leistung wollen, dann ist AMP der richtige Weg.

Interessante Fallstudien für AMP:

• Terra steigert mit AMP die mobilen Zuschauerzahlen
• Times of India meldet 1,5 Mal höhere Einnahmen
• Fastcommerce steigert die Konversionsrate für seine Kunden, indem es AMP-first entwickelt

Testen Sie, bevor Sie sich festlegen

In der heutigen Zeit gibt es keine Ausrede mehr, um keine separate Staging-Umgebung für Ihr Projekt zu haben. Die meisten Cloud-Hosting-Plattformen bieten standardmäßig Staging-Umgebungen an. Erkundigen Sie sich auch bei Ihrem Provider, ob Sie Zugang zu einer solchen Umgebung haben.

Was ist eine Inszenierungs-Umgebung?

Das lässt sich am schnellsten erklären, wenn Sie sich Ihre aktuelle Live-Website ansehen.

Diese Website ist das, was Sie als Produktionsseite bezeichnen - eine Echtzeitversion des gesamten Codes, der Skripte und der Inhalte, auf denen Ihre Website basiert. Eine Inszenierungs-Umgebung ist in diesem Zusammenhang eine Kopie Ihrer Produktions-Website. Eine Dummy-Site, wenn Sie dies wünschen. Und in dieser Staging-Umgebung können Sie Änderungen vornehmen oder neue Funktionen hinzufügen, ohne dass Ihre Live-Site beschädigt wird.

Ich denke dabei immer an den Beitrag von Ashley Harpp, Verschwenden Sie keine Zeit - Testen Sie Änderungen, bevor Sie sie festschreiben.

Ihre Ansicht darüber, wie wir uns selbst "austricksen", um bestimmte Dinge zu vermeiden, ist ein Paradebeispiel dafür, dass wir nicht die Verantwortung übernehmen wollen, wenn wir einen Fehler machen. Dennoch enthält Ashleys Beitrag auch Links zu nützlichen Tools für die Einrichtung einer lokalen Staging-Umgebung.

Testen ist nicht so beängstigend, wie es klingt. Aber es ist verdammt beängstigend, wenn Sie versehentlich Ihre gesamte Datenbank auf einem Produktionsserver löschen!

Strukturierte Datenauszeichnung bereitstellen

Structured Data Markup ist allgemein als Schema Markup bekannt. Es handelt sich dabei um eine Art von Metadaten, die mehr Hintergrundinformationen und Details über den Inhalt Ihrer Website liefern. Wenn Sie auch diese strukturierte Datenauszeichnung hinzufügen, wird Ihre mobile Website von den Suchmaschinen besser berücksichtigt. So können die Suchmaschinen die Bedeutung Ihrer Inhalte besser verstehen.

Darüber hinaus werden bei der strukturierten Datenauszeichnung bestimmte Website-Komponenten in einem standardisierten Format, wie JSON-LD, Microdata oder RDFa, kommentiert.

Diese enthalten Informationen über Produkte, Bewertungen, Preise, Termine, Veranstaltungsorte und mehr. Letztendlich extrahieren Suchmaschinen diese Daten beim Scannen Ihrer Seite und verwenden sie, um Rich Snippets in der SERP hervorzuheben.

Zur Anwendung der strukturierten Datenauszeichnung können Sie eine Reihe von Schema-Markup-Generator-Tools verwenden. Mit diesem Tool können Sie ganz einfach strukturierte Datenauszeichnungen auf Ihrer Website anwenden. Sie können die beste Art von Schema für Ihren Inhalt auswählen und die erforderlichen Code-Snippets erstellen.

Nachdem Sie die strukturierte Datenauszeichnung in den HTML-Code Ihrer Website eingefügt haben, verwenden Sie das Google-Tool zum Testen strukturierter Daten, um sicherzustellen, dass sie korrekt ist.

Implementieren Sie die Sprachsuchoption

Websites, die die Sprachsuche aktivieren, haben aufgrund der wachsenden Beliebtheit virtueller Assistenten wie Siri, Google Assistant, Alexa usw. stark an Popularität gewonnen. Um die Suchzeit zu minimieren und die Flexibilität zu erhöhen, nutzen die Menschen jetzt die Sprachsuchoptionen. Sie hilft ihnen, die gewünschten Informationen schnell abzurufen und Aktivitäten ohne Tippen zu erledigen.

Hier sind die Taktiken, die Sie anwenden können, um Ihre Website für die Sprachsuche zu optimieren:

Verwenden Sie Long-Tail-Schlüsselwörter

Die Sprachsuche erfolgt meist in Form von Anfragen oder Abfragen in natürlicher Sprache. Bei der Verwendung von Sprachassistenten sprechen die Nutzer oft in einem eher lockeren Ton. Optimieren Sie daher Ihre Inhalte, indem Sie Long-Tail-Schlüsselwörter verwenden und auf häufig gestellte Fragen zu Ihrer Kategorie oder Ihrem Fachgebiet antworten. Überlegen Sie außerdem, welche genauen Fragen ein Besucher stellen könnte, und beantworten Sie diese dann in Ihrem Inhalt auf klare und prägnante Weise.

Geben Sie klare und prägnante Antworten

Sprachassistenten verwenden in der Regel Informationen, die auf Wissensgraphen oder hervorgehobenen Snippets basieren, um prägnante, klare Antworten auf Benutzeranfragen zu geben. Wenn Sie auch Ihre Inhalte so strukturieren können, dass sie häufige Anfragen direkt beantworten, steigt die Wahrscheinlichkeit, dass Ihre Website als Suchergebnis für die Sprachsuche ausgewählt wird, enorm.

Verbessern Sie die Navigation und Struktur Ihrer Website

Sorgen Sie für eine übersichtliche Navigation auf Ihrer Website, die von den Sprachassistenten leicht zu finden und zu erkennen ist. Optimieren Sie einfach Ihre Navigationsmenüs, Kopfzeilen und die interne Verlinkung, um ein reibungsloses Benutzererlebnis zu ermöglichen. Dies verbessert die Indizierung und das Auffinden Ihres Materials durch Sprachassistenten.

Zielen Sie auf das Featured Snippet

Featured Snippets sind der beste Weg, um in den Sprachsuchergebnissen wahrgenommen zu werden, da sie oben in den Suchergebnissen hervorgehoben werden. Strukturieren Sie daher Ihr Material so, dass es erfasst und in einem Featured Snippet angezeigt wird. Zum Beispiel: Beantworten Sie Fragen kurz und effektiv, verwenden Sie Aufzählungspunkte und gliedern Sie Daten in Tabellen oder Listen.

Abschließende Bemerkung

Die Optimierung Ihrer Website für ein reibungsloses mobiles Erlebnis ist gar nicht so schwierig. Alles, was Sie brauchen, ist ein wenig Entschlossenheit und die Bereitschaft, die in diesem Beitrag beschriebenen Methoden anzuwenden. Wahrscheinlich sind Sie bereits mit Dingen wie Content-Caching und Lazy-Loading vertraut, aber was ist mit Staging-Umgebungen oder Preloadern?

Wir hoffen, dass dieser Beitrag ein wenig Licht auf den aktuellen Stand der Optimierung mobiler Websites geworfen hat.