Kako optimizirati web mjesto za korisnike mobilnih uređaja?

Jeste li osigurali da vaša web lokacija bude prilagođena mobilnim uređajima?


Jeste li znali da je Google uveo novo pravilo pod nazivom Mobile-First? Više i više korisnici interneta udaljavaju se od stolnih računala, i umjesto toga pregledavajte i kupujte putem svojih mobilnih uređaja.

Odgovarajući web dizajn omogućio je stvaranje web lokacija koje rade na svim platformama na ravnoj razini. Ali čak i tada, responzivni dizajn samo je djelić strategija optimizacije za UX za mobilne uređaje.

Ako želite istinsku optimizaciju performansi, morat ćete razmotriti i druge alternative.

To je razlog zašto je tako snažan naglasak na izgradnji vaše web stranice kao mobilno prvo iskustvo. Jednostavno rečeno, prvo za mobilne uređaje znači da su vaš dizajn i sadržaj prvo optimizirali za mobilne korisnike.

U skladu s tim, ovaj se post ne bavi dizajniranjem potpuno nove stranice. Umjesto toga, promatrat ćemo neke temeljne mobilne principe dizajna. Provedite neko vrijeme usredotočujući se na tehničke podatke za optimiziranje korisničkog iskustva za vaše mobilne korisnike.

# 1: Dizajn s mobitelom na umu

Web je u velikoj mjeri izgrađen na principu opsluživanja korisnika računala. Pravi web, pravi napredak tehnologije, najbolje se prikazuje na prekrasnom zaslonu preko cijelog zaslona. Ali pametni telefoni i drugi mobilni uređaji su stvar i vrijeme je da se počnemo prilagođavati konceptu dizajna mobilnih uređaja.

Osim što je zdrav razum razuman dizajn, koje biste druge elemente dizajna trebali implementirati u svoje web dizajne prvih mobilnih uređaja?

  • odrediti prioritete. Zasloni za mobilne uređaje ograničeni su na raspoloživi prostor za prikaz. Također, mobilni zasloni prikazuju sadržaj vertikalno suprotno mnogo širokoj – vodoravnoj – strukturi stolnih računala. To znači da morate dizajnirati koristeći prioritete. Koje su elemente najvažniji za korisnike? Ako postoje tipke CTA, koliko ih je lako vidjeti za mobilnog korisnika?
  • Prvo sadržaj. Boja sekunda. Pomoću mobilnog dizajna možete učiniti nekoliko zanimljivih stvari, ali svakako ne u domenu dizajna radne površine. Dakle, prvo ustupite mjesto sadržaju. Učinite kopiju i ostale dijelove sadržaja lako čitljivim i dostupnim. Mobilni zaslon mnogo manje oprašta od ometanja vizualnih elemenata.
  • Jednostavna navigacija. Na mobilnom uređaju ne možete jednostavno kliknuti bilo gdje i vratiti se na početnu stranicu. Osim ako, naravno, ne planirate ovu vrstu navigacije prije vremena. I trebali biste. Eksperimentirajte s widgetama za pomicanje do vrha, ali i bešavnim ljepljivim zaglavljama kad god je to moguće.

Najbolji način da provjerite radite li to dobro je korištenje vlastitog telefona (radim to stalno!) I posjetite vašu web lokaciju. Pažljivo proučite kako se stvari osjećaju i protječu zajedno.

Ako sjedite u kafiću ili čekate let na aerodromu, potapšajte nekoga po ramenu i pristojno ga zamolite da provjeri vašu web lokaciju. Zatim se odmarajte i saslušajte njihove povratne informacije. Većinom ćete se iznenaditi načinom na koji ljudi percipiraju korisničko iskustvo vaše web stranice.

# 2: Optimizacija resursa; slike, ikone itd.

Koliko se često susrećete sa vizualima radi osobnih preferencija, a ne UX-a? To se i događa, a ako idete kreativno, isplati se razumjeti kako funkcionira optimizacija medija.

Vizualni elementi poput fotografija, ilustracija, ikona i videa jesu najveći potrošači propusnosti na web stranicama.

Prosječno vrijeme učitavanja stranice za 2018. godinu. Kako vaš uspoređuje BlogMetrics Speed ​​BlogProsječna veličina web stranice u 2018. Navedene prema djelatnostima i različitim zemljama.

