Cum să vă optimizați site-ul pentru utilizatorii de telefonie mobilă?

Te-ai asigurat că site-ul tău este mobil?


Știați că Google a introdus o nouă politică numită Mobile-First? Mai mult și mai mult utilizatorii de web se îndepărtează de calculatoarele desktop, și, în schimb, răsfoiți și cumpărați utilizând dispozitivele mobile.

Designul web responsabil a făcut posibilă crearea de site-uri care să funcționeze pe toate platformele la un nivel egal. Dar, chiar și atunci, designul receptiv este doar o fracțiune din strategiile de optimizare a UX pentru mobil.

Dacă doriți o optimizare reală a performanței, va trebui să luați în considerare și alte alternative.

Acesta este motivul pentru care există un accent atât de puternic pe construirea site-ului dvs. ca și mobil-prima experiență. În termeni simpli, mobil-primul înseamnă că designul și conținutul dvs. sunt optimizate mai întâi pentru utilizatorii de telefonie mobilă.

Acestea fiind spuse, această postare nu este despre proiectarea unui site complet nou. În schimb, vom analiza câteva principii fundamentale de proiectare primară pentru mobil. Și petreceți ceva timp concentrându-vă asupra tehnicilor pentru optimizarea experienței utilizatorilor pentru utilizatorii dvs. de telefonie mobilă.

# 1: Proiectarea cu mobil în minte

Web-ul este construit în mare parte pe principiul servirii utilizatorilor desktop. Web-ul real, cele mai bune progrese în tehnologii, este cel mai bine afișat pe un ecran frumos pe ecran complet. Dar, smartphone-urile și alte dispozitive mobile sunt un lucru și este timpul să începeți să vă adaptați la conceptul de design pentru primul telefon mobil.

În afară de design-ul sensibil de bun-simț, ce alte elemente de design trebuie să implementați în design-urile dvs. pentru primele dispozitive mobile?

  • Prioritizare. Ecranele mobile sunt limitate la spațiul de afișare disponibil. De asemenea, ecranele mobile prezintă conținut într-o manieră verticală, opusă unei structuri mult mai largi – orizontale pentru desktop. Aceasta înseamnă că trebuie să proiectați folosind prioritizarea. Ce elemente sunt de maximă importanță pentru a vedea utilizatorii? Dacă există butoane CTA, cât de ușor este să le vezi pentru utilizatorul mobil?
  • Conținutul mai întâi. Culoare secundă. Puteți face unele lucruri interesante cu designul mobil, dar cu siguranță nu este în domeniul de aplicare al design-ului pentru desktop. Așa că, dați mai întâi loc conținutului. Faceți copia și alte părți ale conținutului dvs. ușor de citit și accesibile. Un ecran mobil este mult mai puțin iertător pentru a distrage elemente vizuale.
  • Navigare ușoară. Pe un dispozitiv mobil, nu puteți să faceți clic pe nicăieri și să vă întoarceți la pagina de pornire. Cu excepția cazului în care, desigur, planificați acest tip de navigație înainte de timp. Și ar trebui. Experimentați cu widget-uri Scroll-to-Top, dar și antete lipicioase perfecte ori de câte ori este posibil.

Cel mai bun mod de a verifica dacă faceți acest lucru este să folosiți propriul telefon (eu îl fac tot timpul!) Și să vizitați site-ul dvs. Faceți o examinare minuțioasă a modului în care lucrurile se simt și curg împreună.

Dacă stai într-o cafenea sau aștepți un zbor într-un aeroport, trage pe cineva pe un umăr și cere-i politicos să verifice site-ul tău. Apoi, așezați-vă înapoi și auziți feedback-ul lor. De cele mai multe ori te vei surprinde de modul în care oamenii percep experiența utilizatorului de pe site-ul dvs. web.

# 2: Optimizarea resurselor; imagini, icoane etc..

Cât de des te găsești folosind imagini din motive de preferință personală și nu de UX? Se întâmplă și, dacă vei merge creativ, merită să înțelegi cum funcționează optimizarea media.

Elementele vizuale precum fotografiile, ilustrațiile, pictogramele și videoclipurile sunt cei mai mari consumatori de lățime de bandă din paginile web.

Timpul mediu de încărcare a paginii pentru 2018. Cum se compară blogul dvs. cu viteza MachMetricsDimensiunea medie a paginii web în 2018. Listată de industrii și de diferite țări.

