Haben Sie Ihre Webseite so gestaltet, dass sie auf mobilen Geräten optimal funktioniert?
Wussten Sie, dass Google das „Mobile-First“-Prinzip eingeführt hat?
Immer mehr Internetnutzer verzichten auf den Desktop-Computer und nutzen stattdessen mobile Geräte zum Surfen und Einkaufen.
Responsives Webdesign ermöglicht es, Webseiten zu entwickeln, die auf allen Plattformen gleichermaßen gut funktionieren. Jedoch ist das responsive Design nur ein kleiner Teil der UX-Optimierungsstrategien für mobile Geräte.
Um eine wirkliche Leistungsverbesserung zu erzielen, sollten Sie auch andere Möglichkeiten in Betracht ziehen.
Daher wird so viel Wert darauf gelegt, Ihre Webseite als Mobile-First-Erfahrung zu gestalten. Einfach ausgedrückt bedeutet das, dass Design und Inhalte zuerst für mobile Benutzer optimiert werden.
Dieser Beitrag befasst sich nicht mit dem kompletten Neuentwurf einer Webseite. Stattdessen betrachten wir einige grundlegende Mobile-First-Designprinzipien und fokussieren auf technische Aspekte, um die Benutzerfreundlichkeit für mobile Nutzer zu verbessern.
Nr. 1: Mobiles Design als Ausgangspunkt
Das Web ist im Wesentlichen darauf ausgelegt, Desktop-Nutzern zu dienen. Die wirkliche Weiterentwicklung der Technologien kommt am besten auf einem großen Bildschirm zur Geltung. Smartphones und andere mobile Geräte sind jedoch Realität, und es ist an der Zeit, sich dem Mobile-First-Design anzupassen.
Abgesehen von einem responsiven Design, welche weiteren Gestaltungselemente sollten Sie in Ihr Mobile-First-Webdesign integrieren?
- Priorisierung: Mobile Bildschirme haben nur eine begrenzte Anzeigefläche. Zudem werden Inhalte auf mobilen Bildschirmen vertikal dargestellt, anders als bei der breiteren horizontalen Struktur von Desktops. Dies bedeutet, dass Sie priorisieren müssen. Welche Elemente sind für die Benutzer am wichtigsten? Wenn es Aktionsaufrufe (CTAs) gibt, wie leicht sind diese für mobile Nutzer zu erkennen?
- Inhalt zuerst, Farbe zweitrangig: Beim Mobile Design kann man einige interessante Dinge tun, jedoch anders als beim Desktop-Design. Geben Sie also dem Inhalt Vorrang. Sorgen Sie dafür, dass Ihre Texte und andere Inhaltsbereiche gut lesbar und zugänglich sind. Ein mobiler Bildschirm verzeiht viel weniger ablenkende visuelle Elemente.
- Einfache Navigation: Auf einem mobilen Gerät kann man nicht einfach irgendwo klicken, um zur Startseite zurückzukehren. Es sei denn, Sie planen diese Art der Navigation von vornherein. Und das sollten Sie. Testen Sie Scroll-to-Top-Widgets, aber auch nahtlose Sticky-Header, wann immer möglich.
Am besten überprüfen Sie die Funktionalität, indem Sie Ihre Webseite selbst mit Ihrem Telefon aufrufen (was ich ständig mache!). Analysieren Sie, wie sich die Seite anfühlt und wie der Inhalt fließt.
Wenn Sie in einem Café sitzen oder auf einem Flughafen auf Ihren Flug warten, fragen Sie höflich eine andere Person, ob sie Ihre Webseite kurz prüfen kann. Hören Sie sich dann das Feedback an. Sie werden überrascht sein, wie Nutzer die Benutzerfreundlichkeit Ihrer Seite wahrnehmen.
#2: Optimierung der Ressourcen: Bilder, Icons etc.
Wie oft nutzen Sie Grafiken für dekorative Zwecke anstatt für die UX? Dies kommt vor, und wenn Sie kreativ werden möchten, ist es wichtig zu wissen, wie die Medienoptimierung funktioniert.
Visuelle Elemente wie Fotos, Illustrationen, Icons und Videos benötigen die meiste Bandbreite auf Webseiten.
Hier die durchschnittliche Seitengröße im Jahr 2018, aufgelistet nach Branchen und verschiedenen Ländern.
Es gibt keine feste Seitengröße, an die sich jeder halten muss. Es ist jedoch logisch, dass eine kleinere Seitengröße zu schnelleren Ladezeiten führt.
Wie können Sie also zusätzliche KB oder gar MB an visuellen Inhalten einsparen?
- Bildgrößen ändern: Klingt einfach, oder? Dennoch habe ich oft mobile Seiten gesehen, bei denen Bilder mit einer Auflösung von 1980×1200 im Hintergrund geladen wurden. Stattdessen sollten Fotos in Originalgröße als Alternativlink zur Verfügung stehen. Das Ändern der Größe kann je nach benötigten Abmessungen bis zu 80% der gesamten Bildgröße einsparen. Für mobile Geräte ist eine Auflösung von 600 bis 700 Pixeln in den meisten Fällen ausreichend.
- Dateigröße durch Komprimierung reduzieren: Die Bildkomprimierung ist der Prozess, bei dem Software von Drittanbietern verwendet wird, um die Anzahl der Farben in einem Bild zu reduzieren. Dadurch kann die Dateigröße erheblich reduziert werden, ohne dass die Qualität der Fotos leidet. Wenn Sie Hilfe bei der Bildkomprimierung benötigen, finden Sie hier eine ausführliche Zusammenfassung von Bildkomprimierungstools.
- Alternative Dateiformate ausprobieren: Jeder kennt PNG- und JPEG-Formate. Diese sind die gängigen Bildstandards im Web. Das neueste und beste in der digitalen Bildbereitstellung sind jedoch WebP und SVG-Dateiformate. SVGs können automatisch an die Bildschirmgröße angepasst werden, wodurch die Anzahl der für das Laden bestimmter visueller Elemente benötigten Ressourcen reduziert wird.
Mobile-First-Optimierung der Benutzererfahrung erfordert Aufmerksamkeit. Spontanes Gestalten bedeutet, die langfristigen Auswirkungen Ihrer Entscheidungen nicht zu berücksichtigen. Ein aufmerksamer Ansatz hilft Ihnen jedoch, von Grund auf mit dem Fokus auf mobile Benutzer zu entwickeln.
Merke: Im Sinne eines intuitiven Mobile-Designs müssen Sie nicht die gleichen visuellen Elemente in Ihren mobilen Designs verwenden. Wenn Sie einige Hintergrundbilder entfernen und durch farbige Hintergründe ersetzen, schadet das der Benutzerfreundlichkeit nicht. Suchen Sie immer nach Möglichkeiten, auch die kleinste Menge an Bandbreite zu sparen.
#3: Vorladen und Lazy Loading
Müssen wirklich alle Medienressourcen auf Seiten geladen werden, die viel Lesezeit benötigen? Kann es von Vorteil sein, externe Seiten zu rendern, bevor ein Benutzer diese besucht?
Schauen wir uns zuerst Preloader an, auch Browser-Hinweise genannt.
Preloader informieren den Browser über potenzielle Navigationsmöglichkeiten. Beispiel: Ein Benutzer wechselt von Seite A zu Seite B.
Durch das Vorladen kann Seite B gerendert werden, bevor der Benutzer auf den Navigationslink von Seite A klickt.
Beachten Sie, dass Vorladen nicht immer funktioniert. Der Browser entscheidet letztlich, ob dies geschieht. Faktoren wie Gerätetyp und Bandbreite spielen eine Rolle.
Was sind die gängigsten Preloader-Typen?
- Prefetch: Dieser Typ gibt an, dass eine bestimmte URL wahrscheinlich die nächste Navigationsoption sein wird. Wenn der Browser der Anfrage zustimmt, werden wichtige Seitenressourcen automatisch zwischengespeichert, was zu einer deutlich schnelleren Ladezeit der nächsten Seite führt.
- Prerender: Während der oben genannte Typ nur bestimmte Ressourcen abruft, speichert Prerender die gesamte Seite. Alle gerenderten Inhalte werden im Gerätespeicher des Nutzers abgelegt.
- DNS-Prefetch: DNS-Prefetch löst den angegebenen DNS auf, sonst nichts. Wenn ein Benutzer einen bestimmten „Pfad“ auf Ihrer Webseite wählt, sparen Sie Zeit bei der Navigation.
- Preconnect: Ähnlich wie oben, stellt aber auch Verbindungen und Handshakes mit TCP- und TLS-Verbindungen her.
Hier sind einige Codebeispiele für Preloader:
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Da Preloader dynamische HTML-Tags verwenden, ist es möglich Inhalte wie Google Fonts vorzuladen oder ein benutzerdefiniertes Skript zu erstellen, um JavaScript-Assets in WordPress vorzuladen.
Wenn Sie WordPress verwenden, kann Ihnen WP Rocket helfen, Ihre Seite zu beschleunigen.
Nachdem wir uns mit Preloadern befasst haben, widmen wir uns nun dem Thema Lazy Loading.
Was ist Lazy Loading?
Jedes Mal, wenn Sie eine neue Webseite aufrufen, ruft der Browser den gesamten Seiteninhalt ab und stellt ihn dann als Browsererlebnis dar. Meistens sind Sie gezwungen, die gesamte Seite zu laden, auch wenn Sie gar nicht „above the fold“ hinaus scrollen.
Lazy Loading hingegen weist den Browser an, Inhalte nur dann zu laden (zu rendern), wenn sie sich im Sichtbereich des Benutzers befinden. Wenn einer Seite also große Fotos oder Videos hinzugefügt werden, werden diese Dateien nur dann angezeigt, wenn der Benutzer zu diesem Teil der Seite scrollt.
Falls Sie Bedenken wegen SEO-Problemen haben: Keine Sorge. Yoast hat bestätigt, dass Google Seiten, die Lazy Loading nutzen, rendert und es als weiteres Signal zur Leistungsverbesserung betrachtet.
Ich empfehle Layzr.js für ein einfaches und effektives Lazy Loading Ihrer Bilder! Das Skript ist auch auf der Projekt-Homepage aktiviert, so dass Sie es in Echtzeit testen können. WordPress-Benutzer finden Dutzende von Lazy-Loading-Plugins im offiziellen Plugin-Repository.
#4: Web-Caching
Web-Caching speichert eine Kopie einer Seite, die dem Benutzer jederzeit präsentiert werden kann. Seiten werden beim ersten Besuch einer Seite zwischengespeichert. Wenn ein neuer Benutzer dann auf diese Seite zugreift, zeigt der Webserver die zwischengespeicherte Version anstelle der Live-Version an.
Das Ziel des Cachings ist es, die Leistung der Seite zu verbessern und die benötigten Backend-Ressourcen zu reduzieren. Je nach Caching-Lösung können Sie benutzerdefinierte Intervalle und andere ereignisbasierte Trigger einstellen.
Einige der bekanntesten Web-Caching-Lösungen sind Varnish, Squid und Memcached. Es gibt jedoch viele weitere Lösungen, insbesondere wenn Sie WordPress verwenden.
Sie können auch ein CDN in Betracht ziehen.
Was ist ein CDN (Content Delivery Network)?
Ein Content Delivery Network verwendet einen globalen Cluster verteilter Server, um eine sehr schnelle Bereitstellung von Inhalten zu ermöglichen. Ein CDN kann alle gängigen Inhaltstypen schnell übertragen: Video, Foto, JavaScript usw. Heutzutage läuft der Großteil des Webverkehrs über ein CDN.
Wichtig bei CDNs ist, dass sie am besten funktionieren, wenn sie auf Webseiten mit hohem Traffic eingesetzt werden. Wenn Sie also nur ein paar tausend Besucher pro Monat haben, werden Sie möglicherweise keine spürbaren Verbesserungen feststellen. Dennoch ist ein CDN eine großartige Lösung, um die Ladezeiten Ihrer Webseite zu verbessern, Bandbreitenkosten zu senken, die Verfügbarkeit von Inhalten zu erhöhen und die Sicherheit zu verbessern.
Wenn Sie noch keine Erfahrung mit CDNs haben, empfehlen wir Cloudflare. Es gibt einen kostenlosen Plan, und es ist eine gute Plattform, um anzufangen. Wenn Cloudflare nicht Ihre Erwartungen erfüllt, lesen Sie unseren Beitrag über die besten kostenlosen CDN-Anbieter auf dem Markt.
#5: AMP (Accelerated Mobile Pages)
Googles AMP-Projekt ist die mobile Optimierung in Perfektion! AMP reduziert Ihre Seiten auf das Wesentliche, um ein schnelles Ladeerlebnis zu bieten und die Lesbarkeit des Inhalts zu priorisieren. Angesichts der Wichtigkeit der Seitengeschwindigkeit, wollen Sie wirklich fast sofortigen Ladezeiten widerstehen?
Wie funktioniert AMP?
AMP ist eine einfache HTML-Seite mit Einschränkungen, welche Arten von Inhalten angezeigt werden können. Dadurch werden sehr schnelle Ladezeiten und eine insgesamt bessere Performance erreicht, da Einschränkungen bei der Ausführung von Skripten gelten.
JavaScript funktioniert beispielsweise nicht mit AMP. Es sei denn, Sie verwenden die AMP JS-Bibliothek auf GitHub. Mit dieser Bibliothek können Sie bestimmte Ergebnisse erzielen, wie z. B. das Vermeiden von Werbeblockern, aber wenn Sie wirklich hohe Leistung benötigen, ist reines AMP der richtige Weg.
Interessante Fallstudien zu AMP:
#6: Testen, bevor Sie veröffentlichen
Heutzutage gibt es keine Entschuldigung mehr, keine separate Staging-Umgebung für Ihr Projekt zu haben. Die meisten Cloud-Hosting-Plattformen bieten Staging-Umgebungen an. Fragen Sie also Ihren Anbieter, ob Sie Zugriff darauf haben.
Was ist eine Staging-Umgebung?
Am einfachsten lässt sich dies erklären, indem wir Ihre Live-Webseite betrachten.
Diese Seite ist das, was man eine Produktionsseite nennt – die Echtzeitversion aller Codes, Skripte und Inhalte, auf denen Ihre Seite basiert. Eine Staging-Umgebung ist eine Kopie Ihrer Produktionsseite. Eine „Dummy“-Seite. Hier können Sie Änderungen vornehmen oder neue Funktionen hinzufügen, ohne Ihre Live-Seite zu beschädigen.
Ich erinnere mich immer an den Beitrag von Ashley Harpp, Verschwenden Sie keine Zeit – testen Sie Änderungen vor der Veröffentlichung.
Ihre Ansicht darüber, wie wir uns selbst „austricksen“, um bestimmte Dinge zu vermeiden, ist ein Paradebeispiel dafür, dass wir keine Verantwortung übernehmen wollen, wenn wir einen Fehler machen. In Ashleys Beitrag finden Sie aber auch Links zu nützlichen Tools, um eine lokale Staging-Umgebung einzurichten.
Testen ist nicht so beängstigend, wie es sich anhört. Es ist jedoch wirklich beängstigend, wenn Sie versehentlich Ihre gesamte Datenbank auf einem Produktionsserver löschen!
Abschluss
Die Optimierung Ihrer Webseite für eine reibungslose mobile Nutzung ist gar nicht so schwierig. Sie brauchen nur ein wenig Entschlossenheit und die Bereitschaft, die in diesem Beitrag beschriebenen Methoden anzuwenden. Wahrscheinlich kennen Sie bereits Dinge wie Inhalts-Caching und Lazy Loading, aber was ist mit Staging-Umgebungen oder Preloadern?
Hoffentlich hat dieser Beitrag etwas Licht in den aktuellen Stand der mobilen Webseitenoptimierung gebracht.