Kaip optimizuoti savo svetainę mobiliesiems vartotojams?

Ar įsitikinote, kad jūsų svetainė yra draugiška mobiliesiems?


Ar žinojai, kad „Google“ pristatė naują politiką, vadinamą mobiliuoju telefonu? Daugiau ir daugiau interneto vartotojai nutolsta nuo stalinių kompiuterių, o naršyti ir apsipirkti naudojantis jų mobiliaisiais įrenginiais.

Reaktyvus interneto dizainas leido sukurti svetaines, kurios vienodai veikia visose platformose. Bet net ir tada reaguojantis dizainas yra tik maža dalis UX optimizavimo strategijų mobiliesiems.

Jei norite tikrojo našumo optimizavimo, turėsite apsvarstyti ir kitas alternatyvas.

Štai kodėl jūsų svetainės kūrimas pabrėžiamas kaip: pirmoji mobilioji patirtis. Paprastai tariant, mobilusis pirmiausia reiškia, kad pirmiausia jūsų dizainas ir turinys yra optimizuotas mobiliųjų įrenginių vartotojams.

Nepaisant to, šis įrašas nėra skirtas visiškai naujos svetainės kūrimui. Vietoj to, mes pažvelgsime į kai kuriuos pagrindinius „pirmiausia mobiliesiems“ projektavimo principus. Ir praleiskite šiek tiek laiko sutelkdami dėmesį į technines galimybes, kad galėtumėte optimizuoti savo mobiliųjų įrenginių naudotojų patirtį.

# 1: Projektavimas atsižvelgiant į mobilųjį telefoną

Žiniatinklis daugiausia grindžiamas aptarnavimo darbalaukio vartotojais principu. Tikrą žiniatinklį, tikrąją technologijų pažangą geriausia parodyti gražiame viso ekrano ekrane. Tačiau išmanieji telefonai ir kiti mobilieji įrenginiai yra dalykas, ir laikas pradėti adaptuotis prie pirmojo mobiliojo telefono koncepcijos.

Kokius kitus dizaino elementus, išskyrus sveiku protu reaguojantį dizainą, turėtumėte įgyvendinti kurdami savo pirmąjį mobilųjį interneto dizainą?

  • Prioritetų nustatymas. Mobiliųjų telefonų ekranai ribojami tik turimoje ekrano vietoje. Taip pat mobilieji ekranai pateikia vertikalų turinį, o ne daug platesnę – horizontalią – stalinių kompiuterių struktūrą. Tai reiškia, kad turite kurti pagal prioritetus. Kurie elementai yra ypač svarbūs vartotojams? Jei yra CTA mygtukai, kaip lengva juos pamatyti mobiliojo telefono vartotojui?
  • Pirmiausia turinys. Spalva antra. Su mobiliuoju dizainu galite padaryti keletą įdomių dalykų, bet ne darbastalio dizainas. Taigi pirmiausia atsisakykite turinio. Padarykite savo kopiją ir kitas turinio dalis lengvai skaitomas ir prieinamas. Mobilusis ekranas daug mažiau atleidžia dėl atitraukiančių vaizdinių elementų.
  • Lengva naršyti. Mobiliajame įrenginyje galite ne tik spustelėti bet kur ir grįžti į pagrindinį puslapį. Nebent, žinoma, neplanuojate tokio tipo navigacijos iš anksto. Ir jūs turėtumėte. Pabandykite naudodami „Scroll-to-Top“ valdiklius, bet taip pat ir besiūlius lipnias antraštes, kai įmanoma.

Geriausias būdas patikrinti, ar jūs darote šią teisę, yra naudoti savo telefoną (aš tai darau visą laiką!) Ir apsilankyti jūsų svetainėje. Kruopščiai išnagrinėkite, kaip viskas jaučiasi ir teka kartu.

