English English French French Spanish Spanish German German
Geekflare wird von unserem Publikum unterstützt. Wir können Affiliate-Provisionen durch den Kauf von Links auf dieser Website verdienen.
Teilen:

Wie optimiere ich meine Website für mobile Benutzer?

Invicti Web Application Security Scanner – die einzige Lösung, die eine automatische Verifizierung von Schwachstellen mit Proof-Based Scanning™ bietet.

Haben Sie sichergestellt, dass Ihre Website für Handys geeignet ist?

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

Immer mehr Webbenutzer entfernen sich von Desktop-Computern und durchsuchen und kaufen stattdessen mit ihren Mobilgeräten.

Responsive Webdesign hat es ermöglicht, Websites zu erstellen, die auf allen Plattformen auf einer gleichmäßigen Ebene funktionieren. Aber selbst dann ist Responsive Design nur ein Bruchteil von UX-Optimierung Strategien für mobile.

Wenn Sie möchten, echte Leistungsoptimierungmüssen Sie auch andere Alternativen in Betracht ziehen.

Aus diesem Grund wird der Aufbau Ihrer Website als Mobile-First-Erfahrung. In einfachen Worten bedeutet Mobile-First, dass Ihr Design und Ihr Inhalt zuerst für mobile Benutzer optimiert werden.

Abgesehen davon geht es in diesem Beitrag nicht darum, eine völlig neue Site zu entwerfen. Stattdessen werden wir uns mit einigen grundlegenden Prinzipien des Mobile-First-Designs befassen. Konzentrieren Sie sich einige Zeit auf technische Details, um die Benutzererfahrung für Ihre mobilen Benutzer zu optimieren.

#1: Designing with mobile in mind

Das Web basiert weitgehend auf dem Prinzip, Desktop-Benutzer zu bedienen. Das echte Web, die wirklichen Fortschritte in den Technologien, wird am besten auf einem schönen Vollbild angezeigt. Smartphones und andere mobile Geräte sind jedoch eine Sache, und es ist an der Zeit, sich an das Konzept des Mobile-First-Designs anzupassen.

Welche anderen Designelemente sollten Sie außer dem vernünftigen Responsive Design in Ihre Mobile-First-Webdesigns implementieren?

  • Priorisierung. Mobile Bildschirme sind auf den verfügbaren Anzeigebereich beschränkt. Außerdem präsentieren mobile Bildschirme Inhalte vertikal und nicht viel breiter - horizontal - für Desktops. Dies bedeutet, dass Sie mithilfe der Priorisierung entwerfen müssen. Welche Elemente sind für Benutzer von größter Bedeutung? Wenn es CTA-Schaltflächen gibt, wie einfach ist es für den mobilen Benutzer, sie zu sehen?
  • Inhalt zuerst. Farbe Sekunde. Du kannst tun einige interessante Dinge mit mobilem Design, aber sicherlich nicht im Bereich des Desktop-Designs. Geben Sie also zuerst dem Inhalt Platz. Machen Sie Ihre Kopie und andere Inhaltsteile leicht lesbar und zugänglich. Ein mobiler Bildschirm verzeiht ablenkende visuelle Elemente viel weniger.
  • Einfache Navigation. Auf einem mobilen Gerät können Sie nicht einfach irgendwo klicken und zur Startseite zurückkehren. Es sei denn, Sie planen diese Art der Navigation im Voraus. Und du solltest. Experimentieren Sie mit Scroll-to-Top-Widgets, aber auch mit nahtlosen Sticky-Headern, wann immer dies möglich ist.

Der beste Weg, um zu überprüfen, ob Sie dies richtig machen, ist die Verwendung Ihres Telefons (Das mache ich die ganze Zeit!) und besuchen Sie Ihre Website. Untersuchen Sie gründlich, wie sich die Dinge anfühlen und zusammenfließen.

Wenn Sie in einem Café sitzen oder auf einen Flug auf einem Flughafen warten, stoßen 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 ihr Feedback. In den meisten Fällen werden Sie sich selbst überraschen, wie die Nutzer die Benutzererfahrung Ihrer Website wahrnehmen.

#2: Resource optimization; images, icons, etc.

