Kako optimizirati spletno mesto za uporabnike mobilnih naprav?

Ali ste poskrbeli, da je vaše spletno mesto prijazno za mobilne naprave?


Ste vedeli, da je Google predstavil nov pravilnik, imenovan Mobile-First? Več in več spletni uporabniki se odmikajo od namiznih računalnikov, in namesto tega brskajte po svojih mobilnih napravah in jih kupujte.

Odziven spletni dizajn je omogočil enakomerno ustvarjanje spletnih mest, ki delujejo na vseh platformah. Toda tudi takrat je odziven dizajn le del strategij za optimizacijo UX za mobilne naprave.

Če želite resnično optimizacijo uspešnosti, boste morali razmisliti tudi o drugih možnostih.

Zato je tako močan poudarek na gradnji vaše spletne strani kot mobilna prva izkušnja. Preprosto povedano, mobilni najprej pomeni, da sta vaš dizajn in vsebina najprej optimizirana za mobilne uporabnike.

Ob tem ne gre za oblikovanje povsem novega spletnega mesta. Namesto tega si bomo ogledali nekaj temeljnih načel oblikovanja mobilnih naprav. In porabite nekaj časa, da se osredotočite na tehnične značilnosti za optimizacijo uporabniške izkušnje za vaše mobilne uporabnike.

# 1: Načrtovanje z mobilnimi napravami

Splet je večinoma zasnovan po principu služenja namiznih uporabnikov. Pravi splet, pravi napredek tehnologij, je najbolje prikazati na čudovitem zaslonu preko celega zaslona. Toda pametni telefoni in druge mobilne naprave so stvar in čas je, da se pričnemo prilagajati konceptu mobilnega prvega oblikovanja.

Razen od zdravega smisla odzivnega dizajna, katere druge oblikovalske elemente bi morali implementirati v svoje spletne modele prvega mobilnega telefona?

  • Prednostna naloga. Zasloni za mobilne naprave so omejeni na razpoložljivi prostor zaslona. Tudi mobilni zasloni prikazujejo vsebino navpično, v nasprotju s precej širšo – vodoravno – strukturo namiznih računalnikov. To pomeni, da morate načrtovati z uporabo prednostne razvrstitve. Kateri elementi so za uporabnike najbolj pomembni? Če obstajajo gumbi CTA, kako enostavno jih je videti za mobilnega uporabnika?
  • Vsebina najprej. Barva sekunda. Z mobilnim dizajnom lahko počnete nekaj zanimivih stvari, zagotovo pa ne v obsegu oblikovanja namizja. Torej, najprej se potrudite vsebini. Naj bodo vaše kopije in drugi deli vsebine lahko berljivi in ​​dostopni. Mobilni zaslon veliko manj odpušča moteče vizualne elemente.
  • Enostavna navigacija. V mobilni napravi ne morete preprosto klikniti kamor koli in se vrniti na domačo stran. Razen če seveda ne načrtujete tovrstne navigacije pred časom. In bi morali. Eksperimentirajte s pripomočki za pomikanje do vrha, a tudi brezšivnimi lepljivimi glavami, kadar je to mogoče.

Najboljši način za preverjanje, ali to počnete pravilno, je uporaba lastnega telefona (to počnem ves čas!) In obisk vašega spletnega mesta. Natančno preučite, kako se stvari počutijo in tečejo skupaj.

Če sedite v kavarni ali čakate na let na letališču, ga položite po rami in ga vljudno prosite, naj pregleda spletno mesto za vas. Nato se usedite nazaj in slišite njihove povratne informacije. Večino časa boste presenečeni s tem, kako ljudje dojemajo uporabniško izkušnjo vašega spletnega mesta.

# 2: Optimizacija virov; slike, ikone itd.

Kako pogosto se znajdete, da uporabljate vizuale zaradi osebnih želja in ne zaradi UX-a? To se sicer zgodi, in če boste ustvarjalni, se vam splača razumeti, kako deluje optimizacija medijev.

Vizualni elementi, kot so fotografije, ilustracije, ikone in videoposnetki, so največji porabnik pasovne širine na spletnih straneh.

Povprečni časi nalaganja strani za leto 2018 Kako vaš primerja spletni dnevnik MachMetrics SpeedPovprečna velikost spletnih strani v letu 2018. Navedene so po panogah in različnih državah.

