Applicera dessa 6 tekniker för att förbättra mobil laddningshastighet på din företags webbplats

Innehållsförteckning:

Anonim

Även om det utan tvekan finns flera faktorer som påverkar intäkterna, säger de flesta experter att företagssidor laddar inom 5 sekunder tjäna nästan dubbelt så gör de den i 19, den genomsnittliga platsen för laddningstiden.

Studien har vidare visat att sidor som laddas inom 5 sekunder har:

  • 25% högre annonssynlighet,
  • 35% lägre avvisningsfrekvens, och
  • 70% längre användarsessioner.

Det är just därför vi måste fokusera på mobila första lösningar för att hjälpa våra företag att lyckas. Tillsammans har mobilhastigheten aldrig varit viktigare än någonsin.

$config[code] not found

Långsamladdningshastighet kan verkligen vara ett problem

Enligt Google,
  • 1 av 2 personer förväntar sig att en sida ska laddas inom mindre än 2 sekunder.
  • 53% av besöken kommer sannolikt att överges om sidan tar längre tid än 3 sekunder att ladda på en mobilenhet.
  • 46% av personerna har visat missnöje när de väntar på att sidor ska laddas medan de surfar på en mobil enhet.

De tre huvudfaktorerna som saktar ner webbplatser på mobilt internet är antalet serverförfrågningar, filstorlek och sekventiell ordning för sidladdning av element. Så nu har vi markerat orsakerna; låt oss komma till lösningen.

Så här ökar du mobilsideshastigheten

Mät och minimera din serverresponstid

Din mobilsidahastighet är inte bara beroende av din kod utan är också beroende av ett viktigt tekniskt verktyg som heter servern.

Ju längre servraren väntar på att svara på en webbläsarförfrågan, desto långsammare laddar din sida på enheten. De flesta experter på Google rekommenderar att din server börjar sända 1st byte av resurser inom tvåhundra millisekunder av en begäran om ett mer optimalt resultat.

Vanligtvis är det 3 stora metoder som är inblandade i höjningen av din serverkonsvarstid:

  • Förbättra din webbserver konfiguration eller programvara.
  • Förbättra omfattningen och kvaliteten på din hosting-tjänst, särskilt så att du har tillräckligt med minne och CPU-resurser.
  • Minskar antalet resurser som krävs av dina webbsidor.

Använd CSS för att ladda bilder

Om du vill dölja dina innehållsbilder för mobilanvändare, ladda dem som bakgrundsbilder via CSS och använd mediafrågor för att dölja dem villkorligt.

En variation av denna teknik används av Amazon för att villkorligt ladda enhetsspecifika bilder.

Minimera antalet omdirigeringar för att öka din mobilsidshastighet

Omdirigeringar är ingenting annat än instruktioner som automatiskt kan ta webbplats besökare från en sida till en annan.

Varje omdirigering kan äta upp värdefulla millisekunder, vilket resulterar i en långsammare sidladdning. Detta är särskilt problematiskt för mobila enheter eftersom de ofta är beroende av opålitliga nätverk än skrivbordsbrukare.

Det första steget att lösa problemet är att undersöka antalet omdirigeringar på din webbplats genom att använda verktyg som omdirigeringsmapp. Om siffran är för stor, minimera den, eller lägg den till noll för att få det bästa resultatet.

Minifiera JS och CSS-filer

Mer data betyder överskridande sidvikt. Detta kommer att ta dina sidor längre att ladda på en mobilenhet.

Det är anledningen till att de flesta webbutvecklare som är värda deras mettle vet att det är nödvändigt att optimera och minimera tillgångar för att öka sidans lasthastighet.

"Minifiering" eliminerar redundans utan att påverka visning av en sida. Ett brett utbud av Google-verktyg kan hjälpa dig att eliminera sådana uppsägningar, inklusive sådana som:

  • CSSNano (för CSS)
  • UglifyJS (för JS)

Istället för bilder, använd CSS3

Drop skuggor, rundade hörn och gradient fyllningar - alla dessa funktioner kan göras genom CSS, istället för bilder.

Detta kan i hög grad bidra till att minska antalet HTTP-förfrågningar på så sätt, samtidigt som laddningstiden påskyndas samtidigt.

Använd Inline SVGs istället för JPEG

Liksom data URI kan SVG (skalbar vektorgrafik) inbäddas på en sida för att minska antalet

Dessa filer kan skapas på en vektorgrafikredigerare som Inkscape, Adobe Illustrator etc. När det är skapat kan du öppna det i en textredigerare och släppa den i din kod.

Obs! Om du vill bädda in ett SVG i ditt stilark måste du konvertera det till data URI först och fortsätt sedan till nästa steg.

Så att mer eller mindre summerar saker upp. Hoppas du hade en bra och upplysande läsning.

Foto via Shutterstock

1