Deși nu există o dimensiune de pagină web setată pe care toată lumea trebuie să o îndeplinească, este de bun simț faptul că dimensiunea mai mică a paginii web este egală cu timpii de încărcare mai rapide.

Deci, cum puteți decupa câteva KB-uri sau chiar MB-uri în afara conținutului dvs. vizual?

  • Redimensionați-vă imaginile. Pare simplu, nu? Ei bine, nu pot ține cont de câte ori am răsfoit un site mobil doar pentru a avea încărcătură de imagini de 1980 x 1200 în fundal. În schimb, fotografii cu dimensiuni complete ar trebui să fie furnizate ca link-uri alternative, atunci când este cazul. Redimensionarea poate reduce până la 80% din dimensiunea totală a imaginii, în funcție de dimensiunile dorite. Cu toate acestea, pentru dispozitivele mobile, nu există niciodată un motiv să depășească cel mult 600-700px.
  • Reduceți dimensiunea fișierului cu compresia. Compresia / optimizarea imaginii este procesul de utilizare a unui software terț pentru a reduce numărul de culori prezente într-o imagine. Acest lucru se poate realiza într-o măsură în care fotografiile dvs. nu își pierd calitatea înnăscută, dar pot reduce dimensiunea fișierului drastic. Dacă aveți nevoie de ajutor pentru comprimarea imaginilor, nu căutați mai departe de completarea noastră completă a instrumentelor de compresie a imaginilor.
  • Explorați formate de fișiere alternative. Toată lumea a auzit despre formate de fișiere PNG și JPEG. La urma urmei, acestea sunt standardele de imagine de facto pe web. Dar nu pentru mult timp. Cea mai recentă și cea mai mare tehnologie în furnizarea de imagini digitale se învârte WebP și formatele de fișiere SVG. SVG, de exemplu, poate automat la dimensiunea ecranului, reducerea numărului de resurse necesare pentru încărcarea componentelor vizuale specifice.

Optimizarea experienței utilizatorului pentru mobil-primul este doar un lucru atent. Proiectarea pe impuls înseamnă că nu iei în considerare efectele pe termen lung ale deciziilor tale. În timp ce o abordare atentă vă ajută să construiți cu utilizatorii de telefonie mobilă în minte de la început.

Profund: Respectând conceptul de design mobil intuitiv, nu trebuie să reutilizați aceleași componente vizuale pe desenele dvs. mobile. Eliminarea câtorva imagini de fundal și înlocuirea lor cu fundaluri de culoare – pe mobil – nu va face rău experienței utilizatorului. Caută întotdeauna modalități de a salva chiar și cea mai mică cantitate de lățime de bandă.

# 3: Pre-încărcare și Lazy-loading

Este necesar să încărcați toate resursele media pe paginile care necesită o cantitate semnificativă de timp pentru citire? Și poate ajuta la redarea paginilor externe înaintea utilizatorilor care le vizitează?

Să ne uităm mai întâi la preîncărcătoare, cunoscute și sub numele de indicii de browser.

Precarcatoarele sunt modalități pentru o pagină de a spune browserului despre posibilitățile de navigație potențiale. De exemplu. Un utilizator poate vizita pagina B din pagina A.

Odată cu preîncărcarea, utilizatorul poate face pagina B înainte de a face clic pe linkul de navigare de pe pagina A.

Directiva de preîncărcare

Rețineți că preîncărcarea nu funcționează întotdeauna și depinde de browser să ia decizia finală. Factori precum tipul dispozitivului și lățimea de bandă sunt cântărite individual.

Care sunt cele mai comune tipuri de preîncărcare?

  • Preîncărcați. Acest tip sugerează că o adresă URL specifică este cel mai probabil să fie următoarea alegere de navigare. Și, dacă browserul acceptă solicitarea, atunci aceasta va memora în cache automat resurse importante ale paginii, ceea ce la rândul său face ca pagina următoare să se încarce mult mai rapid.
  • prerender. În timp ce tipul de mai sus preia doar anumite resurse, predarea va memora în cache întreaga pagină. Tot conținutul redat este stocat în memoria dispozitivului utilizatorilor.
  • DNS-Preîncărcați. Comanda prealabilă DNS va rezolva DNS-ul specificat și nimic altceva. Drept urmare, dacă un utilizator face o „întoarcere” specifică pe site-ul dvs., vă veți radia în esență timpul necesar pentru navigare..
  • conectare anticipată. La fel ca mai sus, dar stabilește și conexiuni și strângeri de mână, cu conexiuni TCP și TLS.

