Att optimera Bilder för Användare med Långsam nätverksanslutning Hastigheter

0
12

För varje webbplats, sidan laddas tid är en kritisk faktor som kan göra eller bryta verksamheten. Tack vare bättre användarupplevelse som kommer med en snabb lastning webbsida, de som fokuserar på att ladda sidan optimering njuta av bättre konvertering priser, bättre SEO, bättre bevarande och lägre avvisningsfrekvens.

Och detta faktum har uppmärksammats i flera studier. Till exempel, enligt en av studierna, 47% av konsumenterna förväntar sig att en web-sida för att läsa i 2 sekunder eller mindre. Inte konstigt att utvecklare över hela världen fokuserar mycket på att förbättra webbsidan tid att ladda.

Logik dikterar att hålla andra faktorer lika, en enklare webbsida ska laddas snabbare än en tyngre webbsida, och det är den riktning som våra webbsidor bör huvud också. Men i motsats till detta synsätt, våra webbplatser har blivit tyngre under åren. En titt på data från HTTP Arkiv visar att en genomsnittlig webbsida 2017 var nästan tre gånger tyngre än vad det brukade vara under 2011.

Med mer kraftfulla enheter användaren, snabbare nät, och den växande populariteten för klientsidan ramar och media-rika erfarenheter, vi har börjat trycka mer och mer data till användarens enhet.

Men, som utvecklare, vi missar en viktig punkt. Vi brukar utveckla och testa våra webbplatser i våra kontor över stabil Wi-fi eller fast anslutning. Men när en riktig användare använder vår webbplats, nätverkets hastighet och stabilitet kanske inte vara så bra. Speciellt med fler och fler användare kommer online via mobila enheter, problemet med varierande förhållandena i nätverket är ännu större.

Tror inte det? ImageKit.io genomfört en studie för att ta reda på nätverkets hastighet rapporteras av Nätverket Info API av webbläsaren Chrome för olika användare av en webbplats (med besökare främst från Indien). Det är inte särskilt förvånande att nästan 40% av besökare spåras hade rapporterat hastighet lägre än 4G, dvs, mindre än 700 Kbit / s per Nätverket Info API Spec.

Medan denna andel av användarna har dålig villkor nätverk kan vara lägre om vi får besökare från utvecklade länder som USA eller i Europa, kan vi ändå anta att olika villkor nätverk inverkan en betydande del av våra användare. Och vi har alla upplevt det också. När vi går in i en hiss eller flytta till källaren parkeringen av en byggnad eller en resa till en avlägsen plats, mobil data, ladda ner hastigheterna sjunker avsevärt.

Därför måste vi hålla i minnet att våra användare, i synnerhet de på mobil, kommer alltid att försöka att besöka vår webbplats på ett långsamt nätverk, och vårt mål som utvecklare bör vara att ge dem åtminstone en anständig webbupplevelse.

Varför optimera bilder för långsamma nätverk?

Det yttersta målet med att optimera en webbplats för långsamma nätverk är att kunna tjäna sitt ljus variant. På detta sätt, alla väsentliga saker får laddas ner och visas snabbt på användarens enhet.

Bland alla de resurser som läses in på en webbsida, bilder utgör för de flesta av nyttolast. Och även om vi inte tar hand om att optimera bilderna i övrigt, optimera dem ytterligare för långsamma nätverk kan minska den totala sida vikt med nästan 30%.

Också, ytterligare komprimering av bilder inte bryta den kritiska funktioner i ett program. Ja, bildkvaliteten sjunker en bit för att ge en bättre användarupplevelse. Men till skillnad från strippa bort Javascript, vilket skulle kräva en hel del tanke, att komprimera bilder är relativt enkelt.

Hur att optimera bilder för ett långsamt nätverk?

Nu när vi har konstaterat att optimera vår webbsida baserat på användarens nätverk hastighet är viktigt och att bilder är de lägst hängande frukter för att komma igång, låt oss titta på hur vi kan uppnå nät-baserad bild-optimering.