Čeprav ni določene velikosti spletne strani, ki bi jo morali izpolnjevati vsi, je razumno, da je manjša velikost spletne strani enaka hitrejšim časom nalaganja.

Torej, kako lahko izrezate nekaj dodatnih KB ali celo MB-jev svoje vizualne vsebine?

  • Velikost slike. Sliši se preprosto, kajne? No, ne morem računati, kolikokrat sem brskal po mobilnem spletnem mestu samo zato, da sem v ozadju naložil slike v velikosti 1980 x 1200. Namesto tega bi morale biti fotografije v polni velikosti zagotovljene kot alternativne povezave. Velikost slike lahko obrije do 80% celotne velikosti slike, odvisno od potrebnih dimenzij. Za mobilne naprave pa nikoli ni več razloga, da bi presegli območje 600-700px.
  • Zmanjšajte velikost datoteke s stiskanjem. Stiskanje / optimizacija slike je postopek uporabe programske opreme drugih proizvajalcev za zmanjšanje števila barv, ki so prisotne na sliki. To je mogoče storiti do te mere, da vaše fotografije ne izgubijo prirojene kakovosti, vendar lahko velikost datoteke močno zmanjša. Če potrebujete pomoč pri stiskanju slik, ne iščite več kot naš obsežen pregled orodij za stiskanje slik.
  • Raziščite druge oblike datotek. Vsi so slišali za formate datotek PNG in JPEG. Navsezadnje so dejanski standardi slike na spletu. Ampak, ne za dolgo. Najnovejša in največja tehnologija pri zagotavljanju digitalnih slik se vrti okoli WebP in datoteke SVG. Na primer SVG-ji se lahko samodejno obsega do velikosti zaslona, zmanjšanje števila virov, potrebnih za nalaganje določenih vizualnih komponent.

Optimizacija uporabniške izkušnje za mobilne naprave je najprej pametna stvar. Oblikovanje na impulz pomeni, da ne upoštevate dolgoročnih učinkov svojih odločitev. Ker premišljen pristop vam pomaga, da z mobilnimi uporabniki razmišljate od začetka.

Vpogled: Če boste sledili konceptu intuitivnega mobilnega oblikovanja, vam ni treba ponovno uporabljati istih vizualnih komponent na svojih mobilnih modelih. Če odstranite nekaj slik ozadja in jih nadomestite z barvnimi ozadji – na mobilnem – ne bo škodovala uporabniški izkušnji. Vedno iščite načine, kako prihraniti tudi najmanjšo količino pasovne širine.

# 3: Prednalaganje in Lazy-load

Ali je treba nalagati vse medijske vire na straneh, ki potrebujejo veliko časa za branje? Ali lahko pomaga pri upodabljanju zunanjih strani pred uporabniki, ki jih obiščejo?

Poglejmo najprej prednaložnike, znane tudi kot namigi za brskalnike.

Vnaprejšnji nalagalniki so načini strani, ki brskalniku sporočajo morebitne možnosti za navigacijo. Npr. Uporabnik lahko obišče stran B s strani A.

S predhodnim nalaganjem lahko uporabnik upodobi stran B, preden klikne navigacijsko povezavo na strani A.

direktiva o prednastavitvi

Upoštevajte, da prednaložitev ne deluje vedno, in do končne odločitve je odgovoren brskalnik. Dejavniki, kot so vrsta naprave in pasovna širina, se tehtajo posamično.

Katere so najpogostejše vrste prednaloživalnika?

  • Prednastavite. Ta vrsta kaže, da bo najverjetneje določen URL naslednji navigacijski izbor. Če brskalnik prošnji ugodi, bo samodejno predpomnil pomembne vire strani, kar posledično naloži naslednjo stran veliko hitreje.
  • Prerender. Medtem ko zgornji tip pridobi samo določene vire, bo predhodno upodabljanje predpomnilo celotno stran. Vsa izročena vsebina se shrani v uporabnikov spomin.
  • DNS-Prefetch. Prednamestitev DNS bo odpravila navedeni DNS in nič drugega. Posledično, če uporabnik na vašem spletnem mestu opravi določen zavoj, si v bistvu obrijete čas, potreben za navigacijo..
  • Vnaprej povežite. Enako kot zgoraj, vzpostavlja pa tudi povezave in stisk roke s TCP in TLS povezavami.

