Anvend disse 6 teknikker til forbedring af mobilindlæsningshastigheden på din virksomhedsside

Indholdsfortegnelse:

Anonim

Selvom der utvivlsomt er flere faktorer, der påvirker indtægterne, siger de fleste eksperter, at virksomheder, der indlæser inden for 5 sekunder, tjener næsten dobbelt, der gør det i 19, den gennemsnitlige site-ladetid.

Undersøgelsen har yderligere fundet ud af, at steder, der indlæses inden for 5 sekunder, har:

  • 25% højere annoncesynlighed
  • 35% lavere afvisningsrate, og
  • 70% længere bruger sessioner.

Det er netop derfor, at vi skal fokusere på mobile første løsninger for at hjælpe vores virksomheder med at lykkes. Tross alt har mobil hastighed aldrig været vigtigere.

$config[code] not found

Langsom indlæsningshastighed kan virkelig være et problem

Ifølge Google,
  • 1 ud af 2 personer forventer, at en side skal indlæses inden for mindre end 2 sekunder.
  • 53% af besøgene er mere tilbøjelige til at blive forladt, hvis siden tager længere tid end 3 sekunder at indlæse på en mobilenhed.
  • 46% af mennesker har vist utilfredshed ved at vente på sider, der skal indlæses, mens du surfer på internettet på en mobil enhed.

De 3 hovedfaktorer, der nedsætter websteder på mobilinternet, er antallet af serverforespørgsler, filstørrelser og den rækkefølge, hvor siderne indlæses. Så nu har vi fremhævet årsagerne; lad os komme til løsningen.

Sådan øges mobilwebstedets hastighed

Mål og minimer din serverrespons tid

Din mobilsidehastighed afhænger ikke kun af din kode, men afhænger også af et vigtigt tech-værktøj kaldet serveren.

Jo længere serveren venter på at reagere på en browserforespørgsel, jo langsommere er din side indlæst på enheden. De fleste eksperter hos Google anbefaler, at din server begynder at sende 1st byte af ressourcer inden for to hundrede millisekunder af en anmodning om et mere optimalt resultat.

Der er typisk 3 store metoder involveret i forhøjelsen af ​​din server responstid:

  • Forbedre din webserver konfiguration eller software.
  • Forbedre omfanget og kvaliteten af ​​din hosting service, især at sikre, at du har tilstrækkelig hukommelse og CPU ressourcer.
  • Reducere antallet af ressourcer, der kræves af dine websider.

Brug CSS til at indlæse billeder

Hvis du vil skjule dine indholdsbilleder til mobile brugere, skal du indlæse dem som baggrundsbilleder via CSS og bruge medieforespørgsler til at skjule dem betinget.

En variation af denne teknik bruges af Amazon til betinget at indlæse enhedsspecifikke billeder.

Minimer antallet af omdirigeringer for at øge din mobil sidehastighed

Omdirigeringer er intet, men instruktioner, der automatisk kan tage besøgende på hjemmesiden fra den ene side til den anden.

Hver omdirigering kan spise værdifulde millisekunder, hvilket resulterer i en langsommere sidebelastning. Dette er særlig problematisk for mobile enheder, fordi de ofte er afhængige af upålidelige netværk end desktopbrugere.

Det første skridt til at løse dette problem er at undersøge antallet af omdirigeringer på dit websted ved hjælp af værktøjer som omdirigeringsmapper. Hvis nummeret er for stort, skal du minimere det, eller ideelt set bringe det nede for at få de bedste resultater.

Miniver JS og CSS filer

Flere data betyder overskydende sidevægt. Dette vil tage dine sider længere at indlæse på en mobilenhed.

Det er derfor, at de fleste webudviklere, der er værd for deres mettle, ved, at det er nødvendigt at optimere og minimere aktiver for at øge sidens indlæsningshastighed.

"Minificering" eliminerer redundans uden at påvirke visning af en side. Et bredt udvalg af Google-værktøjer kan hjælpe dig med at eliminere sådanne afskedigelser, herunder likeså af:

  • CSSNano (til CSS)
  • UglifyJS (for JS)

I stedet for billeder, brug CSS3

Drop skygger, afrundede hjørner og gradientfyldninger - alle disse funktioner kan gøres gennem CSS, i stedet for billeder.

Dette kan i høj grad medvirke til at reducere antallet af HTTP-anmodninger og dermed fremskynde læsetiden på et og samme tidspunkt.

Brug Inline SVG'er i stedet for JPEG'er

Ligesom data URI'er kan SVG'er (skalerbar vektorgrafik) indlejres på en side for at reducere antallet af

Disse filer kan oprettes på en vektor grafik editor som Inkscape, Adobe Illustrator osv. Når den er oprettet, kan du åbne den i en teksteditor og slippe den i din kode.

Bemærk: Hvis du vil indlejre et SVG i stilarket, skal du konvertere det til data URI først og derefter fortsætte til næste trin.

Så det summerer mere eller mindre ting op. Håber du havde en god og oplysende læsning.

Foto via Shutterstock

1