Iako ne postoji veličina web stranice koju svi moraju ispunjavati, zdrav je osjećaj da je manja veličina web stranice jednaka bržem vremenu učitavanja.

Dakle, kako možete smanjiti neke dodatne KB ili čak MB MB svog vizualnog sadržaja?

  • Promijenite veličinu slika. Zvuči jednostavno, zar ne? Pa, ne mogu računati koliko sam puta pregledao mobilnu web lokaciju samo da bih učitao slike od 1980 x 1200 u pozadini. Umjesto toga, fotografije u punoj veličini trebalo bi pružiti kao alternativne veze kada je to primjereno. Promjena veličine može brijati do 80% ukupne veličine slike, ovisno o potrebnim dimenzijama. Za mobilne uređaje nikad ne postoji razlog da se krene iznad raspona 600-700px.
  • Smanjivanje veličine datoteke kompresijom. Kompresija / optimizacija slike postupak je upotrebe softvera treće strane za smanjenje broja boja prisutnih na slici. To se može učiniti do te mjere da vaše fotografije ne gube urođenu kvalitetu, već mogu smanjiti veličinu datoteke drastično. Ako vam je potrebna pomoć za komprimiranje slika, ne tražite dalje od našeg sveobuhvatnog pregleda alata za kompresiju slike.
  • Istražite alternativne formate datoteka. Svi su čuli za formate datoteka PNG i JPEG. Uostalom, oni su de facto standardi slike na webu. Ali, ne zadugo. Najnovija i najveća tehnologija u isporuci digitalnih slika vrti se okolo WebP i SVG formati datoteka. Na primjer, SVG-ovi se mogu automatski skala do veličine ekrana, smanjuje se broj resursa potrebnih za učitavanje određenih vizualnih komponenti.

Optimizacija korisničkog iskustva za mobilne uređaje prvo je zamišljena. Dizajniranje na impuls znači da ne uzimate u obzir dugoročne učinke svojih odluka. Dok pažljiv pristup pomaže vam da s mobilnim korisnicima razmišljate od početka.

precizni: Pridržavajući se koncepta intuitivnog dizajna mobilnih uređaja, ne morate ponovo upotrebljavati iste vizualne komponente na svojim mobilnim dizajnom. Uklanjanje nekoliko pozadinskih slika i njihova zamjena pozadinama u boji – na mobilnom uređaju – neće naštetiti korisničkom iskustvu. Uvijek tražite načine za uštedu čak i najmanjih količina propusnosti.

# 3: Predučitavanje i Lazy-load

Je li potrebno sve medijske resurse učitati na stranicama koje za čitanje trebaju dovoljno vremena? Može li pomoći pri pružanju vanjskih stranica ispred korisnika koji ih posjećuju?

Pogledajmo najprije preloader, također poznat kao Savjeti za preglednike.

Prednalazivači su načini na kojima stranica može pregledati preglednike o potencijalnim mogućnostima navigacije. Npr Korisnik može posjetiti stranicu B sa stranice A.

Prije učitavanja, korisnik može prikazati stranicu B prije nego što klikne navigacijsku vezu na stranici A.

preload direktive

Imajte na umu da unaprijed učitavanje ne radi uvijek, a konačna odluka je na pregledniku. Čimbenici poput vrste uređaja i širine pojasa mjeri se pojedinačno.

Koje su vrste najčešćih učitavača?

  • Predučitaj. Ova vrsta sugerira da će sljedeći odabir navigacije najvjerojatnije biti određeni URL. A ako preglednik odobri zahtjev, tada će se automatski predmemorirati važni resursi stranice, što zauzvrat čini da se sljedeća stranica učita mnogo brže.
  • Iscrtavanje unaprijed. Dok gornja vrsta dohvaća samo određene resurse, unaprijed će se spremiti predmemoriranje cijele stranice. Sav prikazani sadržaj sprema se u korisničku memoriju uređaja.
  • DNS-Predučitaj. DNS prefetch će riješiti navedeni DNS i ništa drugo. Kao rezultat, ako korisnik napravi određeno „skretanje“ na vašoj web lokaciji, vi u osnovi brijete vrijeme potrebno za navigaciju..
  • predpovezivanje. Isto kao gore, ali uspostavlja veze i rukovanje, TCP i TLS vezama.