Jei sėdite kavinėje ar laukiate skrydžio oro uoste, spauskite kam nors petį ir mandagiai paprašykite, kad jis patikrintų jūsų svetainę. Tada atsisėskite ir išgirskite jų atsiliepimus. Dažniausiai nustebinsite save tuo, kaip žmonės suvokia jūsų svetainės naudotojų patirtį.

# 2: Išteklių optimizavimas; vaizdai, piktogramos ir kt.

Ar dažnai jūs naudojate vaizdinius vaizdus asmeninėms galimybėms, o ne UX? Taip nutinka, o jei ketinate kurti, verta išmokti, kaip veikia medijos optimizavimas.

Vaizdo elementai, tokie kaip nuotraukos, iliustracijos, piktogramos ir vaizdo įrašai didžiausią pralaidumą vartotojams tinklalapiuose.

Vidutinis puslapio įkėlimo laikas 2018 metams Kaip jūsų palyginimas „MachMetrics Speed“ tinklaraštisVidutinis tinklalapio dydis 2018 m. Išvardytos pramonės šakose ir skirtingose ​​šalyse.

Nors nėra nustatyto tinklalapio dydžio, kurį visi turi atitikti, yra suprantama, kad mažesnis tinklalapio dydis prilygsta greitesniam įkėlimo laikui..

Taigi, kaip jūs galite iškirpti keletą papildomų KB ar net MB iš savo vaizdo turinio?

  • Pakeiskite savo vaizdų dydį. Skamba paprastai, tiesa? Na, negaliu tikėtis, kiek kartų naršiau svetainę mobiliesiems, kad fone būtų 1980 x 1200 paveikslėlių. Vietoj to, kaip alternatyvią nuorodą prireikus turėtų būti pateiktos viso dydžio nuotraukos. Priklausomai nuo reikalingų matmenų, keičiant dydį, galima nuslėpti iki 80% viso vaizdo dydžio. Vis dėlto mobiliesiems įrenginiams niekada nėra jokios priežasties peržengti 600–700 pikselių diapazoną.
  • Sumažinkite failo dydį glaudindami. Vaizdo glaudinimas / optimizavimas yra trečiųjų šalių programinės įrangos naudojimo procesas, siekiant sumažinti paveikslėlyje esančių spalvų skaičių. Tai gali būti padaryta tiek, kad jūsų nuotraukos nepraranda įgimtos kokybės, tačiau gali drastiškai sumažėti jų failo dydis. Jei jums reikia pagalbos suspaudžiant vaizdus, ​​pažvelkite į plačiau pateiktą vaizdų glaudinimo įrankių sąrašą.
  • Naršykite alternatyvius failų formatus. Visi yra girdėję apie PNG ir JPEG failų formatus. Galų gale, jie yra de facto vaizdo standartai internete. Bet neilgai. Sukasi naujausios ir geriausios technologijos skaitmeninių vaizdų pateikime WebP ir SVG failų formatai. Pavyzdžiui, SVG gali automatiškai mastelis iki ekrano dydžio, sumažinti išteklių, reikalingų konkretiems vaizdiniams komponentams įkelti, skaičių.

Vartotojo patirties optimizavimas pirmiausia mobiliesiems telefonams yra atsargus dalykas. Projektavimas pagal impulsą reiškia, kad negalvojate apie savo sprendimų ilgalaikį poveikį. Kadangi apgalvotas požiūris padeda nuo pat pradžių kurti mobiliųjų telefonų vartotojus.

Įžvalgus: Laikydamiesi intuityvaus mobiliojo dizaino koncepcijos, jums nereikės pakartotinai naudoti tų pačių vaizdinių komponentų savo mobiliųjų telefonų dizainuose. Pašalinę keletą fono vaizdų ir pakeisdami juos spalvotu fonu (mobiliajame telefone), nepadarysite žalos vartotojui. Visada ieškokite būdų, kaip sutaupyti net mažiausiai pralaidumo.

# 3: Išankstinis įkėlimas ir tingus krovimas

