Optimalisere Bilder for Brukere med Treg internett-Hastigheter

0
6

For hver nettside, side legg i tid er en kritisk faktor som kan gjøre eller bryte virksomhet. Takket være bedre brukeropplevelse som kommer med en rask lasting webside, de som fokuserer på siden legg optimalisering nyte bedre konvertering priser, bedre SEO, bedre oppbevaring, og lavere avvisningsfrekvens.

Og dette faktum har vært fremhevet i flere studier. For eksempel, i henhold til en av studier, 47% av forbrukerne forventer en web-side for å laste inn i 2 sekunder eller mindre. Ikke rart at utviklere over hele verden fokusere mye på å forbedre webside lastetiden.

Logikk tilsier at det å holde andre faktorer samme, en lettere nettsiden skal lastes inn raskere enn en tyngre nettside, og som er den retningen som våre nettsider bør hodet også. Imidlertid, i motsetning til at logikk, våre nettsteder har blitt tyngre med årene. En titt på data fra HTTP Arkiv viser at det i gjennomsnitt nettside i 2017 var nesten tre ganger tyngre enn hva det pleide å være i 2011.

Med kraftigere bruker enheter, raskere nettverk, og den økende populariteten av klient-side-rammer og media-rike opplevelser, vi har begynt å skyve mer og mer data til brukerens enhet.

Men, som utviklere, vi savner et avgjørende punkt. Vi vanligvis utvikle og teste våre nettsider i våre kontorer over stabil WiFi eller kablet tilkobling. Imidlertid, når en real-brukerne bruker vår webside, nettverk, hastighet og stabilitet kan ikke være så stor. Spesielt med flere og flere brukere som kommer på nettet via mobile enheter, problemet med varierende nettverk forholdene er enda mer betydelig.

Tror du ikke på det? ImageKit.io gjennomført en studie for å finne ut nettverket hastighet rapportert av Nettverket Info API av Chrome-nettleseren for brukere av et nettsted (med besøkende hovedsakelig fra India). Det er ikke veldig overraskende at nesten 40% av de besøkende spores hadde rapportert hastighet lavere enn 4G, dvs., mindre enn 700 Kbps per Network Info API Spec.

Mens denne andelen brukere som opplever dårlige nettverksforhold kan være lavere hvis vi får besøkende fra de utviklede land som USA eller de i Europa, kan vi trygt anta at varierende nettverk forhold som påvirker en betydelig del av våre brukere. Og vi har alle opplevd det som godt. Når vi går inn i en heis eller gå til kjeller parkering av en bygning eller reise til en ekstern plassering, den mobile data nedlasting hastigheter faller betydelig.

Derfor trenger vi å holde i tankene at våre brukere, spesielt de som er på mobil, vil alltid prøve å besøke vår hjemmeside på et tregt nettverk, og vårt mål som utvikler bør være å gi dem med minst en anstendig surfe-opplevelse.

Hvorfor optimalisere bilder for treg nettverk?

Det endelige målet med å optimalisere et nettsted for tregere nettverk er å være i stand til å betjene sine lettere variant. På denne måten, alle de essensielle ting blir lastes ned og vises raskt på brukerens enhet.

Blant alle de ressurser som lastes inn på en nettside, bilder gjøre opp for de fleste av nyttelast. Og selv om vi må ta vare på optimalisering av bilder generelt, og optimalisere dem videre for tregere nettverk kan redusere den samlede side vekt med nesten 30%.

Også, ekstra kompresjon av bilder ikke bryte kritisk funksjonalitet av alle program. Ja, bildekvaliteten faller litt for å sørge for en bedre brukeropplevelse. Men i motsetning til stripping bort Javascript, noe som vil kreve mye av tanke, komprimere bildene er relativt enkel.

Hvordan å optimalisere bilder for et tregt nettverk?

