Primijenite ovih 6 tehnika kako biste poboljšali brzinu učitavanja mobilnih uređaja na svom poslovnom mjestu

Sadržaj:

Anonim

Iako postoji nesumnjivo nekoliko čimbenika koji utječu na prihode, većina stručnjaka kaže da se učitavanje poslovnih web-mjesta u roku od 5 sekundi gotovo dvostruko povećava za 19, što je prosječno vrijeme učitavanja stranica.

Studija je nadalje otkrila da mjesta koja se učitavaju u roku od 5 sekundi imaju:

  • Vidljivost oglasa za 25%,
  • 35% niža stopa odustajanja i
  • 70% dulje sesije korisnika.

Upravo zato moramo biti usredotočeni na mobilna rješenja koja će našim tvrtkama pomoći da uspiju. Uostalom, mobilna brzina nikada nije bila važnija.

$config[code] not found

Spora brzina učitavanja može biti problem

Prema Googleu,
  • 1 od 2 osobe očekuje da se stranica učita u manje od 2 sekunde.
  • Vjerojatnije je da će 53% posjeta biti napušteno ako se stranica učita na mobilnom uređaju dulje od 3 sekunde.
  • 46% ljudi pokazalo je nezadovoljstvo čekanjem na učitavanje stranica tijekom pregledavanja weba na mobilnom uređaju.

Tri glavna faktora koja usporavaju stranice na mobilnom internetu su broj zahtjeva poslužitelja, veličina datoteke i redoslijed redoslijeda elemenata učitavanja stranica. Tako smo sada istaknuli uzroke; idemo do rješenja.

Kako povećati Mobile Site Speed

Izmjerite i smanjite vrijeme odziva poslužitelja

Brzina vaše mobilne stranice ne ovisi samo o vašem kodu, već se oslanja i na važan tehnički alat nazvan poslužitelj.

Što duže vaš poslužitelj čeka da odgovori na zahtjev preglednika, sporije se učitava stranica na uređaju. Većina stručnjaka u Googleu preporučuje da vaš poslužitelj počne prenositi 1st bajt resursa unutar dvjesto milisekundi zahtjeva za optimalnijim rezultatom.

Tipično, postoje 3 glavne metode uključene u podizanje vremena odgovora vašeg poslužitelja:

  • Poboljšanje konfiguracije web-poslužitelja ili softvera.
  • Poboljšanje opsega i kvalitete usluge hostinga, osobito osiguravanje odgovarajućih resursa memorije i CPU-a.
  • Smanjenje broja resursa koje zahtijevaju vaše web stranice.

Koristite CSS za učitavanje slika

Ako želite sakriti slike sadržaja za mobilne korisnike, učitajte ih kao pozadinske slike putem CSS-a i upotrijebite upite medija kako biste ih uvjetno sakrili.

Amazon koristi varijaciju ove tehnike za uvjetno učitavanje slika specifičnih za uređaj.

Smanjite broj preusmjeravanja kako biste povećali brzinu mobilne stranice

Preusmjeravanja nisu ništa drugo do upute koje mogu automatski odvesti posjetitelje s jedne stranice na drugu.

Svako preusmjeravanje može pojesti vrijedne milisekunde, što rezultira sporijim učitavanjem stranice. To je posebno problematično za mobilne uređaje jer često ovise o nepouzdanim mrežama od korisnika stolnih računala.

Prvi korak u rješavanju ovog problema jest pregled broja preusmjeravanja na web-lokaciji pomoću alata kao što je mapa za preusmjeravanje. Ako je broj prevelik, minimalizirajte ga ili ga idealno dovedite do nule kako biste dobili najbolje rezultate.

Smanjite JS i CSS datoteke

Više podataka znači prekomjernu težinu stranice. Tako će se vaše stranice duže učitavati na mobilnom uređaju.

To je razlog zašto većina web programera vrijedi svoje sposobnosti znaju potrebu za optimiziranje i minimiziranje imovine kako bi povećali brzinu učitavanja stranice.

“Minification” eliminira redundanciju bez utjecaja na prikaz stranice. Širok raspon Googleovih alata može vam pomoći u uklanjanju takvih viškova, uključujući one poput:

  • CSSNano (za CSS)
  • UglifyJS (za JS)

Umjesto slika, koristite CSS3

Drop sjene, zaobljeni kutovi i gradijent ispunjava - sve ove značajke mogu biti učinjeno putem CSS, umjesto slika.

To uvelike može pomoći u smanjenju broja HTTP zahtjeva, čime se ubrzava vrijeme učitavanja u isto vrijeme.

Koristite ugrađene SVG-ove umjesto JPEG-ova

Poput URI-a podataka, SVG-ovi (skalabilna vektorska grafika) mogu biti ugrađeni na stranicu kako bi se smanjio broj HTTP zahtjeva.

Te se datoteke mogu kreirati u uređivaču vektorske grafike, kao što su Inkscape, Adobe Illustrator, itd. Nakon što ga kreirate, možete ga otvoriti u uređivaču teksta i ispustiti u svoj kod.

Napomena: da biste ugradili SVG u svoj stilski list, prvo ga morate pretvoriti u URI podataka, a zatim prijeći na sljedeći korak.

Tako da manje-više sumiramo stvari. Nadam se da ste imali dobro i prosvjetljujuće čitanje.

Fotografija putem Shutterstocka

1