Ar būtina įkelti visus žiniasklaidos išteklius į puslapius, kuriuos skaityti reikia daug laiko? Ar tai gali padėti pateikti išorinius puslapius prieš juos lankančius vartotojus??

Pirmiausia pažvelkime į ikikrovėjas, dar žinomas kaip naršyklės užuominos.

Išankstiniai įkėlėjai yra būdas, kuriuo puslapis gali pranešti naršyklei apie galimas naršymo galimybes. E. g. Vartotojas gali apsilankyti B puslapyje iš A puslapio.

Iš anksto įkeldamas, vartotojas gali pateikti B puslapį prieš spustelėdamas A puslapyje esančią naršymo nuorodą.

išankstinės apkrovos direktyva

Atminkite, kad išankstinis įkėlimas ne visada veikia, o galutinį sprendimą priima naršyklė. Tokie veiksniai kaip įrenginio tipas ir pralaidumas yra pasveriami atskirai.

Kokie yra dažniausiai pasitaikantys įkėlimo įtaisų tipai?

  • Išankstinis pateikimas. Šis tipas rodo, kad kitas naršymo pasirinkimas greičiausiai yra konkretus URL. Ir jei naršyklė patenkins prašymą, tada ji automatiškai talpins svarbius puslapio išteklius, o tai, savo ruožtu, kitą puslapį įkels daug greičiau..
  • Iš anksto. Anksčiau pateiktas tipas nuskaito tik tam tikrus išteklius, tačiau iš anksto pateikiamas talpinimas talpins visą puslapį. Visas pateiktas turinys saugomas vartotojo įrenginio atmintyje.
  • Iš anksto gauti DNS. Išankstinis DNS paleidimas išspręs nurodytą DNS ir nieko daugiau. Dėl to, jei vartotojas konkrečiai „pasisuka“ į jūsų svetainę, jūs iš esmės sugaišite laiką, reikalingo naršyti.
  • Iš anksto prisijungti. Tas pats, kaip aukščiau, bet taip pat užmezga ryšius ir paspaudimus naudojant TCP ir TLS ryšius.

Kokie yra išankstinio įkėlimo įrenginio kodo pavyzdžiai?

Kadangi išankstiniai įkėlėjai naudoja dinamines HTML žymas, jūs galite tai padaryti iš anksto įkelti turinį, pvz., „Google“ šriftus arba sukurkite pasirinktinį scenarijų, skirtą „JavaScript“ ištekliams iš anksto įkelti į „WordPress“.

BTW, jei naudojate „WordPress“ tada WP raketa gali jums padėti perkrauti jūsų svetainę.

Dabar, kai žinote daugiau apie išankstinius įkroviklius, pakalbėkime kita tema: tingus įkėlimas.

Kas yra tingus krovimas?

Kiekvieną kartą apsilankę naujame tinklalapyje, nesvarbu, ar tai tinklaraščio įrašas, ar statiška svetainė – naršyklė iškelia visą puslapio turinį, o tada tą turinį naudoja kaip įprastą naršymo patirtį. Daugeliu atvejų esate priversti atsisiųsti visą puslapį, iš tikrųjų nematydami toliau nei virš matomos ribos.

Jei tingus įkėlimas, naršyklei nurodoma įkelti (pateikti) turinį, kuris yra tik vartotojo peržiūroje. Taigi, jei tam tikrame puslapyje yra pridėtų jautrių nuotraukų ar vaizdo įrašų, šie failai bus rodomi tik tada, kai naršyklės ekranas pasieks tą svetainės dalį.

Ir jei nerimaujate dėl galimų SEO problemų, nebūk. Yoast tai patvirtino „Google“ pateikia puslapius, kuriuose įkraunama tingiai, ir mato tai tik kaip dar vieną veiklos gerinimo signalą.

Layzr js