Wie oft verwenden Sie Visuals aus persönlichen Gründen und nicht UX? Es kommt vor, und wenn Sie kreativ werden möchten, lohnt es sich zu verstehen, wie die Medienoptimierung funktioniert.

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

Durchschnittliche Ladezeiten für Seiten für 2018 Wie vergleichen Sie MachMetrics Speed ​​Blog?
Die durchschnittliche Webseitengröße im Jahr 2018. Nach Branchen und verschiedenen Ländern aufgelistet.

Es gibt zwar keine festgelegte Webseitengröße, die jeder einhalten muss, aber es ist normal, dass eine kleinere Webseitengröße schnelleren Ladezeiten entspricht.

Wie können Sie also einige zusätzliche KBs oder sogar MBs aus Ihren visuellen Inhalten entfernen?

  • Ändern Sie die Größe Ihrer Bilder. Klingt einfach, oder? Nun, ich kann nicht damit rechnen, wie oft ich eine mobile Website besucht habe, nur um sie zu haben 1980 x 1200 Bilder werden im Hintergrund geladen. Stattdessen sollten Fotos in voller Größe gegebenenfalls als alternative Links bereitgestellt werden. Durch Ändern der Größe können je nach den erforderlichen Abmessungen bis zu 80% der Gesamtbildgröße eingespart werden. Für mobile Geräte gibt es jedoch nie einen Grund, den Bereich von 600 bis 700 Pixel höchstens zu überschreiten.
  • Reduzieren Sie die Dateigröße durch Komprimierung. Bei der Bildkomprimierung / -optimierung wird Software von Drittanbietern verwendet, um die Anzahl der in einem Bild vorhandenen Farben zu verringern. Dies kann so weit erfolgen, dass Ihre Fotos nicht ihre angeborene Qualität verlieren, sondern ihre Dateigröße drastisch reduzieren kann. Wenn Sie Hilfe beim Komprimieren von Bildern benötigen, finden Sie in unserer umfassenden Zusammenfassung von Bildkomprimierungswerkzeuge.
  • Entdecken Sie alternative Dateiformate. Jeder hat von PNG- und JPEG-Dateiformaten gehört. Immerhin sind sie die De-facto-Image-Standards im Web. Aber nicht lange. Die neueste und beste Technologie in der digitalen Bildlieferung dreht sich um WebP und SVG-Dateiformate. SVGs können zum Beispiel automatisch auf Bildschirmgröße skalierenReduzieren der Anzahl der Ressourcen, die zum Laden bestimmter visueller Komponenten erforderlich sind.

Die Optimierung der Benutzererfahrung für Mobile-First ist nur eine achtsame Sache. Impulsentwurf bedeutet, dass Sie die langfristigen Auswirkungen Ihrer Entscheidungen nicht berücksichtigen. Während ein achtsamer Ansatz Ihnen hilft, von Grund auf auf mobile Benutzer zu achten.

Aufschlussreich: Entsprechend dem Konzept des intuitiven mobilen Designs müssen Sie nicht dieselben visuellen Komponenten in Ihren mobilen Designs wiederverwenden. Das Eliminieren einiger Hintergrundbilder und das Ersetzen durch farbige Hintergründe - auf Mobilgeräten - beeinträchtigt die Benutzererfahrung nicht. Suchen Sie immer nach Möglichkeiten, um selbst kleinste Bandbreite einzusparen.

#3: Pre-loading and 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 vor Benutzern zu rendern, die sie besuchen?

Schauen wir uns zuerst die Preloader an, auch bekannt als Browser-Hinweise.

Vorlader sind Möglichkeiten für eine Seite, den Browser über mögliche Navigationsmöglichkeiten zu informieren. ZB könnte ein Benutzer besuchen Seite B. von Seite A..

Beim Vorladen kann der Benutzer Seite B rendern, bevor er auf den Navigationslink auf Seite A klickt.

Preload-Direktive

Beachten Sie, dass das Vorladen nicht immer funktioniert und es Sache des Browsers ist, die endgültige Entscheidung zu treffen. Faktoren wie Gerätetyp und Bandbreite werden einzeln gewichtet.

