Optimierung von Bildern für Benutzer mit Langsamen Netzwerk-Geschwindigkeiten

0
8

Für jede Webseite, Ladezeit der Seite ist ein entscheidender Faktor, dass kann Pause machen oder das Geschäft. Dank der besseren Benutzer-Erfahrung, die kommt mit einem schnell-laden-Webseite, diejenigen, die den Fokus beim laden der Seite-Optimierung genießen Sie eine bessere conversion-raten, bessere SEO, bessere Kundenbindung und geringere bounce-raten.

Und diese Tatsache wurde hervorgehoben, dass in mehreren Studien. Zum Beispiel, nach einer der Studien, 47% der Konsumenten erwarten, dass eine web-Seite geladen in 2 Sekunden oder weniger. Kein Wunder, dass Entwickler auf der ganzen Welt investieren viel in die Verbesserung der Webseite Ladezeit.

Logik diktiert, dass andere Faktoren die gleichen, ein Feuerzeug Webseite sollte schneller geladen werden als eine schwerere Webseite, und das ist die Richtung, in die unsere Webseiten sollten den Kopf zu. Jedoch, im Gegensatz zu der Logik, die unsere Webseiten immer schwerer im Laufe der Jahre. Ein Blick auf Daten aus der HTTP-Archiv zeigt, dass eine Durchschnittliche Webseite wird in 2017 war fast drei mal schwerer als das, was es verwendet, um sein in 2011.

Mit mehr leistungsfähige Benutzer-Geräte, schnellere Netze, und die wachsende Popularität von client-side frameworks und rich media-Erlebnisse, die wir begonnen haben, drängen mehr und mehr Daten auf dem Gerät des Benutzers.

Jedoch, als Entwickler, die wir vermissen ein entscheidender Punkt. Wir entwickeln in der Regel und testen Sie unsere Webseiten, in unseren Büros über eine stabile WiFi-oder WLAN-verbindungen. Jedoch, wenn ein real-user nutzt unsere website, die Netzwerk-Geschwindigkeit und Stabilität kann nicht sein, dass große. Vor allem mit mehr und mehr Nutzer kommen über mobile Geräte, die das problem der schwankenden Netzwerkbedingungen ist sogar noch bedeutender.

Sie glauben es nicht? ImageKit.io eine Studie durchgeführt, um die Netzwerk-Geschwindigkeit berichtet die Network Info-API von Chrome-browser für die Benutzer einer website (mit Besuchern meist aus Indien). Es ist nicht sehr überraschend, dass fast 40% der Besucher verfolgt hatten, berichteten die Geschwindigkeit niedriger als 4G, also weniger als 700 Kbit / s pro Netzwerk-Info, API Spec.

Während dieser Prozentsatz der Benutzer, die schlechte Netzwerkbedingungen kann niedriger sein, wenn wir Besucher aus entwickelten Ländern wie den USA oder in Europa, wir können immer noch davon ausgehen, dass unterschiedliche Netzwerk-Bedingungen, Auswirkungen, ein großes Stück unserer Nutzer. Und wir haben alle schon erlebt, wie gut. Wenn wir geben Sie einen Aufzug oder verschieben Sie in den Keller, Parkplatz vor einem Gebäude oder auf Reisen zu einem entfernten Ort, die mobilen Daten-download-Geschwindigkeiten deutlich sinken.

Daher müssen wir im Hinterkopf behalten, dass unsere Nutzer, vor allem diejenigen, die auf mobilen, werden immer versuchen, unsere website zu besuchen, auf das Netzwerk langsam ist, und unser Ziel als Entwickler sollte Ihnen zumindest einen anständigen Browser-Erfahrung.

Warum optimieren Sie Bilder für langsame Netzwerke?

Das ultimative Ziel der Optimierung einer Webseite für langsamere Netzwerke in der Lage zu sein, für die leichtere Variante. Auf diese Weise, alle wesentlichen Sachen heruntergeladen, angezeigt und schnell auf dem Gerät des Benutzers.

Unter all den Ressourcen, die Last auf eine Webseite, die Bilder für die meisten der Nutzlast. Und selbst wenn wir es tun, kümmern sich um die Optimierung der Bilder im Allgemeinen, optimieren Sie weiter für langsamere Netzwerke reduzieren die gesamte Seite Gewicht um fast 30%.

Auch, zusätzliche Komprimierung von Bildern nicht zu brechen die kritische Funktionalität der Anwendung. Ja, die Bildqualität lässt etwas zu bieten für eine bessere Benutzer-Erfahrung. Aber im Gegensatz abstreifen Javascript, die verlangen eine Menge Gedanken, das komprimieren von Bildern ist relativ einfach.

Wie optimiert man Bilder für das Netzwerk langsam?