Nå som vi har etablert at optimalisere vår nettside basert på brukerens nettverk hastighet er viktig, og at bildene er de lavest hengende frukt for å komme i gang, la oss se på hvordan vi kan oppnå nettverk-basert bilde optimalisering.

Det er to deler av løsningen.

Bestemme brukerens nettverk hastighet

Vi trenger å finne ut nettverkshastigheten at brukeren opplever, og deler dem inn i bøtter. For eksempel, brukere opplever fart over en viss terskel bør være klassifisert i en enkel gruppe, og servert en bestemt kvalitet nivå av et bilde. Denne klassifiseringen er enkel i moderne nettlesere med Nettverket Informasjon API. Dette API-et automatisk klassifiserer brukere i fire bøtter – 4G, 3G, 2G, og sakte 2G, med 4G blir den raskeste og treg 2G å være den tregeste.

// returnerer ‘4g’, ‘3g’, ‘2’ eller ‘slow-2g’
var effectiveType = NetworkInformation.effectiveType;
Komprimere bilder til et passende nivå

Den andre delen av løsningen er å bli i stand til å endre komprimering nivå av et bilde i real-time, avhengig av brukerens nettverk fart som er bestemt i trinn 1. Det bør være så enkelt som å ha passert en ekstra parameter i bildet URL når nettleseren utløser en belastning for det.

Mens vi stole på nettleseren til å bestemme brukerens nettverk speed, et verktøy som ImageKit.io gjør den real-time compression litt enkel.

ImageKit.io er et ekte bilde optimalisering og transformasjon produkt som hjelper oss med å levere bilder i riktig format, endre komprimering nivåer, endre størrelse, beskjære, og forvandle bilder direkte fra URL-adresse, og levere disse bildene via et globalt bilde CDN. Vi kan få bilde med ønsket komprimering nivå av bare passerer bildekvalitet parameter i URL-en. Kvalitet er direkte proporsjonal til biletet, dvs., høyere kvalitet, antall, større vil være den resulterende bildet.

// 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

Hvordan andre gjør ImageKit hjelpe med nett-basert bilde optimalisering?

Mens ImageKit har alltid støttet real-time URL-basert bildekvalitet endring, det har begynt å støtte nettverk-basert bilde optimalisering funksjoner nylig. Med disse nye funksjonene, har det blitt enkelt å implementere komplett nettverk-basert optimalisering med minimal innsats.

Selvfølgelig, for det første, vi trenger å registrere deg for ImageKit og begynne å levere bilder på vår nettside gjennom det. Når dette er gjort, i ImageKit dashboard, vi må aktivere innstillingen for nettverket-basert bilde optimalisering. Vi får en kodebit akkurat der det og legge det til i en eksisterende tjeneste medarbeider på vårt nettsted eller en ny tjeneste arbeidstaker.