Was sind die häufigsten Preloader-Typen?

  • Vorabrufen. Dieser Typ legt nahe, dass eine bestimmte URL höchstwahrscheinlich die nächste Navigationsoption ist. Wenn der Browser die Anforderung gewährt, werden wichtige Seitenressourcen automatisch zwischengespeichert, wodurch die nächste Seite viel schneller geladen wird.
  • Vorrendern. Während der obige Typ nur bestimmte Ressourcen abruft, vorgeben wird die gesamte Seite zwischenspeichern. Alle gerenderten Inhalte werden im Gerätespeicher des Benutzers gespeichert.
  • DNS-Prefetch. Der DNS-Prefetch löst den angegebenen DNS und sonst nichts auf. Wenn ein Benutzer eine bestimmte "Drehung" auf Ihrer Website vornimmt, sparen Sie im Wesentlichen die Zeit, die für die Navigation benötigt wird.
  • Voranschließen. Wie oben, stellt jedoch 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">

Da Preloader dynamische HTML-Tags verwenden, können Sie dies tun Laden Sie Inhalte wie Google Fonts vor oder erstellen Sie ein benutzerdefiniertes Skript zum Vorladen von JavaScript-Assets in WordPress.

Übrigens, wenn Sie WordPress verwenden, dann WP Rakete kann Ihnen dabei helfen, Ihre Website aufzuladen.

Nachdem Sie mehr über Preloader wissen, sprechen wir über das andere heiße Thema: Lazy-Loading.

Was ist Lazy Loading?

Wenn Sie eine neue Webseite besuchen, sei es ein Blog-Beitrag oder eine statische Website, ruft der Browser den gesamten Seiteninhalt ab und dient dann als native Browser-Erfahrung. In den meisten Fällen müssen Sie die gesamte Seite herunterladen, ohne tatsächlich weiter als über der Falte zu sehen.

Während beim verzögerten Laden der Browser angewiesen wird, Inhalte zu laden (zu rendern), die sich nur im Ansichtsfenster des Benutzers befinden. Wenn 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 mögliche SEO-Probleme machen, seien Sie nicht. Yoast hat das bestätigt Google rendert Seiten, die verzögert geladen werdenund sieht es als ein weiteres Signal zur Leistungsverbesserung.

Layzr js

Meine Empfehlung für eine Bibliothek ist Layzr.js - einfaches und effektives Lazy-Loading für Ihre Bilder! Das Skript wird auch auf der Homepage des Projekts aktiviert, sodass Sie sehen können, wie es in Echtzeit ausgeführt wird. WordPress-Benutzer finden Dutzende von Plugins zum verzögerten Laden im öffentlichen Plugin-Repo.

#4: Web caching

Das Web-Caching basiert auf dem Konzept, eine Version einer Seite zu kopieren, die dem Benutzer jederzeit präsentiert werden kann. Seiten werden beim ersten Besuch einer Webseite 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 besteht darin, 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.

Web-Caching

Einige der beliebtesten Namen beim Web-Caching sind Varnish, Squid und Memcached. Aber seien Sie versichert, dass es viele andere Lösungen auf dem Markt gibt. vor allem, wenn Sie ein WordPress-Benutzer sind.

Sie können sich auch für a anmelden CDN.

Was ist ein CDN (Content Delivery Network)?

Ein Netzwerk für die Bereitstellung von Inhalten verwendet einen globalen Cluster verteilter Server, um eine unglaublich schnelle Bereitstellung von Inhalten zu gewährleisten. EIN CDN kann schnell alle gängigen Inhaltstypen im Web übertragen: Video, Foto, JavaScript usw. Heutzutage wird der größte Teil des Internetverkehrs über eine Art CDN übertragen.

Bei Content-Delivery-Netzwerken ist zu beachten, dass sie auf einer stark nachgefragten Website am besten funktionieren. Wenn Sie also nur ein paar tausend Besucher pro Monat bedienen, kann es schwierig sein, spürbare Verbesserungen zu sehen. Trotzdem 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 Ihnen, diese auszuprobieren Cloudflare - Sie bieten einen Plan für immer und es ist eine großartige Plattform, um mit dem Lernen zu beginnen. Und wenn Cloudflare Ihre Erwartungen nicht erfüllt, lesen Sie unseren Beitrag für die besten kostenlosen CDN-Anbieter auf dem Markt.

