Het optimaliseren van Afbeeldingen voor Gebruikers met Langzame Netwerk Snelheden

0
19

Voor elke website, de laadtijd van de pagina is een kritische factor die kan maken of breken het bedrijf. Dankzij de betere user experience, dat is uitgerust met een snel ladende webpagina, die zich richten op het laden van de pagina optimalisatie genieten van een betere conversie tarieven, betere SEO, betere retentie en lagere bounce rates.

En dit feit is benadrukt in verschillende studies. Bijvoorbeeld, volgens een van de studies, 47% van de consumenten verwacht een webpagina te laden in 2 seconden of minder. Geen wonder dat ontwikkelaars over de hele wereld zich een stuk op het verbeteren van de webpagina te laden.

Logica dicteert dat het houden van andere factoren gelijk zijn, een lichtere webpagina, sneller geladen dan een zwaardere webpagina, en dat is de richting waarin onze webpagina ‘ s moet het hoofd ook. Echter, in tegenstelling tot die van de logica, onze websites zijn zwaarder geworden over de jaren. Een blik op de gegevens van HTTP Archief blijkt dat een gemiddelde webpagina in 2017 was bijna drie keer zwaarder dan wat het gebruikt te worden in 2011.

Met meer krachtige apparaten, snellere netwerken en de groeiende populariteit van client-side kaders en rijke media ervaringen, we zijn begonnen met het duwen van meer en meer gegevens naar het apparaat van de gebruiker.

Echter, als ontwikkelaars, we missen toch een cruciaal punt. We gewoonlijk het ontwikkelen en testen van onze websites, in onze kantoren over stabiele WiFi of vaste verbindingen. Echter, bij gebruik van een real-gebruiker gebruik maakt van onze website, de snelheid van het netwerk en de stabiliteit niet zo groot. Vooral met meer en meer gebruikers die online zijn via mobiele apparaten, is het probleem van wisselende netwerkomstandigheden is zelfs nog belangrijker.

U gelooft het niet? ImageKit.io een studie uitgevoerd om te bepalen de snelheid van het netwerk wordt gemeld door het Netwerk Info API van de Chrome-browser voor gebruikers van een website (bezoekers, vooral uit India). Het is dan ook niet heel verrassend dat bijna 40% van de bezoekers bijgehouden had gemeld snelheid lager dan 4 G, d.w.z. minder dan 700 Kbps per het Netwerk Info API Spec.

Hoewel dit percentage van de gebruikers ervaart een slecht netwerk omstandigheden kan lager zijn als we aan de bezoekers van de ontwikkelde landen als de USA of die in Europa, we kunnen veilig aannemen dat wisselende netwerkomstandigheden een impact hebben op een groot deel van onze gebruikers. En we hebben allemaal ervaren het als goed. Wanneer we in een lift of verplaatsen naar de kelder parkeerplaats van een gebouw of een reis naar een externe locatie, met de mobiele data download snelheden aanzienlijk dalen.

Daarom moeten we in gedachten houden dat onze gebruikers, met name degenen die op mobiel, altijd zal proberen om onze website te bezoeken op een traag netwerk, en ons doel is om als ontwikkelaar moet worden om hen te voorzien van ten minste een fatsoenlijke browser.

Waarom optimaliseren van afbeeldingen voor trage netwerken?

Het uiteindelijke doel van het optimaliseren van een website voor langzamere netwerken van dienst te kunnen zijn lichtere variant. Op deze manier, alle essentiële dingen wordt gedownload en snel weergegeven op het apparaat van de gebruiker.

Onder al de middelen die worden geladen op een webpagina, foto ‘ s voor de meeste van de lading. En zelfs als we het doen verzorgen van het optimaliseren van de beelden in het algemeen, het optimaliseren van hen verder voor tragere netwerken kan het verminderen van de totale pagina gewicht met bijna 30%.

Ook extra compressie van afbeeldingen niet breken de kritische functionaliteit van een applicatie. Ja, de kwaliteit van de afbeelding laat een beetje om te zorgen voor een betere gebruikerservaring. Maar in tegenstelling tot wegstrippen van Javascript, die zou vergen veel van het denken, het comprimeren van beelden is relatief eenvoudig.

Over het optimaliseren van afbeeldingen voor een traag netwerk?

Nu we hebben vastgesteld dat het optimaliseren van onze website zijn gebaseerd op de snelheid van het netwerk is van essentieel belang en die beelden zijn het laagst hangende fruit aan de slag te gaan, laten we kijken hoe we kunnen bereiken netwerk-gebaseerde image optimalisatie.

