Haben Sie sichergestellt, dass Ihre Website für Mobilgeräte optimiert ist?
Wussten Sie, dass Google eine neue Richtlinie namens Mobile-First eingeführt hat?
Immer mehr Webnutzer wenden sich von Desktop-Computern ab und surfen und kaufen stattdessen mit ihren mobilen Geräten.
Responsive Webdesign hat es ermöglicht, Websites zu erstellen, die auf allen Plattformen gleichermaßen 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 als Mobile-First-Erfahrung. Einfach ausgedrückt bedeutet Mobile-First, dass Ihr Design und Ihre Inhalte zuerst für mobile Benutzer optimiert werden.
Davon abgesehen geht es in diesem Beitrag nicht darum, eine völlig neue Website zu entwerfen. Stattdessen werden wir uns einige grundlegende Mobile-First-Designprinzipien ansehen. Und verbringen Sie einige Zeit damit, sich auf technische Aspekte zu konzentrieren, um die Benutzererfahrung für Ihre mobilen Benutzer zu optimieren.
Inhaltsverzeichnis
Nr. 1: Mobiles Design im Hinterkopf
Das Web ist weitgehend auf dem Prinzip aufgebaut, Desktop-Benutzern zu dienen. Das echte Web, die wirklichen Fortschritte in den Technologien, werden am besten auf einem schönen Vollbild-Display angezeigt. Aber Smartphones und andere mobile Geräte sind eine Sache, und es ist an der Zeit, sich an das Konzept des Mobile-First-Designs anzupassen.
Abgesehen vom vernünftigen responsiven Design, welche anderen Designelemente sollten Sie in Ihren Mobile-First-Webdesigns implementieren?
- Priorisierung. Mobile Bildschirme sind auf die verfügbare Anzeigefläche beschränkt. Außerdem präsentieren mobile Bildschirme Inhalte vertikal, im Gegensatz zu einer viel breiteren – horizontalen – Struktur für Desktops. Das bedeutet, dass Sie mit Priorisierung entwerfen müssen. Welche Elemente sind für Benutzer von größter Bedeutung? Wenn es CTA-Buttons gibt, wie einfach ist es, sie für den mobilen Benutzer zu sehen?
- Inhalt zuerst. Zweite Farbe. Mit Mobile Design kann man einige interessante Dinge anstellen, aber sicherlich nicht im Bereich Desktop-Design. Geben Sie also zuerst dem Inhalt Platz. Machen Sie Ihre Kopie und andere Inhaltsteile 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 Startseite zurückkehren. Es sei denn natürlich, Sie planen diese Art der Navigation im Voraus. Und das sollten Sie. Experimentieren Sie mit Scroll-to-Top-Widgets, aber auch nahtlosen Sticky-Headern, wann immer dies möglich ist.
Der beste Weg, um zu überprüfen, ob Sie dies richtig machen, ist, Ihr Telefon zu benutzen (ich mache das die ganze Zeit!) und Ihre Website zu besuchen. Untersuchen Sie gründlich, wie sich die Dinge anfühlen und zusammenfließen.
Wenn Sie in einem Café sitzen oder auf einem Flughafen auf einen Flug warten, klopfen Sie jemandem auf die Schulter und bitten Sie ihn höflich, Ihre Website für Sie zu überprüfen. Lehnen Sie sich dann zurück und hören Sie sich ihr Feedback an. Meistens werden Sie sich selbst überraschen, wie die Benutzer die Benutzererfahrung Ihrer Website wahrnehmen.
#2: Ressourcenoptimierung; Bilder, Symbole usw.
Wie oft verwenden Sie Visuals aus persönlichen Gründen und nicht UX? Es passiert, und wenn Sie kreativ werden wollen, lohnt es sich zu verstehen, wie Medienoptimierung funktioniert.
Visuelle Elemente wie Fotos, Illustrationen, Symbole und Videos sind die größten Bandbreitenverbraucher auf Webseiten.
Die durchschnittliche Webseitengröße im Jahr 2018. Aufgelistet nach Branchen und verschiedenen Ländern.
Es gibt zwar keine festgelegte Webseitengröße, die jeder erfüllen muss, aber es ist gesunder Menschenverstand, dass eine kleinere Webseitengröße schnelleren Ladezeiten entspricht.
Wie können Sie also einige zusätzliche KB oder sogar MB aus Ihren visuellen Inhalten entfernen?
- Ändern Sie die Größe Ihrer Bilder. Klingt einfach, oder? Nun, ich kann nicht zählen, wie oft ich eine mobile Website durchsucht habe, nur um 1980 x 1200-Bilder im Hintergrund laden zu lassen. Stattdessen sollten gegebenenfalls Fotos in voller Größe als alternative Links bereitgestellt werden. Die Größenänderung kann je nach den erforderlichen Abmessungen bis zu 80 % der gesamten Bildgröße einsparen. Für mobile Geräte gibt es jedoch nie einen Grund, höchstens den Bereich von 600 bis 700 Pixeln zu überschreiten.
- Reduzieren Sie die Dateigröße durch Komprimierung. Bildkomprimierung/-optimierung ist der Prozess der Verwendung von Software von Drittanbietern, um die Anzahl der in einem Bild vorhandenen Farben zu reduzieren. Dies kann bis zu einem Grad erfolgen, dass Ihre Fotos ihre angeborene Qualität nicht verlieren, aber ihre Dateigröße drastisch reduziert werden kann. Wenn Sie Hilfe beim Komprimieren von Bildern benötigen, suchen Sie nicht weiter als in unserer umfassenden Zusammenfassung von Bildkomprimierungstools.
- Entdecken Sie alternative Dateiformate. Jeder hat von PNG- und JPEG-Dateiformaten gehört. Schließlich sind sie die De-facto-Bildstandards im Web. Aber nicht lange. Die neueste und beste Technologie in der digitalen Bildbereitstellung dreht sich um WebP und SVG-Dateiformate. SVGs können zum Beispiel automatisch auf Bildschirmgröße skalierenwodurch die Anzahl der zum Laden bestimmter visueller Komponenten erforderlichen Ressourcen reduziert wird.
Die Optimierung der Benutzererfahrung für Mobile-First ist nur eine achtsame Sache. Spontan zu entwerfen bedeutet, dass Sie die langfristigen Auswirkungen Ihrer Entscheidungen nicht berücksichtigen. Während ein achtsamer Ansatz Ihnen hilft, von Grund auf mit Blick auf mobile Benutzer zu bauen.
Aufschlussreich: Im Einklang mit dem Konzept des intuitiven Mobildesigns müssen Sie nicht die gleichen visuellen Komponenten in Ihren Mobildesigns wiederverwenden. Das Entfernen einiger Hintergrundbilder und das Ersetzen durch farbige Hintergründe – auf Mobilgeräten – schadet der Benutzererfahrung nicht. Suchen Sie immer nach Möglichkeiten, auch die kleinste Menge an Bandbreite zu sparen.
#3: Vorladen und Lazy-Loading
Ist es notwendig, alle Medienressourcen auf Seiten zu laden, deren Lesen viel Zeit in Anspruch nimmt? Und kann es hilfreich sein, externe Seiten zu rendern, bevor Benutzer sie besuchen?
Schauen wir uns zuerst die Preloader an, die auch als Browserhinweise bekannt sind.
Preloader sind Möglichkeiten für eine Seite, den Browser über potenzielle Navigationsmöglichkeiten zu informieren. Beispiel: Ein Benutzer besucht möglicherweise Seite B von Seite A aus.
Beim Vorladen kann der Benutzer Seite B rendern, bevor er auf den Navigationslink auf Seite A klickt.
Denken Sie daran, dass das Vorabladen nicht immer funktioniert und es Sache des Browsers ist, die endgültige Entscheidung zu treffen. Faktoren wie Gerätetyp und Bandbreite werden individuell gewichtet.
Was sind die gängigsten Preloader-Typen?
- Vorauslesen. Dieser Typ deutet darauf hin, dass eine bestimmte URL höchstwahrscheinlich die nächste Navigationsoption sein wird. Und wenn der Browser der Anfrage stattgibt, werden wichtige Seitenressourcen automatisch zwischengespeichert, wodurch die nächste Seite viel schneller geladen wird.
- Vorrendern. Während der obige Typ nur bestimmte Ressourcen abruft, wird Prerender die gesamte Seite zwischenspeichern. Alle gerenderten Inhalte werden im Gerätespeicher der Benutzer gespeichert.
- DNS-Prefetch. Der DNS-Vorabruf löst den angegebenen DNS und sonst nichts auf. Wenn ein Benutzer auf Ihrer Website eine bestimmte „Abzweigung“ macht, sparen Sie im Wesentlichen die Zeit, die zum Navigieren benötigt wird.
- Vorverbinden. 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="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 dies möglich Laden Sie Inhalte wie Google Fonts vor oder erstellen Sie ein benutzerdefiniertes Skript zum Vorabladen von JavaScript-Assets in WordPress.
Übrigens, wenn Sie dann WordPress verwenden WP-Rakete kann Ihnen dabei helfen, Ihre Website aufzuladen.
Nachdem Sie nun mehr über Preloader wissen, lassen Sie uns über das andere heiße Thema sprechen: Lazy-Loading.
Was ist Lazy Loading?
Wann immer Sie eine neue Webseite besuchen, sei es ein Blogbeitrag oder eine statische Website, ruft der Browser den gesamten Seiteninhalt ab und stellt diesen Inhalt dann als natives Browsing-Erlebnis bereit. In den meisten Fällen sind Sie gezwungen, die gesamte Seite herunterzuladen, ohne tatsächlich weiter als „above the fold“ zu sehen.
Während beim verzögerten Laden der Browser angewiesen wird, Inhalte zu laden (zu rendern), die sich nur im Ansichtsbereich des Benutzers befinden. Wenn also einer bestimmten Seite größenabhängige Fotos oder Videos hinzugefügt werden, werden diese Dateien nur angezeigt, wenn Ihr Browserbildschirm diesen Teil der Website erreicht.
Und wenn Sie sich Sorgen über potenzielle SEO-Probleme machen, seien Sie nicht besorgt. Yoast hat das bestätigt Google rendert Seiten, die verzögertes Laden verwendenund sieht darin nur ein weiteres Signal zur Leistungsverbesserung.
Meine Empfehlung für eine zu verwendende Bibliothek ist Layzr.js — einfaches und effektives Lazy-Loading für Ihre Bilder! Das Skript ist auch auf der Homepage des Projekts aktiviert, sodass Sie es in Echtzeit sehen können. WordPress-Benutzer können Dutzende von Lazy-Loading-Plugins im öffentlichen Plugin-Repo finden.
#4: Web-Caching
Web-Caching basiert auf dem Konzept, eine Version einer Seite zu kopieren, die dem Benutzer dann jederzeit präsentiert werden kann. Seiten werden beim ersten Besuch einer Website-Seite zwischengespeichert. Wenn ein neuer Benutzer dann versucht, auf diese Seite zuzugreifen, zeigt der Webserver die zwischengespeicherte Version an, anstatt die Live-Version bereitzustellen.
Das Ziel jeder Art von Caching ist es, die Leistung der Website zu verbessern und die erforderlichen Back-End-Ressourcen zu verringern. Abhängig von Ihrer Caching-Lösung können Sie benutzerdefinierte Intervalle und andere Trigger-basierte Ereignisse konfigurieren.
Einige der beliebtesten Namen im Web-Caching sind Varnish, Squid und Memcached. Aber seien Sie versichert, dass es viele andere Lösungen auf dem Markt gibt, besonders wenn Sie ein WordPress-Benutzer sind.
Sie können auch erwägen, sich für ein CDN anzumelden.
Was ist ein CDN (Content Delivery Network)?
Ein Content-Delivery-Netzwerk verwendet einen globalen Cluster verteilter Server, um eine unglaublich schnelle Bereitstellung von Inhalten zu ermöglichen. EIN CDN kann schnell alle gängigen Inhaltstypen im Web übertragen: Video, Foto, JavaScript usw. Heutzutage läuft der Großteil des Webverkehrs über eine Art CDN.
Das Einzige, was man bei Content Delivery Networks beachten sollte, ist, dass sie am besten funktionieren, wenn sie auf einer stark nachgefragten Website verwendet werden. Wenn Sie also nur ein paar Tausend Besucher pro Monat bedienen, kann es schwierig sein, spürbare Verbesserungen zu sehen. Dennoch ist ein CDN eine großartige Lösung, um die Ladezeiten Ihrer Website zu verbessern, die Bandbreitenkosten zu senken, die Verfügbarkeit von Inhalten zu erhöhen und die allgemeine Sicherheit zu erhöhen.
Wenn Sie noch keine Erfahrung mit CDNs haben, empfehlen wir, es auszuprobieren Wolkenflare – Sie bieten einen für immer kostenlosen Plan und es ist eine großartige Plattform, um mit dem Lernen zu beginnen. Und wenn Cloudflare Ihre Erwartungen nicht erfüllt, sehen Sie sich unseren Beitrag zu den besten kostenlosen CDN-Anbietern auf dem Markt an.
Nr. 5: AMP (Accelerated Mobile Pages)
Googles AMP-Projekt ist Handy-Optimierung auf Steroiden! Im Wesentlichen reduziert AMP Ihre Seiten auf das Nötigste, um ein superschnelles Ladeerlebnis zu bieten, aber auch um die Lesbarkeit der Inhalte zu einer Priorität zu machen. Können Sie angesichts der Bedeutung der Seitengeschwindigkeit den Mut aufbringen, zu nahezu sofortigen Ladezeiten Nein zu sagen?
Okay, all diese Schlagworte klingen großartig, aber wie funktioniert AMP?
AMP ist eine einfache HTML-Seite mit bestimmten Einschränkungen, welche Art von Inhalt angezeigt werden kann. Dies führt zu viel schnelleren Ladezeiten und einer Gesamtleistung aufgrund von Einschränkungen bei der Ausführung von Skripten und dergleichen.
JavaScript beispielsweise funktioniert nicht mit AMP. Es sei denn natürlich, Sie verwenden die AMP JS-Bibliothek auf GitHub verfügbar. Mit der JS-Bibliothek können Sie bestimmte Ergebnisse erzielen, z. B. das Vermeiden von Werbeblockern, aber wenn Sie echte Leistung wünschen, ist rohes AMP der richtige Weg.
Interessante Fallstudien für AMP:
#6: Testen Sie, bevor Sie sich festlegen
Heutzutage gibt es keine Entschuldigung dafür, keine separate Staging-Umgebung für Ihr Projekt zu haben. Die meisten Cloud-Hosting-Plattformen bieten standardmäßig Staging-Umgebungen an, erkundigen Sie sich also bei Ihrem Anbieter, ob Sie Zugriff auf eine haben.
Was ist eine Staging-Umgebung?
Nun, der schnellste Weg, dies zu erklären, ist ein Blick auf Ihre aktuelle Live-Website.
Diese Site ist das, was Sie eine Produktionssite nennen – eine Echtzeitversion aller Codes, Skripte und Inhalte, auf denen Ihre Site basiert. Eine Staging-Umgebung ist in diesem Zusammenhang eine Kopie Ihrer Produktionsstätte. Eine Dummy-Site, wenn Sie so wollen. Und in dieser Staging-Umgebung können Sie Änderungen vornehmen oder neue Funktionen hinzufügen, ohne Ihre Live-Site zu beschädigen.
Ich denke immer an Ashley Harpps Post zurück, Verschwenden Sie keine Zeit – Testen Sie Änderungen, bevor Sie sie übernehmen.
Ihre Einstellung dazu, 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. Dennoch enthält Ashleys Beitrag auch Links zu nützlichen Tools zum Einrichten einer lokalen Staging-Umgebung.
Das Testen ist nicht so beängstigend, wie es sich anhört. Aber es ist verdammt beängstigend, wenn Sie versehentlich Ihre gesamte Datenbank auf einem Produktionsserver löschen!
Abschlusserklärung
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 bereitwillige Anwendung der in diesem Beitrag beschriebenen Methoden. Wahrscheinlich sind Sie bereits mit Dingen wie Inhalts-Caching und Lazy-Loading vertraut, aber was ist mit Staging-Umgebungen oder Preloadern?
Hoffentlich hat dieser Beitrag etwas Licht in den aktuellen Stand der mobilen Website-Optimierung geworfen.