Det finns två delar av lösningen.

Avgöra användarens nätverk hastighet

Vi måste ta reda på nätverkets hastighet som användaren upplever dem och dela dem i hinkar. Till exempel, användarna upplever hastigheten överstiger ett visst tröskelvärde ska klassificeras i en enda grupp och serveras en särskild kvalitet av en bild. Denna klassificering är enkel i modern webbläsare med Network Information API. Detta API automatiskt klassificerar användare i fyra hinkar – 4G, 3G, 2G, och sakta 2G, 4G är den snabbaste och långsam 2G vara den långsammaste.

// returnerar ‘4g’, ‘3g’, ‘2g” eller “slow-2g’
var effectiveType = NetworkInformation.effectiveType;
Komprimera bilder till en lämplig kvalitetsnivå

Den andra delen av lösningen är för att kunna ändra kompressionsgraden av en bild i realtid, beroende på användarens nät hastighet som bestäms i steg 1. Det bör vara så enkelt som att en ytterligare parameter i URL bild när webbläsaren utlöser en belastning för det.

Medan vi bygger på webbläsaren för att avgöra användarens nätverk hastighet, ett verktyg som ImageKit.io gör i realtid komprimering lite enkelt.

ImageKit.io är ett real-time bild optimering och omvandling produkt som hjälper oss att leverera bilder i rätt format, ändra kompression nivåer, ändra storlek på, beskära och omvandla bilder direkt från URL: en och leverera dessa bilder via en global bild CDN. Vi kan få bilden med önskad kompression nivå genom att bara passerar bildkvalitet parameter i URL: en. Kvalitet är direkt proportionell mot bildens storlek, dvs. högre kvalitet numret större blir den resulterande bilden.

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

// ImageKit URL med kvalitet 50
https://ik.imagekit.io/demo/default-image.jpg?tr=q-50

Hur ska man annars inte ImageKit hjälpa till med nät-baserad bild optimering?

Medan ImageKit har alltid stöttat realtid URL-baserad image quality ändring, det har börjat stödja nätverk-baserad bild optimering har nyligen. Med dessa nya funktioner, har det blivit enkelt att genomföra kompletta nätverksbaserade optimering med minsta möjliga ansträngning.

Naturligtvis, för det första, vi måste registrera dig för att ImageKit och börja leverera bilder på vår hemsida genom det. När detta är gjort, i ImageKit instrumentpanelen, vi har för att aktivera den inställning för nät-baserade bildoptimering. Vi får en kod snutt just det som och lägga till den i en befintlig service arbetstagare på vår hemsida eller till en ny tjänst som arbetare.