Er zijn twee onderdelen van de oplossing.

Het bepalen van de gebruiker de snelheid van het netwerk

We moeten bepalen wat de snelheid van het netwerk dat de gebruiker ervaart en verdeel ze in de emmers. Bijvoorbeeld, gebruikers ervaren snelheid boven een bepaalde drempel moet worden ingedeeld in één groep en een bepaalde mate van kwaliteit van een afbeelding. Deze indeling is eenvoudig in moderne web browsers met de Netwerk Informatie API. Deze API automatisch classificeert de gebruikers in de vier emmers – 4G, 3G, 2G, en langzaam 2G, met 4G-de snelste en langzaam 2G wordt de langzaamste.

// geeft ‘4g’, ‘3g’, ‘2g’ of ‘slow-2g’
var effectiveType = NetworkInformation.effectiveType;
Het comprimeren van afbeeldingen naar een passend kwaliteitsniveau

Het tweede deel van de oplossing is om te kunnen veranderen is het compressie-level van een beeld in real-time, afhankelijk van de gebruiker de snelheid van het netwerk wordt bepaald in stap 1. Het moet net zo eenvoudig als het passeren van een extra parameter in de URL van de afbeelding wanneer de browser activeert een belasting voor.

Terwijl wij afhankelijk van de browser om te bepalen dat de gebruiker de snelheid van het netwerk, een tool zoals ImageKit.io maakt de real-time compression beetje simpel.

ImageKit.io is een real-time beeld optimalisatie en transformatie van het product dat helpt ons bij het leveren van afbeeldingen in het juiste formaat, compressie niveaus, vergroten, verkleinen, bijsnijden, en transformeren van beelden direct van de URL en leveren deze beelden via een globaal beeld CDN. We kunnen het beeld met de gewenste compressie niveau door gewoon langs de kwaliteit van de afbeelding parameter in de URL. Kwaliteit is direct evenredig aan de grootte afbeelding, ofwel, hoger de kwaliteit, aantal, groter worden van de resulterende afbeelding.

// ImageKit URL met kwaliteit 90
https://ik.imagekit.io/demo/default-image.jpg?tr=q-90

// ImageKit URL met een kwaliteit van 50
https://ik.imagekit.io/demo/default-image.jpg?tr=q-50

Hoe anders is ImageKit helpen met netwerk-gebaseerde image optimalisatie?

Terwijl ImageKit heeft altijd ondersteund real-time op basis van de URL beeldkwaliteit wijziging, het is begonnen met het ondersteunen van het netwerk-gebaseerde image optimalisatie functies onlangs. Met deze nieuwe functies moeiteloos te implementeren complete netwerk-gebaseerde optimalisatie met een minimum aan inspanning.

Natuurlijk, dan moeten we eerst aanmelden voor ImageKit en starten met het leveren van de afbeeldingen die op onze website door middel van het. Zodra dit is gedaan, in de ImageKit dashboard, hebben we om de instelling voor netwerk-gebaseerde image optimalisatie. We krijgen een code snippet die en voeg het toe aan een bestaande service werknemer op onze website of een service-werknemer.

