Použite tieto 6 techník na zlepšenie rýchlosti načítania mobilných zariadení vašej firmy

Obsah:

Anonim

Zatiaľ čo tam je nepochybne niekoľko faktorov ovplyvňujúcich výnosy, väčšina odborníkov tvrdí, že obchodné stránky načítanie do 5 sekúnd zarobiť takmer dvojnásobok, že robí to v 19, priemerný čas načítania stránok.

Štúdia ďalej zistila, že miesta načítania do 5 sekúnd majú:

  • 25% vyššia viditeľnosť reklamy,
  • O 35% nižšiu mieru odchodov a
  • 70% dlhších používateľských relácií.

Práve preto sa musíme sústrediť na prvé mobilné riešenia, ktoré pomôžu našim podnikom uspieť. Koniec koncov, mobilná rýchlosť nebola nikdy dôležitejšia.

$config[code] not found

Rýchlosť pomalého načítania môže byť problémom

Podľa Google,
  • 1 z 2 ľudí očakáva, že sa stránka načíta počas menej ako 2 sekúnd.
  • 53% návštev je pravdepodobnejšie opustených, ak stránka trvá dlhšie ako 3 sekundy na načítanie na mobilnom zariadení.
  • 46% ľudí vyjadrilo nespokojnosť s čakaním na načítanie stránok počas prehliadania webu na mobilnom zariadení.

Tri hlavné faktory spomaľujúce stránky na mobilnom internete sú počet serverových požiadaviek, veľkosť súboru a postupné poradie načítania stránok. Teraz sme zdôraznili príčiny; dostať sa k riešeniu.

Ako zvýšiť rýchlosť mobilného webu

Merajte a minimalizujte čas na odpoveď na server

Rýchlosť vašej mobilnej stránky závisí nielen od vášho kódu, ale závisí tiež od dôležitého technického nástroja, ktorý sa nazýva server.

Čím dlhší čas váš server čaká na odpoveď na požiadavku prehliadača, tým pomalšie bude vaša stránka načítať zariadenie. Väčšina odborníkov spoločnosti Google odporúča, aby váš server začal vysielať 1st bajt zdrojov v priebehu 200 sekúnd žiadosti o optimálnejší výsledok.

Väčšinou existujú 3 hlavné metódy zvyšovania vášho času odozvy na server:

  • Zlepšenie konfigurácie webového servera alebo softvéru.
  • Zlepšenie rozsahu a kvality vašej hosťovskej služby, najmä zabezpečením primeranej pamäte a zdrojov CPU.
  • Zníženie počtu zdrojov požadovaných vašimi webovými stránkami.

Na načítanie obrázkov použite CSS

Ak chcete skryť obsahové obrázky pre mobilných používateľov, načítajte ich ako obrázky na pozadí pomocou služby CSS a použite mediálne dopyty, aby ste ich skryli.

Variant tejto techniky používa spoločnosť Amazon na podmienené načítanie snímok špecifických pre zariadenie.

Minimalizujte počet presmerovaní na zvýšenie rýchlosti mobilnej stránky

Presmerovania nie sú ničím iným než inštrukciami, ktoré dokážu automaticky vziať návštevníkov webových stránok z jednej strany do druhej.

Každé presmerovanie môže vyčerpať cenné milisekundy, čo vedie k pomalšiemu načítaniu stránky. Toto je obzvlášť problematické pre mobilné zariadenia, pretože často závisia od nespoľahlivých sietí ako používateľov počítačov.

Prvým krokom k odstráneniu tohto problému je zistiť počet presmerovaní na vašich stránkach pomocou nástrojov, ako je redirect mapper. Ak je číslo príliš veľké, minimalizujte ho alebo v ideálnom prípade ho znížte na nulu, aby ste dosiahli najlepšie výsledky.

Zmenšiť súbory JS a CSS

Viac údajov znamená nadmernú hmotnosť stránky. Toto bude trvať dlhšie na načítanie stránok na mobilnom zariadení.

To je dôvod, prečo väčšina webových vývojárov, ktorí si zaslúžia svoju vernosť, vedia, že je potrebné optimalizovať a minimalizovať aktíva na zvýšenie rýchlosti načítania stránky.

"Minifikácia" eliminuje nadbytočnosť bez ovplyvnenia zobrazenia stránky. Široké spektrum nástrojov Google vám môže pomôcť odstrániť takéto prepúšťanie vrátane likérov:

  • CSSNano (pre CSS)
  • UglifyJS (pre JS)

Namiesto obrázkov použite CSS3

Drop tieňov, zaoblené rohy a výplne gradientov - všetky tieto funkcie je možné vykonať pomocou CSS, namiesto obrázkov.

To môže výrazne pomôcť pri znižovaní počtu požiadaviek HTTP, čím sa urýchli čas načítania v jednom a tom istom čase.

Použiť SVG Inline Namiesto formátov JPEG

Rovnako ako URI údajov, SVG (škálovateľná vektorová grafika) môžu byť vložené na stránku, aby sa znížil počet požiadaviek

Tieto súbory je možné vytvoriť na vektorovom grafickom editori, ako je Inkscape, Adobe Illustrator atď. Po vytvorení súboru ho môžete otvoriť v textovom editore a vložiť ho do svojho kódu.

Poznámka: Ak chcete do štýlu listov štýlov vložiť SVG, musíte najskôr previesť na adresu URI údajov a potom prejsť na ďalší krok.

Takže viac či menej sumy veci. Dúfam, že ste mali dobré a poučné čítanie.

Foto pomocou aplikácie Shutterstock

1