// Att lägga till kodavsnittet i en tjänst arbetstagare
importScripts(“https://runtime.imagekit.io/<your_imagekit_id>/v1/js/network-baserat-adaption.js?v i=” + new Date().getTime());

I översikten sig själv, vi måste också ange önskad kvalitetsnivå för olika nätverk hastighet hinkar. Till exempel har vi använt en kvalitet av 90 för bilder för användare som klassificeras som 4G-användare och en kvalitet av 50 för vår långsamma 2G användare. Kom ihåg att lägre kvalitet resulterar i mindre bildstorlekar.

Denna kod snutten är som en plugin avsedd för användning i tjänsten av arbetstagare. Det fångar bilden önskemål som härrör från användarens webbläsare, känner av användarens nätverk hastighet, och ger den nödvändiga parametrar till WEBBADRESSEN för bilden. Dessa parametrar kan förstås av ImageKit server för att komprimera bilden till önskad nivå och upprätthålla en effektiv cachelagring på klientsidan. För nät-baserade bildoptimering, allt vi behöver göra är att inkludera det på vår hemsida och gjort!

Dessutom, i ImageKit instrumentpanelen, vi kan ange bildens Url-adresser (eller mönster i Url: er) som inte bör optimeras baserat på nätverkstypen. Till exempel skulle vi vilja presentera samma skarpa logotyp av vårt varumärke till våra användare oberoende av deras nätverk hastighet.

Kontrollera inställningar

En gång ställa upp på rätt sätt, vi kan snabbt kontrollera om nätverket optimering är att arbeta som använder Chrome Developer Tools. Vi kan emulera en långsam nätverk på våra webbläsaren att använda developer-verktyg. Om rätt inställd, service-och sjukvårdspersonalen bör lägga till några parametrar till den ursprungliga bilden begäran ange det aktuella nätverkets hastighet. Dessa parametrar är förstås av ImageKit servrar för att komprimera bilden enligt de inställningar som anges i våra ImageKit instrumentpanelen som motsvarar nätverkets hastighet.

Hur fungerar cachning fungerar med tjänsten som arbetstagaren i stället?

ImageKit service arbetstagare plugin by-pass webbläsarens cache till förmån för nät-baserad bild cache i webbläsaren. Förbi webbläsarens cache innebär att den tjänst som arbetstagaren kan upprätthålla olika cacher för olika nätverk typer och välja rätt bild från cachen eller begär ett nytt baserat på användarens aktuella nätverkets tillstånd.

Tjänsten arbetstagare plugin automatiskt använder cache-första tekniken för att ladda bilderna och genomför även ett vattenfall metod att välja rätt från cachen. Med detta vattenfall metod, bilder med högre kvalitet får företräde över bilder på en lägre kvalitet. Vad det betyder är att om användarens hastighet sjunker till 2G och han har en viss bild cachelagrade från den tid då han upplevde bra nedladdningshastighet på en 4G-nät, den tjänst som arbetstagaren kommer att använda den cachade 4G bilden för leverans istället för att ladda ner bilden över 2G-nätet. Men det omvända är inte giltigt. Om användaren upplever 4G-nätet hastighet, den tjänst som arbetstagaren kommer inte att plocka upp 2G bild från cachen, eftersom det är möjligt att hämta en bättre kvalitet på bild och resurser tillåter det.

Och det finns mer!

Bortsett från en enkel, färdig att använda tjänsten arbetstagare plugin och instrumentpanelen inställningar, ImageKit har några fler saker att erbjuda som gör det till ett attraktivt verktyg för att komma igång med nät-optimering.

Analytics

ImageKit ger oss analytics på våra användares observerade nätverk typ. Det ger oss en inblick i antal gånger nätverk-optimering blir utlöst och vad gör användaren fördelningen ser ut mellan olika nätverk typer. Denna fördelning analys kan vara till hjälp även för att optimera andra resurser på vår hemsida.

Kostnaden för optimering

Med nät-baserad bild optimeringar, storleken på bilderna går ner, men samtidigt har antalet omvandling önskemål kan eventuellt gå upp. Till skillnad från många andra i realtid bild-optimering produkter där ute, ImageKit prissättning bygger enbart på bild, bandbredd och inget annat. Så med fördelaktig prissättning, genomföra nätbaserade bild optimering ger inte bara en mycket mer värde till våra användare, men också hjälper oss att skära ner på bilden för leverans kostnader.

Slutsats

Förbättra sidan ladda prestanda är viktigt. Men det är en bit som vi har alla saknat – att optimera det för långsamt nätverk.

Bilder presentera en lätt start när det gäller att optimera hela vår webbplats för olika nätverk. Med stöd av nätverksbaserade funktioner optimering via tjänsten arbetstagare, har det blivit enkelt att uppnå det med ImageKit.

Det kommer att bli ett stort värde lägg till för våra användare och kommer att bidra till att förbättra användarupplevelsen ännu mer, vilket kommer att ha en positiv inverkan på omvandlingar på vår hemsida.

Registrera dig nu för ImageKit och komma igång med det nu!