// Het toevoegen van een stukje code in een service werknemer
importScripts(“https://runtime.imagekit.io/<your_imagekit_id>/v1/js/netwerk-gebaseerd-aanpassing.js?v=” + new Date().getTime());

In het dashboard zelf, we moeten ook het specificeren van de gewenste kwaliteit voor verschillende snelheid van het netwerk emmers. We hebben bijvoorbeeld gebruik gemaakt van een kwaliteit van 90 voor beelden voor gebruikers geclassificeerd als 4G gebruikers en een kwaliteit van 50 voor onze langzame 2G gebruikers. Vergeet niet dat lagere kwaliteit resulteert in kleinere afmetingen van de foto.

Dit codefragment is als een plugin bedoeld voor gebruik in dienst van de werknemers. Hij onderschept de afbeelding aanvragen die afkomstig zijn van de browser van de gebruiker, detecteert de gebruiker de snelheid van het netwerk, en voegt de nodige parameters aan de URL van de afbeelding. Deze parameters kunnen worden begrepen door de ImageKit server voor het comprimeren van het beeld naar het gewenste niveau en onderhouden van efficiënte client-side caching. Voor netwerk-gebaseerde image optimalisatie, alles wat we hoeven te doen is op te nemen op onze website en gedaan!

Bovendien, in de ImageKit dashboard, kunnen we bepalen de afbeeldings-Url ‘s (of patronen in Url’ s) die niet mogen worden geoptimaliseerd op basis van het type netwerk. Bijvoorbeeld, we zouden willen om dezelfde frisse logo van ons merk-onze gebruikers, ongeacht hun netwerk snelheid.

De controle van de configuratie

Eenmaal goed ingesteld, kunnen wij u snel controleren of het netwerk-gebaseerde optimalisatie is het werken met Tools voor Ontwikkelaars van Chrome. We kunnen emuleren van een traag netwerk op onze browser met behulp van de developer tools. Indien ingesteld, de service werker toevoegen van parameters aan de originele afbeelding aanvraag met vermelding van de snelheid van het netwerk. Deze parameters worden begrepen door ImageKit de servers van de afbeelding comprimeren als per de kwaliteit van de instellingen die zijn opgegeven in onze ImageKit dashboard die overeenkomt met de snelheid van het netwerk.

Hoe werkt caching werken met de service werknemer in de plaats?

ImageKit service werknemer plugin passeert de cache van de browser in het voordeel van netwerk-gebaseerde image cache van de browser. Door het passeren van de cache van de browser betekent dat de dienst de werknemer kan handhaven verschillende caches voor verschillende soorten netwerken en kies de juiste afbeelding uit de cache of een nieuwe aanvragen op basis van het huidige netwerk staat.

De service werknemer plugin maakt automatisch gebruik van de cache-eerste techniek voor het laden van de beelden en legt ook een waterval methode om de juiste keuze uit de cache. Met deze waterval methode worden beelden van een hogere kwaliteit krijgen de voorkeur boven de beelden met een lagere kwaliteit. Wat het betekent is dat als de snelheid daalt tot 2G en hij heeft een bepaald beeld in de cache van de tijd was hij bij het ervaren van een goede download snelheid op een 4G-netwerk, de service werknemer zal gebruik maken van die cache 4G afbeelding voor levering in plaats van het downloaden van de afbeelding over het 2G-netwerk. Maar het omgekeerde is niet geldig. Als de gebruiker ervaart 4G-netwerk snelheden, de service werknemer niet halen van de 2G-afbeelding uit de cache, omdat het mogelijk is om het op te halen voor een betere beeldkwaliteit en de middelen voor.

En er is meer!

Afgezien van een eenvoudig, klaar-voor-gebruik-service worker-plugin en dashboard-instellingen, ImageKit heeft een paar meer dingen aan te bieden die het een aantrekkelijk instrument aan de slag met netwerk-gebaseerde optimalisatie.

Google Analytics

ImageKit ons voorziet van google analytics op onze gebruiker waargenomen type netwerk. Het geeft ons een inzicht in het aantal keer dat netwerk-gebaseerde optimalisatie wordt geactiveerd en doet wat de gebruiker verdeling eruit in de verschillende soorten netwerken. Deze verdeling analyse kan nuttig zijn, zelfs voor het optimaliseren van andere hulpbronnen op onze website.

De kosten van optimalisatie

Met netwerk-gebaseerde image optimalisaties, de grootte van de afbeeldingen gaat naar beneden, maar op hetzelfde moment, het aantal van transformatie verzoeken kan mogelijk omhoog gaan. In tegenstelling tot veel andere real-time beeld optimalisatie van de producten die er zijn, ImageKit de prijsstelling is op basis van alleen de output afbeelding bandbreedte en niets anders. Dus met de gunstige prijsstelling model, de uitvoering van netwerk-gebaseerde image optimalisatie biedt niet alleen veel meer waarde voor onze gebruikers, maar helpt ons ook bezuinigen op de afbeelding levering kosten.

Conclusie

Het verbeteren van de laadprestaties van pagina ‘ s is van essentieel belang. Echter, er is een beetje dat wij al ontbreekt – het optimaliseren van het voor trage netwerken.

Afbeeldingen die aanwezig zijn een gemakkelijke start wanneer het gaat om het optimaliseren van onze website voor de verschillende netwerken. Met de steun van netwerk-gebaseerde optimalisatie functies via service arbeiders, het is moeiteloos te bereiken met ImageKit.

Het zal een grote meerwaarde voor onze gebruikers en zal helpen bij het verbeteren van de gebruikerservaring nog verder, wat een positieve invloed zal hebben op het aantal conversies op onze website.

Meld je nu aan voor ImageKit en ga aan de slag met het nu!