Kakšni so primeri kode za prednaložnike?

Ker prednalagalniki uporabljajo dinamične oznake HTML, lahko to storite vnaprej naloži vsebino, kot je Google Fonts ali ustvarite skript po meri za prednastavitev sredstev JavaScript v WordPressu.

BTW, če uporabljate WordPress Raketa WP vam lahko pomaga pri tem, da napolnite vaše spletno mesto.

Zdaj, ko veste več o prednaločevalcih, se pogovorimo o drugi vroči temi: lazy-load.

Kaj je leno nalaganje?

Vsakič, ko obiščete novo spletno stran, ne glede na to, ali pišete v spletnem dnevniku ali statičnem spletnem mestu – brskalnik pridobi celotno vsebino strani in jo nato uporabi kot izvorno brskanje. V večini primerov ste prisiljeni prenesti celotno stran, ne da bi videli dejansko več kot zgoraj.

Čeprav je brskalnik ob lenem nalaganju naložen, da naloži (upodablja) vsebino, ki je samo v uporabniškem oknu uporabnika. Če so na določeni strani dodane fotografije ali videoposnetki, ki so občutljivi na velikost, se te datoteke prikažejo samo, ko zaslon brskalnika doseže tisti del spletnega mesta.

In če vas skrbijo morebitne težave s SEO, ne bodite. Yoast je to potrdil Google upodablja strani, ki uporabljajo leno nalaganje, in jo vidi kot le še en signal za izboljšanje zmogljivosti.

Layzr js

Moje priporočilo za uporabo knjižnice je Layzr.js – preprosto in učinkovito leno nalaganje vaših slik! Skript je aktiviran tudi na domači strani projekta, tako da ga lahko vidite v realnem času. Uporabniki WordPressa lahko najdejo na desetine lenobnih vtičnikov v javnem repoju vtičnikov.

# 4: spletno predpomnjenje

Spletno predpomnjenje temelji na konceptu kopiranja različice strani, ki jo lahko uporabnik nato kadar koli predstavi. Strani se predpomnijo ob prvem obisku strani spletnih strani. Ko novi uporabnik poskuša dostopati do te strani, namesto da bi uporabljal različico v živo, spletni strežnik prikaže predpomnjeno različico.

Cilj kakršne koli predpomnilnice je izboljšati uspešnost spletnega mesta in zmanjšati potrebne rezervne vire. Glede na rešitev za predpomnjenje lahko konfigurirate intervale po meri in druge dogodke, ki temeljijo na sprožitvi.

spletno predpomnjenje

Nekatera najbolj priljubljena imena v spletnem predpomnjenju so Varnish, Squid in Memcached. Bodite prepričani, da je na trgu še veliko drugih rešitev, še posebej, če ste uporabnik WordPress-a.

Prav tako lahko razmislite o prijavi na CDN.

Kaj je CDN (omrežje za pošiljanje vsebine)?

Omrežje za pošiljanje vsebin uporablja globalno gručo porazdeljenih strežnikov za zagotavljanje neverjetno hitre dostave vsebine. A CDN lahko hitro prenesete vse priljubljene vrste vsebine v spletu: video, fotografije, JavaScript itd. V teh dneh večina prometa v spletu poteka skozi neko obliko CDN.

Pri omrežjih za pošiljanje vsebine je treba zapomniti eno, da delujejo najbolje, če jih uporabljate na spletnem mestu z velikim povpraševanjem. Če mesečno postrežete le z nekaj tisoč obiskovalci, je opaziti opazne izboljšave težko. Kljub temu je CDN odlična rešitev za izboljšanje časov nalaganja vašega spletnega mesta, zmanjšanje stroškov pasovne širine, povečanje razpoložljivosti vsebine in krepitev splošne varnosti.

Če nimate predhodnih izkušenj s CDN-ji, priporočamo, da se preizkusite Cloudflare – zagotavljajo zastonj načrt za vedno, in to je odlična platforma, s katero se lahko začnete učiti In če Cloudflare ne ustreza vašim pričakovanjem, si oglejte našo objavo o najboljših brezplačnih ponudnikih CDN na trgu.