Koji su neki primjeri koda za preloader?

Budući da predtloničari koriste dinamične HTML oznake, to možete unaprijed učitajte sadržaj kao što je Google Fontovi ili stvorite prilagođenu skriptu za predinstalaciju JavaScript sredstava u WordPressu.

BTW, ako tada koristite WordPress WP Raketa može vam pomoći s tim da nadoplatite web mjesto.

Sada kada znate više o pred učitavačima, razgovarajmo o drugoj vrućoj temi: lijenom učitavanju.

Što je lijeno učitavanje?

Kad god posjetite novu web stranicu, bilo da je blog blog ili statična web stranica – preglednik dohvaća cjelokupni sadržaj stranice, a zatim služi taj sadržaj kao izvorni doživljaj pregledavanja. U većini slučajeva prisiljeni ste preuzeti cijelu stranicu, a da ne vidite dalje od preklopa.

Dok s lijenim učitavanjem, pregledniku se poručuje da učita (renderira) sadržaj koji je samo unutar korisničkog pregleda. Ako su na određenu stranicu dodane fotografije ili videozapisi osjetljivi na veličinu, te će se datoteke prikazivati ​​samo kad ekran vašeg preglednika dosegne taj dio web lokacije.

A ako ste zabrinuti zbog potencijalnih problema sa SEO-om, nemojte biti. Yoast je to i potvrdio Google prikazuje stranice koje koriste lijeno učitavanje, i to vidi samo kao još jedan signal poboljšanja performansi.

Layzr js

Moja preporuka za uporabu biblioteke je Layzr.js – jednostavno i učinkovito lijenje za vaše slike! Skripta se aktivira i na početnoj stranici projekta pa ćete je moći vidjeti u stvarnom vremenu. Korisnici WordPressa mogu pronaći desetke lijenih dodataka u javnom repo-u za dodatke.

# 4: Web predmemoriranje

Web predmemoriranje temelji se na konceptu kopiranja verzije stranice, koja se tada može u svakom trenutku predstaviti korisniku. Stranice se spremaju u memoriju nakon prvog posjeta stranici web mjesta. Kada novi korisnik tada pokuša pristupiti toj stranici, umjesto da poslužuje aktivnu verziju, web poslužitelj će prikazati predmemoriranu verziju.

Cilj bilo koje vrste predmemoriranja je poboljšati performanse web stranice i smanjiti potrebne pomoćne resurse. Ovisno o vašem rješenju za predmemoriranje, možete konfigurirati prilagođene intervale i ostale događaje temeljene na okidaču.

internetsko predmemoriranje

Neka od najpopularnijih imena u web-predmemoriranju su lakovi, lignje i memcached. No budite sigurni da na tržištu postoji puno drugih rješenja, posebno ako ste korisnik WordPress-a.

Možete uzeti u obzir i prijavu za CDN.

Što je CDN (mreža za isporuku sadržaja)?

Mreža za dostavu sadržaja koristi globalni skup distribuiranih poslužitelja za pružanje nevjerojatno brze isporuke sadržaja. CDN mogu brzo prenijeti sve popularne vrste sadržaja na web: video, fotografiju, JavaScript itd. Ovih dana najveći dio prometa na webu prolazi kroz neki oblik CDN-a.

Jedna mreža koju treba zapamtiti o mrežama za dostavu sadržaja jest da oni najbolje funkcioniraju kada se koriste na web stranici velike potražnje. Dakle, ako opslužujete samo nekoliko tisuća posjetitelja mjesečno, vidljivo poboljšanje može se pokazati teško. Ipak, CDN je sjajno rješenje za poboljšanje vremena učitavanja vaše web stranice, smanjenja troškova propusnosti, povećanja dostupnosti sadržaja i jačanja opće sigurnosti.

Ako nemate prethodno iskustvo s CDN-ovima, preporučujemo vam da isprobate CloudFlare – pružaju zauvijek besplatni plan i to je sjajna platforma s kojom treba početi učiti. A ako Cloudflare ne ispuni vaša očekivanja, pogledajte naš post za najbolje besplatne CDN pružatelje usluga na tržištu.