// Legger til kodebiten i en tjeneste arbeidstaker
importScripts(“https://runtime.imagekit.io/<your_imagekit_id>/v1/js/nettverk-basert-tilpasning.js?v=” + new Date().getTime());

I oversikten seg selv, vi må også spesifisere ønsket kvalitet for forskjellige nettverk hastighet bøtter. For eksempel har vi brukt en kvalitet av 90 for bilder for brukere klassifisert som 4G-brukere, og en kvalitet på 50 for våre treg 2G brukere. Husk at lavere kvalitet resultater i mindre størrelser.

Denne kodebiten er som en plugin som er ment for bruk i service-arbeidere. Det avskjærer bildet forespørsler som stammer fra brukerens nettleser, oppdager brukerens nettverk hastighet, og gir de nødvendige parameterne til bilde-URL. Disse parametrene kan bli forstått av ImageKit server til å komprimere bildet til ønsket nivå og opprettholde effektive klient-side-caching. For network-basert bilde optimalisering, alt vi trenger å gjøre er å ta den med på våre nettsider og gjort!

I tillegg, i ImageKit dashboard, kan vi angi bildet Nettadresser (eller mønstre i url-adresser) som ikke skal være optimalisert basert på type nettverk. For eksempel, ville vi ønsker å presentere den samme skarpe logoen vår helt til våre brukere, uavhengig av deres nettverk hastighet.

Kontrollere oppsett

Når det er satt opp riktig, kan vi raskt se om nettverk-basert optimalisering fungerer med Chrome utviklerverktøy. Vi kan etterligne et tregt nettverk på nettleseren ved hjelp av verktøy for utviklere. Hvis det er satt opp riktig, service arbeidstaker bør legge til noen parametre til det opprinnelige bildet forespørsel indikerer den nåværende nettverk hastighet. Disse parametrene er forstått av ImageKit servere for å komprimere bildet som per kvalitet innstillinger som er angitt i vår ImageKit dashboard som svarer til det nettverket hastighet.

Hvordan fungerer caching arbeid med service arbeidstaker i stedet?

ImageKit service arbeidstaker plugin by-pass nettleserens cache i favør av nettverk-basert bilde-hurtigbufferen i nettleseren. Ved bestått nettleser cache betyr at tjenesten arbeidstaker kan opprettholde ulike cacher for ulike typer nettverk og velg riktig bilde fra hurtigbufferen eller be om en ny basert på brukerens nåværende nettverk tilstand.

Tjenesten arbeidstaker plugin automatisk bruker cache-første teknikken for å laste inn bilder, og også implementerer en foss metode for å plukke den rette fra hurtigbufferen. Med denne fossen metode, bilder med høyere kvalitet får prioritet over bilder til en lavere kvalitet. Hva det betyr er at hvis brukeren er hastigheten synker til 2G, og han har et bestemt bilde bufret fra den tiden da han ble opplever god nedlastingshastighet på en 4G-nettverk, service arbeidstaker vil bruke bufret 4G bildet for levering i stedet for å laste ned bildet over 2G-nettverk. Men det motsatte er ikke gyldig. Hvis brukeren opplever 4G nettverk hastigheter, service arbeidstaker ikke vil plukke opp 2G bilde fra bufferen, fordi det er mulig å hente en bedre bildekvalitet og ressursene tillater det.

Og det er mer!

Bortsett fra en enkel, klar-til-bruk-service arbeidstaker plugin og dashboard innstillinger, ImageKit har noen flere ting å tilby som gjør det til et attraktivt verktøy for å komme i gang med nettverk-basert optimalisering.

Analytics

ImageKit gir oss analytics på våre brukerens observert type nettverk. Det gir oss et innblikk i det antall ganger nettverk-basert optimalisering blir utløst og hva gjør brukeren distribusjon se ut som på tvers av ulike typer nettverk. Denne fordelingen analyse kan være nyttig selv for å optimalisere andre ressurser på våre nettsider.

Kostnaden for optimalisering

Med nett-basert bilde optimaliseringer, størrelsen på bildene går ned, men på samme tid, antall transformasjon forespørsler kan potensielt gå opp. I motsetning til mange andre real-time bildet optimalisering av produkter der ute, ImageKit prissetting er basert kun på output bilde båndbredde og ingenting annet. Så med den gunstige priser modell, implementering av nettverksbasert bilde optimalisering gir ikke bare en mye mer verdi til våre brukere, men hjelper oss også med å kutte ned på bildet for levering kostnader.

Konklusjon

Forbedre side legg ytelse er viktig. Men, det er en bit som vi har alle vært savnet – optimalisere det for tregt nettverk.

Bilder presentere en enkel start når det kommer til å optimalisere hele nettstedet for forskjellige nettverk. Med støtte for nettverk basert optimalisering funksjoner via tjenesten arbeidere, har det blitt enkelt å få det til med ImageKit.

Det vil være en stor verdi til våre brukere, og vil bidra til å forbedre brukeropplevelsen ytterligere, noe som vil ha en positiv effekt på antall konverteringer på nettstedet vårt.

Registrer deg nå for ImageKit og komme i gang med det nå!