#5: AMP (Accelerated Mobile Pages)

Google AMP-Projekt ist Handy-Optimierung auf Steroiden! Im Wesentlichen, AMP reduziert 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?

YouTube-Video

Okay, all diese Schlagworte klingen großartig, aber wie funktioniert AMP?

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

JavaScript funktioniert beispielsweise nicht mit AMP. Es sei denn, Sie verwenden natürlich die AMP JS-Bibliothek auf GitHub verfügbar. Durch die Verwendung der JS-Bibliothek können Sie bestimmte Ergebnisse erzielen, z. B. das Vermeiden Werbeblocker, aber wenn Sie echte Leistung wollen, dann ist rohes AMP der richtige Weg.

Interessante Fallstudien für AMP:

#6: Test before committing

In der heutigen Zeit gibt es keine Entschuldigung dafür, keine separate Staging-Umgebung für Ihr Projekt zu haben. Die meisten Cloud-Hosting-Plattformen Bieten Sie standardmäßig Staging-Umgebungen an. Erkundigen Sie sich daher bei Ihrem Anbieter, ob Sie Zugriff auf eine haben.

Testen vor dem Festschreiben

Was ist eine Staging-Umgebung?

Der schnellste Weg, dies zu erklären, ist ein Blick auf Ihre aktuelle Live-Website.

Diese Site wird als Produktions-Site bezeichnet - eine Echtzeitversion des gesamten Codes, der Skripte und des Inhalts, auf dem Ihre Site basiert. EIN Aufführung Umgebung ist in diesem Zusammenhang eine Kopie Ihrer Produktionsstätte. EIN Attrappe Website, wenn Sie so wollen. 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 festschreiben.

Ihre Einstellung, wie wir uns selbst „austricksen“, um bestimmte Dinge zu vermeiden, ist ein hervorragendes Beispiel dafür, wie wir keine Verantwortung übernehmen wollen, wenn wir einen Fehler machen. Der Beitrag von Ashley enthält jedoch auch Links zu nützlichen Tools zum Einrichten einer lokalen Staging-Umgebung.

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

Schlusserklärung

Optimieren Sie Ihre Website für einen reibungslosen Ablauf mobile Erfahrung ist gar nicht so schwer. Alles, was Sie brauchen, ist ein wenig Entschlossenheit und wenden bereitwillig die in diesem Beitrag beschriebenen Methoden an. Möglicherweise sind Sie bereits mit Dingen wie dem Zwischenspeichern von Inhalten und dem verzögerten Laden vertraut, aber was ist mit Staging-Umgebungen oder Preloadern?

Hoffentlich hat dieser Beitrag etwas Licht in den aktuellen Stand der Optimierung mobiler Websites gebracht.

Danke an unsere Sponsoren
Weitere großartige Lektüre zum Thema SEO
Macht Ihr Geschäft
Einige der Tools und Dienste, die Ihr Unternehmen beim Wachstum unterstützen.
  • Invicti verwendet das Proof-Based Scanning™, um die identifizierten Schwachstellen automatisch zu verifizieren und innerhalb weniger Stunden umsetzbare Ergebnisse zu generieren.
    Versuchen Sie es mit Invicti
  • Web-Scraping, Wohn-Proxy, Proxy-Manager, Web-Unlocker, Suchmaschinen-Crawler und alles, was Sie zum Sammeln von Webdaten benötigen.
    Versuchen Sie es mit Brightdata
  • Semrush ist eine All-in-One-Lösung für digitales Marketing mit mehr als 50 Tools in den Bereichen SEO, Social Media und Content-Marketing.
    Versuchen Sie es mit Semrush
  • Intruder ist ein Online-Schwachstellenscanner, der Cyber-Sicherheitslücken in Ihrer Infrastruktur findet, um kostspielige Datenschutzverletzungen zu vermeiden.
    MIT DER INTELLIGENTEN SCHADENKALKULATION VON Intruder