Mano rekomendacija naudoti biblioteką yra Layzr.js – Paprastas ir efektyvus jūsų paveikslėlių tingus įkėlimas! Scenarijus suaktyvinamas ir pagrindiniame projekto puslapyje, kad galėtumėte pamatyti, kaip jis vykdomas realiuoju laiku. „WordPress“ vartotojai viešojoje įskiepių repote gali rasti dešimtis tingiai įkeliamų įskiepių.

# 4: talpyklos talpinimas internete

Žiniatinklio spartinimo talpykloje principas yra kopijuoti puslapio versiją, kurią bet kada galima pateikti vartotojui. Puslapiai talpykloje kaupiami pirmą kartą apsilankius svetainių puslapyje. Kai naujas vartotojas bandys patekti į tą puslapį, užuot teikęs tiesioginę versiją, žiniatinklio serveris parodys talpykloje esančią versiją.

Bet kokio kaupimo talpykloje tikslas yra pagerinti svetainės našumą ir sumažinti reikiamus foninius išteklius. Priklausomai nuo talpyklos sprendimo, galite sukonfigūruoti pasirinktinius intervalus ir kitus įvykius, susijusius su aktyvikliu.

talpyklos išsaugojimas internete

Keletas populiariausių interneto talpyklos pavadinimų yra lakai, kalmarai ir memcached. Tačiau būkite tikri, kad rinkoje yra daugybė kitų sprendimų, ypač jei esate „WordPress“ vartotojas.

Taip pat galite apsvarstyti galimybę pasirašyti CDN.

Kas yra CDN (turinio pateikimo tinklas)?

Turinio pristatymo tinklas naudoja pasaulinį paskirstytų serverių klasterį, kad užtikrintų neįtikėtinai greitą turinio pristatymą. A CDN gali greitai perkelti visus žiniatinklyje populiarius turinio tipus: vaizdo įrašus, nuotraukas, „JavaScript“ ir kt. Šiomis dienomis didžioji dalis interneto srauto praeina per tam tikrą CDN formą.

Vienas dalykas, kurį reikia atsiminti apie turinio pristatymo tinklus, yra tai, kad jie geriausiai veikia, kai naudojami aukšto poreikio tinklalapiuose. Taigi, jei per mėnesį aptarnaujate tik kelis tūkstančius lankytojų, pastebėti patobulinimus gali pasirodyti sunku. Nepaisant to, CDN yra puikus sprendimas siekiant pagerinti jūsų svetainės įkėlimo laiką, sumažinti pralaidumo sąnaudas, padidinti turinio prieinamumą ir sustiprinti bendrą saugumą..

Jei neturite ankstesnės patirties su CDN, rekomenduojame išbandyti Debesuota – jie teikia nemokamą planą visiems laikams ir yra puiki platforma, nuo kurios galima pradėti mokytis. Ir jei „Cloudflare“ nepateisina jūsų lūkesčių, peržiūrėkite mūsų įrašą apie geriausius nemokamų CDN tiekėjus rinkoje.

# 5: AMP (pagreitinti mobilieji puslapiai)

„Google“ AMP projektas yra mobiliųjų telefonų optimizavimas steroidams! Iš esmės AMP pašalina jūsų puslapius iki esminių dalykų, kad būtų užtikrintas greitas įkėlimas, bet ir turinio skaitomumas būtų prioritetas. Atsižvelgiant į tai, koks svarbus puslapio greitis, galite sukaupti drąsos pasakyti „ne“ beveik akimirksniu įkeliant laiką?

„Google AMP“ (pagreitinti mobilieji puslapiai)

Gerai, visi šie garsiniai žodžiai skamba puikiai, bet kaip iš tikrųjų veikia AMP?

AMP yra paprastas HTML puslapis, turintis tam tikrus apribojimus, susijusius su turinio rodymu. Tai lemia žymiai greitesnį įkėlimo laiką ir bendrą našumą dėl ribotų scenarijų vykdymo ir tokių.