# 5: AMP (ubrzane mobilne stranice)

Googleov AMP projekt je mobilna optimizacija na steroidima! U osnovi, AMP uklanja vaše stranice kako bi prikazao osnovne stvari kako bi se osiguralo vrlo brzo učitavanje, ali i učinila čitljivost sadržaja prioritetom. S obzirom na to koliko je važna brzina stranice, možete li prikupiti hrabrosti da kažete ne trenutačnim trenucima učitavanja?

Google AMP (ubrzane mobilne stranice)

U redu, sve te zvučne riječi zvuče sjajno, ali kako AMP zapravo djeluje?

AMP je HTML stranica s kratkim rukom s određenim ograničenjima za vrstu sadržaja koji se može prikazati. To dovodi do mnogo bržeg vremena učitavanja i ukupne performanse zbog ograničenja za izvršavanje skripti i slično.

JavaScript, na primjer, ne radi s AMP-om. Osim ako, naravno, ne koristite AMP JS knjižnica dostupna na GitHubu. Korištenje JS knjižnice omogućuje vam postizanje određenih rezultata, poput izbjegavanja blokade oglasa, ali ako želite istinsku izvedbu, tada je neobrađeni AMP put.

AMP primjerom

Ako ste korisnik WordPress-a, u većini slučajeva dodavanje AMP-a na vaš blog bit će izvedeno uz pomoć dodatka. No, ako radite s web-mjestom izrađenom po mjeri, dodavanje AMP-a po prvi se put može osjećati pomalo izazovno.

Naučite AMP primjerom

Ovo je gdje AMP primjerom dobro dođe. Sporedni projekt stvarne platforme, ova web stranica detaljno opisuje sve čvorove i kuke koje je moguće postići pomoću AMP-a. Svaka komponenta i efekt dolazi s priloženom demonstracijom, tako da možete vidjeti kako bi to izgledalo.

Zanimljive studije slučaja za AMP:

  1. Terra pokreće mobilno gledalište AMP-om
  2. Times of India izvještava o 1,5 puta većoj dobiti
  3. Fastcommerce pokreće konverzije za klijente tako što prvi izgradi AMP

# 6: Ispitajte prije počinjenja

Na ovaj dan i u današnje doba, nema izgovora da za vaš projekt nema zasebnog scenskog okruženja. Većina platformi za hosting u oblaku prema zadanim postavkama nude okruženja za postavljanje, pa provjerite da li imate pristup nekoj.

testiranje prije počinjenja

Kakvo je scensko okruženje?

Pa, najbrži način za objašnjenje ovoga je pregled trenutne web stranice uživo.

Ova web lokacija naziva se proizvodnom web lokacijom – inačica svih kodova, skripti i sadržaja na kojima se temelji vaša web stranica u stvarnom vremenu. U ovom je kontekstu scensko okruženje preslika vaše proizvodne stranice. Lutka stranica, ako hoćete. I u ovom scenskom okruženju moći ćete unositi promjene ili dodavati nove značajke bez probijanja web lokacije uživo.

Uvijek se mislim na post Ashley Harpp, Ne gubite vrijeme – testirajte promjene prije nego što počnete.

Njezin stav o tome kako se “trikamo” da izbjegnemo određene stvari je sjajan primjer kako ne želimo preuzeti odgovornost kada pogriješimo. No Ashleyev post također uključuje veze do korisnih alata za postavljanje lokalnog scenskog okruženja.

Ispitivanje nije tako zastrašujuće koliko zvuči. Ali sigurno je zastrašujuće kad slučajno izbrišete cijelu bazu podataka na proizvodnom poslužitelju!

Završna izjava

Optimizacija vaše web lokacije kako bi glatko mobilno iskustvo nije sve tako teško. Sve što trebate je malo odlučnosti i volje primijenite zacrtane metode u ovom postu. Vjerojatno ste već upoznati sa stvarima kao što su predmemoriranje sadržaja i lijeno učitavanje, ali što je s postavljanjem okruženja ili pred učitavača?

Nadamo se da je ovaj post bacio malo svjetla na trenutačno stanje optimizacije mobilnih web stranica. Slobodno ostavite komentar ili preporučite dodatna rješenja.

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