# 5: AMP (pospešene strani za mobilne naprave)

Googlove AMP projekt je mobilna optimizacija na steroidih! AMP v bistvu odstrani vaše strani, tako da nudijo najpomembnejše vsebine in tako zagotavljajo hitro hitro nalaganje, pa tudi, da bo prednostna berljivost vsebine. Glede na to, kako pomembna je hitrost strani, lahko zberete pogum, da ne rečete takojšnjim časom nalaganja?

Google AMP (pospešene strani za mobilne naprave)

V redu, vse te buzzword zvenijo super, ampak kako AMP dejansko deluje?

AMP je spletna stran HTML z majhnimi členki z določenimi omejitvami za prikaz vsebine. To vodi k veliko hitrejšim časom nalaganja in splošni uspešnosti zaradi omejitve za izvajanje skriptov in podobno.

JavaScript, na primer, ne deluje z AMP. Razen, če seveda ne uporabljate AMP JS knjižnica je na voljo na GitHubu. Z uporabo knjižnice JS lahko dosežete določene rezultate, na primer izogibanje zaviralcem oglasov, toda če želite resnično uspešnost, je surovo AMP pot.

AMP po zgledu

Če ste uporabnik WordPress-a, bo v večini primerov dodajanje AMP-ja na vaš blog potekalo s pomočjo vtičnika. Če pa delate s prilagojenim spletnim mestom, se lahko prvič doda AMP zdi nekoliko težavno.

Naučite se AMP po zgledu

Tukaj je AMP po zgledu pride prav. Stranski projekt dejanske platforme, to spletno mesto podrobno določa vse vogale in trnke, ki jih je mogoče doseči z AMP. Vsaka komponenta in učinek ima priložen demo, tako da si lahko ogledate, kako bi bil videti.

Zanimive študije primerov za AMP:

  1. Terra pripelje mobilno gledanost z AMP
  2. Times of India poroča za 1,5X več prihodkov
  3. Fastcommerce vodi konverzije za stranke tako, da najprej zgradi AMP

# 6: Preizkusite pred zagonom

V tem dnevu ni nobenega opravičila, da za svoj projekt ne bo ločenega scenskega okolja. Večina platform za gostovanje v oblaku ponuja privzeto prikazovalno okolje, zato se pri ponudniku preverite, ali imate dostop do njega.

testiranje pred zagonom

Kakšno je uprizoritveno okolje?

No, najhitreje to razložite tako, da pogledate trenutno spletno mesto v živo.

To spletno mesto imenujete proizvodno mesto – različica kode, skriptov in vsebine v realnem času, na kateri temelji vaše spletno mesto. V tem kontekstu je uprizoritveno okolje kopija vašega proizvodnega mesta. Navidezno spletno mesto, če hočete. In v tem prizorišču lahko izvedete spremembe ali dodate nove funkcije, ne da bi poškodovali spletno mesto v živo.

Vedno pomislim na objavo Ashley Harpp, Ne zapravljajte časa – pred izvedbo preizkusite spremembe.

Njeno mnenje o tem, kako se sami prevaramo, da se izognemo določenim stvarem, je odličen primer, kako ne želimo prevzeti odgovornosti, ko delamo napako. Vseeno pa Ashleyjeva objava vsebuje tudi povezave do uporabnih orodij za vzpostavitev lokalnega uprizoritvenega okolja.

Testiranje ni tako strašljivo, kot se sliši. Vendar je zagotovo strašno, ko pomotoma izbrišete celotno bazo podatkov na proizvodnem strežniku!

Zaključna izjava

Optimizacija spletnega mesta za nemoteno mobilno izkušnjo ni vse tako težka. Vse, kar potrebujete, je malo odločnosti in v tej objavi voljno uporabite začrtane metode. Verjetno ste že seznanjeni s predmeti, kot sta predpomnilnik vsebine in leno nalaganje, kaj pa urejanje okolij ali prednaložilnikov?

Upajmo, da je objava osvetlila trenutno stanje optimizacije spletnih strani za mobilne naprave. Če želite pustiti komentar ali priporočiti dodatne rešitve.

Oznake:

  • SEO

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map