Pavyzdžiui, „JavaScript“ neveikia su AMP. Nebent, žinoma, jūs naudojate „AMP JS“ biblioteką galima rasti „GitHub“. Naudodamiesi JS biblioteka leidžia pasiekti tam tikrų rezultatų, pvz., Vengti skelbimų blokatorių, tačiau jei norite tikro našumo, tada naudokite neapdorotą AMP.

AMP pagal pavyzdį

Jei esate „WordPress“ vartotojas, tada daugeliu atvejų AMP įtraukimas į savo tinklaraštį bus atliekamas naudojant papildinį. Bet jei dirbate su individualiai sukurta svetaine, pirmą kartą pridėję AMP, galite jaustis šiek tiek sunkiai.

Sužinokite AMP pagal pavyzdį

Štai kur AMP pagal pavyzdį yra naudinga. Ši svetainė yra tikras platformos projektas. Šioje svetainėje išsamiai aprašoma kiekviena užuomazga ir kabliukas, kurį galima pasiekti naudojant AMP. Kiekvienas komponentas ir efektas pateikiami pateikiant demonstracinę versiją, kad galėtumėte pamatyti, kaip ji atrodytų.

Įdomūs AMP pavyzdžiai:

  1. „Terra“ pritraukia mobiliųjų auditorijų auditoriją kartu su AMP
  2. „Times of India“ praneša apie 1,5 karto daugiau pajamų
  3. Greitoji prekyba skatina klientų konversijas, pirmiausia sukurdama AMP

# 6: išbandykite prieš įsipareigodami

Šiais laikais nėra jokio pasiteisinimo neturėti atskiros pastatymo aplinkos jūsų projektui. Daugelyje debesies prieglobos platformų pagal numatytuosius parametrus siūloma sustojimo aplinka, todėl pasitarkite su savo teikėju ir įsitikinkite, kad turite prieigą prie tokios.

testavimas prieš įsipareigojant

Kokia yra sustojimo aplinka?

Na, greičiausias būdas tai paaiškinti yra pažiūrėjus į dabartinę tiesioginę svetainę.

Ši svetainė vadinama gamybos svetaine – viso kodo, scenarijų ir turinio, kuriuo remiasi jūsų svetainė, realaus laiko versija. Sustojimo aplinka šiame kontekste yra jūsų gamybos vietos kopija. Manekenės svetainė, jei norėsite. Ir šioje sustojimo aplinkoje galite atlikti pakeitimus ar pridėti naujų funkcijų, nepažeisdami aktyvios svetainės.

Aš visada galvoju apie Ashley Harpp pranešimą, Negaiškite laiko – išbandykite pakeitimus prieš įsipareigodami.

Jos prisiėmimas, kaip mes „apgaudinėjame“ vengdami tam tikrų dalykų, yra puikus pavyzdys, kaip nenorime prisiimti atsakomybės suklydę. Nepaisant to, Ashley įraše taip pat yra nuorodų į naudingus įrankius, skirtus vietinei inscenizacijos aplinkai sukurti.

Testuoti nėra taip baisu, kaip atrodo. Bet tai tikrai yra baisu, kai netyčia ištrinate visą duomenų bazę gamybos serveryje!

Baigiamasis pareiškimas

Ne viskas taip sudėtinga, jei norite optimizuoti savo svetainę, kad jaustumėtės sklandžiai. Viskas, ko jums reikia, yra šiek tiek ryžto ir noriai taikykite aprašytus metodus šiame įraše. Tikėtina, kad jūs jau esate susipažinęs su tokiais dalykais kaip turinio talpyklos kaupimas ir tingus įkėlimas, bet ką jau kalbėti apie inscenizacijos aplinkas ar iš anksto įkeltus failus?

Tikimės, kad šis įrašas šiek tiek paaiškino dabartinę mobiliųjų svetainių optimizavimo būklę. Nesivaržykite palikti komentaro ar rekomenduoti papildomų sprendimų.

ŽENKLAI:

  • 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