Care sunt câteva exemple de cod pentru preîncărcătoare?

Din moment ce preîncărcătorii folosesc etichete HTML dinamice, puteți preîncărcați conținut precum fonturile Google sau creați un script personalizat pentru preîncărcarea activelor JavaScript în WordPress.

BTW, dacă utilizați WordPress atunci Racheta WP te poate ajuta cu asta pentru a-ți supraîncărca site-ul.

Acum că știți mai multe despre preîncărcătoare, să vorbim despre celălalt subiect fierbinte: încărcarea leneșă.

Ce este Lazy Loading?

Ori de câte ori vizitați o nouă pagină web, indiferent dacă este o postare pe blog sau un site static – browserul preia întregul conținut al paginii, apoi servește acel conținut ca o experiență de navigare nativă. În cele mai multe cazuri, sunteți obligat să descărcați întreaga pagină fără a vedea efectiv mai mult decât deasupra faldului.

În timp ce, cu încărcare leneșă, browserul i se spune să încarce (să redea) conținut care este doar în portofoliul utilizatorului. Deci, dacă există fotografii sau videoclipuri sensibile la dimensiuni adăugate la o anumită pagină, aceste fișiere vor fi afișate numai de fiecare dată când ecranul browserului ajunge la acea parte a site-ului..

Și dacă sunteți îngrijorat de problemele potențiale SEO, nu o să fie. Yoast a confirmat asta Google face pagini care folosesc încărcare leneșă, și îl vede ca doar un alt semnal de îmbunătățire a performanței.

Layzr js

Recomandarea mea de a folosi o bibliotecă este Layzr.js – încărcare simplă și eficientă pentru lenjerie! Scriptul este activat și pe pagina de pornire a proiectului, astfel încât să îl puteți vedea performând în timp real. Utilizatorii WordPress pot găsi zeci de plugin-uri de încărcare leneșă în repo-ul pluginului public.

# 4: memorie în cache web

Cache-ul web se bazează pe conceptul de copiere a unei versiuni a unei pagini, care poate fi apoi prezentată utilizatorului în orice moment. Paginile sunt memorate în cache la prima vizită pe pagina unui site web. Atunci când un utilizator nou încearcă să acceseze pagina respectivă, în loc să servească versiunea live, serverul web va afișa versiunea în cache.

Scopul oricărui tip de memorie în cache este de a îmbunătăți performanța site-ului web și de a reduce resursele de back-end necesare. În funcție de soluția de memorie în cache, puteți configura intervale personalizate și alte evenimente bazate pe declanșatori.

cache web

Unele dintre cele mai populare nume din cache-ul web sunt Varnish, Squid și Memcached. Dar fiți sigur că există o mulțime de alte soluții pe piață, mai ales dacă sunteți utilizator WordPress.

De asemenea, puteți lua în considerare înscrierea pentru un CDN.

Ce este un CDN (rețea de livrare de conținut)?

O rețea de livrare de conținut folosește un grup global de servere distribuite pentru a oferi o livrare de conținut incredibil de rapidă. A CDN poate transfera rapid toate tipurile de conținut populare de pe web: video, fotografie, JavaScript, etc. În aceste zile, cea mai mare parte a traficului web trece printr-o formă de CDN..

Unul lucru de reținut despre rețelele de livrare de conținut este că acestea funcționează cel mai bine atunci când sunt utilizate pe un site web cu cerere mare. Așadar, dacă slujești doar câteva mii de vizitatori pe lună, vezi îmbunătățiri notabile s-ar putea dovedi dificil. Cu toate acestea, un CDN este o soluție excelentă pentru îmbunătățirea timpilor de încărcare a site-ului dvs. web, reducerea costului lățimii de bandă, creșterea disponibilității de conținut și consolidarea securității generale..

Dacă nu aveți experiență anterioară cu CDN, vă recomandăm să încercați Cloudflare – oferă un plan gratuit pentru totdeauna și este o platformă minunată pentru a începe să înveți. Și dacă Cloudflare nu respectă așteptările dvs., consultați postarea noastră pentru cei mai buni furnizori CDN gratuite de pe piață.