Jetzt haben wir festgestellt, dass eine Optimierung unsere Webseite basiert auf dem Benutzer-Netzwerk-Geschwindigkeit ist entscheidend, und, dass die Bilder die am niedrigsten hängende Frucht zu erhalten begann, wir schauen, wie können wir erreichen, Netzwerk-basierte Bildoptimierung.

Es gibt zwei Teile der Lösung.

Bestimmen Sie die Benutzer-Netzwerk-Geschwindigkeit

Wir brauchen, um die Netzwerk-Geschwindigkeit, die der Benutzer erfährt, und teilen Sie Sie in die Eimer. Zum Beispiel, Benutzer, die Geschwindigkeit über einen bestimmten Schwellenwert eingestuft werden sollten, in einer einzigen Gruppe und war eine bestimmte Qualität eines Bildes. Diese Klassifikation ist einfach in der modernen web-Browser mit dem Network Information API. Diese API automatisch klassifiziert die Nutzer in vier Gruppen – 4G, 3G, 2G, und langsamen 2G mit 4G das Schnellste und langsamen 2G die langsamste.

// gibt ‘4g’, ‘3g’, ‘2g’ oder ‘slow-2g’
var effectiveType = NetworkInformation.effectiveType;
Komprimieren Sie die Bilder, um eine entsprechende Qualität Ebene

Der zweite Teil der Lösung ist, in der Lage zu verändern, der Grad der Komprimierung eines Bildes in Echtzeit, abhängig von der Benutzer-Netzwerk-Geschwindigkeit in Schritt 1 ermittelt. Es sollte so einfach sein wie die übergabe eines zusätzlichen Parameters in der Bild-URL, wenn ein browser löst eine Last für ihn.

Während wir setzen auf den browser des Benutzers zu ermitteln Netzwerk-Geschwindigkeit, ein tool wie ImageKit.io macht die Echtzeit-Kompression bisschen einfach.

ImageKit.io ist ein Echtzeit-Bild-Optimierung und-transformation-Produkt, das uns hilft, liefern Bilder in das richtige format ändern-Komprimierung Ebene, Größe ändern, zuschneiden und transformieren Sie Bilder direkt von der URL und liefern die Bilder über ein globales Bild CDN. Wir können das Bild mit der gewünschten Kompressionsstufe nur durch die übergabe der Bildqualität-parameter in der URL. Qualität ist direkt proportional zur Bildgröße, D. H., je höher die Qualität, Zahl, größer wird das Bild.

// ImageKit URL mit Qualität 90
https://ik.imagekit.io/demo/default-image.jpg?tr=q-90

// ImageKit URL mit Qualität 50
https://ik.imagekit.io/demo/default-image.jpg?tr=q-50

Wie sonst hat ImageKit Hilfe bei Netzwerk-basierten Bild-Optimierung?

Während ImageKit hat immer unterstützt Echtzeit-URL-basierten Bild-Qualität-Modifikation, es hat die Unterstützung der Netzwerk-basierten Bild-Optimierungs-Funktionen vor kurzem. Mit diesen neuen Eigenschaften, hat es sich mühelos zu implementieren komplette Netzwerk-basierte Optimierung mit minimalem Aufwand.

Natürlich, zuerst müssen wir die Anmeldung für ImageKit und starten Sie die Bereitstellung der Bilder auf unserer Webseite durch Sie. Sobald dies erledigt ist, in der ImageKit dashboard, die wir haben, damit die Einstellung für Netzwerk-basierte Bildoptimierung. Wir bekommen ein code-snippet richtig, es und fügen es zu einer bestehenden service-Mitarbeiter auf der Webseite oder einen neuen service-Mitarbeiter.

// Hinzufügen des code-snippets in einem service-Mitarbeiter
importScripts(“https://runtime.imagekit.io/<your_imagekit_id>/v1/js/Netzwerk-basierend-Anpassung.js?v=” + new Date().getTime());

Im dashboard selbst, wir müssen auch geben Sie das gewünschte Qualitätsniveau für die verschiedenen Netzwerk-Geschwindigkeit Eimer. Zum Beispiel, wir haben eine Qualität von 90 für Bilder für die Nutzer eingestuft als 4G-Benutzer und eine Qualität von 50 für unsere langsamen 2G-Nutzer. Denken Sie daran, dass eine geringere Qualität resultiert in kleineren Bildgrößen.

Dieser code-snippet ist wie ein plugin gedacht für den Einsatz in service-Mitarbeiter. Es fängt die Bild-Anfragen, die aus der Benutzer-browser, erkennt der Benutzer die Geschwindigkeit im Netzwerk und fügt die nötigen Parameter für die Bild-URL. Diese Parameter können verstanden werden, indem die ImageKit server zu komprimieren, das Bild auf die gewünschte Ebene und pflegen effiziente client-side caching. Für Netzwerk-basierte Bild-Optimierung, alles, was wir tun müssen, ist, um es uns auf unserer website und fertig!

Darüber hinaus wird in der ImageKit dashboard, können wir bestimmen, die Bild-URLs (oder Muster in den URLs), sollte nicht optimiert werden, basierend auf der Netzwerk-Typ. Zum Beispiel, wir würden wollen, um die gleiche scharfe-logo, unsere Marke für unsere Nutzer, unabhängig von Ihrem Netzwerk-Geschwindigkeit.

Überprüfen der Installation

Einmal richtig eingerichtet, können wir schnell überprüfen, ob die Netzwerk-basierte Optimierung ist das arbeiten mit Chrome Developer Tools. Wir emulieren kann ein langsames Netzwerk auf unseren browser unter Verwendung der Entwickler-tools. Wenn korrekt eingerichtet, der service-Mitarbeiter hinzufügen sollten einige Parameter, um das ursprüngliche Bild Anfrage mit Angabe der aktuellen Geschwindigkeit im Netzwerk. Diese Parameter werden verstanden, indem ImageKit den Servern um das Bild zu komprimieren gemäß den Qualitäts-Einstellungen, die Sie in unserem ImageKit dashboard entsprechenden Netzwerk-Geschwindigkeit.

Wie funktioniert caching Arbeit mit dem service-Mitarbeiter vor Ort?

ImageKit service-worker-plugin-läuft der browser-cache zu Gunsten von Netzwerk-basierten Bild-cache im browser. Unter Umgehung des browser-cache bedeutet, dass die service-Mitarbeiter pflegen können verschiedene caches für verschiedene Netzwerk-Typen und wählen Sie das richtige Bild aus dem cache oder ein neues anfordern, basierend auf den aktuellen Netzwerkbedingungen.

Die service-Mitarbeiter plugin verwendet automatisch die cache-erste Technik, die zum laden der Bilder und implementiert auch eine Wasserfall-Methode, um wählen Sie die richtige aus dem cache. Mit dieser Wasserfall-Methode, Bilder in höherer Qualität den Vorzug erhalten über die Bilder mit einer niedrigeren Qualität. Was es bedeutet ist, dass, wenn der Benutzer die Geschwindigkeit sinkt auf 2G und er hat ein bestimmtes Bild zwischengespeichert, aus der Zeit, als er erfahren hatte gute download-Geschwindigkeit auf einem 4G-Netzwerk, die service-Mitarbeiter werden verwenden, die Cache 4G Bild für Lieferung anstelle des Herunterladens der Bild über das 2G-Netz. Aber der Umkehrschluss ist nicht gültig. Wenn der Benutzer das 4G-Netz Geschwindigkeiten, die service-Mitarbeiter nicht abholen der 2G-Bild aus dem cache, weil es möglich ist, Holen Sie sich eine bessere Bildqualität und die Ressourcen das erlauben.

Und es gibt noch mehr!

Abgesehen von einer einfachen, ready-to-use service worker-plugins und dashboard-Einstellungen, ImageKit hat ein paar mehr Dinge zu bieten, die machen es zu einem attraktiven Werkzeug, um loszulegen mit Netzwerk-basierten Optimierung.

Analytics

ImageKit bietet uns analytics auf unseren Benutzers beobachtet, Netzwerk-Typ. Es gibt uns einen Einblick in die Anzahl der Zeiten, die Netzwerk-basierte Optimierung wird ausgelöst, und was hat der Benutzer die Verteilung Aussehen über verschiedene Netzwerk-Typen. Diese Verteilung Analyse kann hilfreich sein, auch für die Optimierung anderer Ressourcen auf unserer website.

Kosten für die Optimierung

Mit Netzwerk-basierten Bild-Optimierungen, die Größe der Bilder untergeht, aber zur gleichen Zeit, die Zahl der transformation Anfragen können potenziell nach oben gehen. Im Gegensatz zu vielen anderen Echtzeit-Bild-Optimierungs-Produkte gibt, ImageKit die Preisgestaltung basiert nur auf der output-Bild, Bandbreite und sonst nichts. Also mit dem günstigen Preismodell, das implementieren von Netzwerk-basierten Bild-Optimierung bietet nicht nur viel mehr Wert auf unsere Nutzer, sondern hilft uns auch, schneiden Sie unten auf das Bild Lieferung Kosten.

Fazit

Die Verbesserung der page load performance ist wichtig. Aber, es ist ein bisschen, wir alle haben gefehlt – optimiert für langsame Netzwerke.

Bilder zeigen einen leichten Einstieg, wenn es um die Optimierung unserer gesamten website für verschiedene Netzwerke. Mit der Unterstützung von Netzwerk-basierten Optimierungs-Funktionen über service-Mitarbeiter, hat es sich mühelos zu erreichen, mit ImageKit.

Es wird ein großer Mehrwert für unsere Nutzer und wird Ihnen helfen zu verbessern die user experience noch weiter, die einen positiven Einfluss auf die conversions auf unserer website.

Melden Sie sich jetzt für ImageKit und loslegen mit der Sie es jetzt!