# 5: AMP (pagini mobile accelerate)

Google Proiect AMP este optimizare mobilă pe steroizi! În esență, AMP îți dezvăluie paginile pentru a obține esențiale pentru a oferi o experiență de încărcare super rapidă, dar și pentru a face citirea conținutului o prioritate. Având în vedere cât de importantă este viteza paginii, puteți acumula curajul de a spune nu la timpii de încărcare aproape instantanee?

Google AMP (pagini mobile accelerate)

Bine, toate acele buzzwords sună minunat, dar cum funcționează AMP de fapt?

AMP este o pagină HTML cu noduri goale, cu anumite limitări pentru ce fel de conținut poate fi afișat. Acest lucru duce la timpuri de încărcare mult mai rapide și performanțe generale datorită limitării executării scripturilor și altele.

JavaScript, de exemplu, nu funcționează cu AMP. Cu excepția cazului în care, desigur, utilizați Biblioteca AMP JS disponibilă pe GitHub. Utilizarea bibliotecii JS vă permite să obțineți anumite rezultate, cum ar fi evitarea blocantelor de anunțuri, dar dacă doriți performanțe adevărate, atunci AMP-ul brut este calea de urmat.

AMP de exemplu

Dacă sunteți utilizator WordPress, atunci în majoritatea cazurilor, adăugarea de AMP pe blogul dvs. se va face cu ajutorul unui plugin. Dar, dacă lucrați cu un site personalizat, adăugarea AMP pentru prima dată vă poate simți un pic provocator.

Aflați AMP de exemplu

Aici e locul AMP de exemplu vine la îndemână. Un proiect lateral la platforma propriu-zisă, acest site detaliază fiecare zgomot și cârlig posibil pentru a fi realizat cu AMP. Fiecare componentă și efect vine cu o demo furnizată, astfel încât să puteți vedea cum ar arăta.

Studii de caz interesante pentru AMP:

  1. Terra conduce vizualizarea mobilă cu AMP
  2. Times of India raportează cu 1,5 ori mai multe venituri
  3. Fastcommerce conduce conversii pentru clienți prin construirea primului AMP

# 6: Testează înainte de a comite

În această zi și vârstă, nu există nicio scuză pentru a nu avea un mediu de înscenare separat pentru proiectul dvs. Majoritatea platformelor de găzduire cloud oferă în mod implicit medii de stadializare, așa că consultați furnizorul dvs. pentru a vedea dacă aveți acces la una.

testarea înainte de a comite

Ce este un mediu de înscenare?

Ei bine, cel mai rapid mod de a explica acest lucru este uitându-te la site-ul tău actual.

Acest site este ceea ce numiți un site de producție – o versiune în timp real a tuturor codurilor, scripturilor și conținutului pe care se bazează site-ul dvs. Un mediu de înscenare în acest context este o copie a site-ului dvs. de producție. Un site fals, dacă vrei. Și în acest mediu de înscenare, puteți efectua modificări sau adăugați noi funcții fără a vă rupe site-ul live.

Mă gândesc întotdeauna la postarea lui Ashley Harpp, Nu pierdeți timpul – Testarea se schimbă înainte de a comite.

Înțelegerea modului în care ne „păcălim” pe noi înșine pentru a evita anumite lucruri este un exemplu principal al modului în care nu dorim să ne asumăm responsabilitatea atunci când facem o greșeală. Cu toate acestea, postarea lui Ashley include, de asemenea, link-uri către instrumente utile pentru crearea unui mediu local de înregistrare.

Testarea nu este atât de înfricoșătoare pe cât pare. Dar este sigur că heck este înfricoșător când ștergeți din greșeală întreaga dvs. bază de date de pe un server de producție!

Declarație de închidere

Optimizarea site-ului dvs. web pentru o experiență mobilă lină nu este atât de dificilă. Tot ce ai nevoie este o mică determinare și aplică de bună voie metodele prezentate în acest post. Este posibil să știți că sunteți deja familiarizați cu lucruri precum memoriile în cache de conținut și încărcarea leneșă, dar ce se întâmplă cu mediile de stocare sau preîncărcătoare?

Sperăm că această postare a scos la lumină starea actuală a optimizării site-urilor mobile. Nu ezitați să lăsați un comentariu sau să vă recomandați soluții suplimentare.

ETICHETE:

  • 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