Te-ai asigurat că pagina ta web funcționează impecabil pe telefoanele mobile?
Știai că Google a implementat o nouă abordare, cunoscută sub numele de Mobile-First?
Un număr tot mai mare de utilizatori preferă să navigheze și să facă achiziții online folosind dispozitivele mobile, renunțând la computerele desktop.
Designul web adaptabil (responsive) a permis crearea de site-uri funcționale pe orice fel de platformă. Totuși, designul adaptabil este doar o parte din strategiile de optimizare a experienței utilizatorului (UX) pe mobil.
Pentru o optimizare reală a performanței, este necesar să analizezi și alte opțiuni.
De aceea, se pune un accent deosebit pe construirea site-ului tău având în vedere în primul rând experiența utilizatorilor de mobil. În termeni simpli, „mobile-first” înseamnă că designul și conținutul tău sunt optimizate inițial pentru vizitatorii care utilizează telefoane mobile.
Cu toate acestea, acest articol nu se referă la crearea unui site complet nou. În schimb, vom analiza câteva principii fundamentale de design pentru dispozitive mobile și vom discuta despre aspectele tehnice esențiale pentru a îmbunătăți experiența utilizatorilor tăi de mobil.
#1: Designul orientat spre mobil
Inițial, web-ul a fost conceput în principal pentru a servi utilizatorii de computere desktop. Tehnologiile web actuale se prezintă cel mai bine pe ecrane mari și generoase. Însă, având în vedere popularitatea smartphone-urilor și a altor dispozitive mobile, este timpul să ne adaptăm la conceptul de design „mobile-first”.
Pe lângă designul adaptabil, ce alte elemente de design ar trebui să implementezi în crearea paginilor tale web pentru mobil?
- Prioritizarea. Spațiul de afișare pe ecranele mobile este limitat. De asemenea, ecranele mobile prezintă conținutul pe verticală, spre deosebire de structura orizontală a desktop-urilor. Acest lucru înseamnă că trebuie să prioritizezi elementele. Ce aspecte sunt cele mai importante pentru utilizatori? Butoanele de tip CTA (call-to-action) sunt ușor de identificat pentru utilizatorii de mobil?
- Conținutul pe primul loc. Culoarea vine după. Designul pentru mobil oferă oportunități interesante, diferite de cele ale designului pentru desktop. Prioritizează conținutul. Asigură-te că textul și celelalte elemente de conținut sunt ușor de citit și accesibile. Ecranele mobile tolerează mai greu elementele vizuale care distrag atenția.
- Navigare simplă. Pe un dispozitiv mobil, nu se poate face clic oriunde pentru a reveni la pagina de start. Cu excepția cazului în care planifici acest tip de navigare de la început. Și ar trebui să o faci. Folosește widget-uri „Scroll-to-Top” (derulare înapoi la început) și anteturi statice ori de câte ori este posibil.
Cel mai bun mod de a verifica dacă designul tău este corect este să îți vizitezi pagina web folosind propriul telefon mobil (eu fac asta mereu!). Examinează cu atenție modul în care elementele funcționează împreună și cum arată.
Când stai la o cafenea sau aștepți un zbor, poți ruga politicos pe cineva să îți verifice site-ul. Apoi, ascultă feedback-ul lor. Vei fi surprins de modul în care oamenii percep experiența utilizatorului pe site-ul tău.
#2: Optimizarea resurselor: imagini, iconițe, etc.
Cât de des folosești elementele vizuale pentru a-ți satisface preferințele personale, în loc de a te concentra pe UX? Se întâmplă frecvent și, dacă îți dorești să fii creativ, este important să înțelegi cum funcționează optimizarea media.
Elementele vizuale, precum fotografiile, ilustrațiile, pictogramele și videoclipurile, consumă cea mai mare parte din lățimea de bandă a paginilor web.
Dimensiunea medie a unei pagini web în 2018, listată pe industrii și țări.
Deși nu există o dimensiune standard pentru o pagină web, este logic ca o dimensiune mai mică a paginii să însemne timpi de încărcare mai rapizi.
Cum poți reduce dimensiunea resurselor vizuale cu câțiva KB sau chiar MB?
- Redimensionează imaginile. Pare simplu, nu-i așa? Cu toate acestea, de multe ori am întâlnit site-uri mobile care încărcau imagini de 1980 x 1200 pixeli. Imaginile la dimensiuni mari ar trebui oferite ca link-uri alternative, atunci când este cazul. Redimensionarea poate reduce dimensiunea totală a unei imagini cu până la 80%, în funcție de dimensiunile dorite. Pentru dispozitivele mobile, nu este necesară o lățime mai mare de 600-700 pixeli.
- Redu dimensiunea fișierelor prin compresie. Compresia/optimizarea imaginilor presupune folosirea unui software pentru a reduce numărul de culori dintr-o imagine. Acest lucru se poate face fără a compromite calitatea originală a fotografiilor, dar reducând semnificativ dimensiunea fișierului. Dacă ai nevoie de ajutor pentru comprimarea imaginilor, îți recomandăm analiza noastră detaliată a instrumentelor de compresie a imaginilor.
- Explorează formate de fișiere alternative. Toată lumea cunoaște formatele PNG și JPEG. Acestea sunt standardele de facto pentru imagini pe web. Dar, lucrurile se schimbă. Cea mai recentă tehnologie pentru distribuția imaginilor digitale se axează pe WebP și formatele SVG. SVG-urile, de exemplu, se pot redimensiona automat la dimensiunea ecranului, reducând numărul de resurse necesare pentru încărcarea unor elemente vizuale specifice.
Optimizarea experienței utilizatorului pentru mobil este un proces care necesită atenție. Un design realizat din impuls înseamnă că nu iei în considerare efectele pe termen lung ale deciziilor tale. O abordare atentă te ajută să construiești de la început, având în vedere utilizatorii de telefonie mobilă.
Important: Pentru un design intuitiv pe mobil, nu reutiliza aceleași elemente vizuale ca pe desktop. Eliminarea unor imagini de fundal și înlocuirea lor cu fundaluri colorate pe mobil nu va afecta negativ experiența utilizatorului. Caută mereu modalități de a economisi lățime de bandă, chiar și o cantitate mică.
#3: Pre-încărcare și încărcare leneșă (lazy loading)
Este necesar să încarci toate resursele media pe pagini care necesită mult timp pentru a fi citite? Poate ajuta să preîncarci pagini externe pentru utilizatorii care le vor vizita?
Să analizăm mai întâi preîncărcările, cunoscute și sub numele de sugestii ale browserului.
Preîncărcările permit unei pagini să sugereze browserului posibile acțiuni de navigare. De exemplu, un utilizator ar putea trece de la pagina A la pagina B.
Prin preîncărcare, utilizatorul poate începe să încarce pagina B înainte de a face clic pe linkul de navigare din pagina A.
Reține că preîncărcarea nu funcționează întotdeauna, decizia finală aparținând browserului. Factori precum tipul dispozitivului și lățimea de bandă sunt luați în considerare individual.
Care sunt cele mai comune tipuri de preîncărcare?
- Prefetch. Acest tip sugerează că o anumită adresă URL este foarte probabil să fie următoarea alegere de navigare. Dacă browserul acceptă solicitarea, va stoca în cache resursele importante ale paginii, ceea ce va duce la o încărcare mult mai rapidă a acesteia.
- Prerender. În timp ce tipul anterior preia doar anumite resurse, pre-redarea va stoca în cache întreaga pagină. Întregul conținut randat este stocat în memoria dispozitivului utilizatorului.
- DNS-Prefetch. Această metodă va rezolva DNS-ul specificat. Astfel, dacă un utilizator face o anumită acțiune pe site-ul tău, vei reduce timpul necesar pentru navigare.
- Preconnect. La fel ca metoda de mai sus, dar stabilește și conexiuni, precum și strângeri de mână cu conexiuni TCP și TLS.
Care sunt câteva exemple de cod pentru preîncărcare?
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Deoarece preîncărcările folosesc etichete HTML dinamice, poți preîncărca elemente precum Google Fonts sau crea un script personalizat pentru a preîncărca elemente JavaScript în WordPress.
În plus, dacă utilizezi WordPress, WP Rocket te poate ajuta în acest sens pentru a-ți optimiza site-ul.
Acum că știi mai multe despre preîncărcare, să discutăm despre un alt subiect important: încărcarea leneșă.
Ce este Lazy Loading?
Când vizitezi o pagină web nouă, fie că este un articol de blog sau un site static, browserul preia întregul conținut al paginii și îl prezintă ca o experiență nativă de navigare. În multe cazuri, ești obligat să descarci întreaga pagină, chiar dacă vizualizezi doar o porțiune a acesteia.
În cazul încărcării leneșe, browserul este instruit să încarce (să redea) conținutul care se află doar în fereastra de vizualizare a utilizatorului. Astfel, dacă pe o pagină sunt adăugate fotografii sau videoclipuri mari, aceste fișiere vor fi afișate doar atunci când ecranul browserului ajunge la acea parte a paginii.
Dacă ești îngrijorat de potențialele probleme de SEO, nu trebuie să-ți faci griji. Yoast a confirmat că Google redă paginile care folosesc încărcare leneșă și o consideră un semnal de îmbunătățire a performanței.
Recomand utilizarea bibliotecii Layzr.js — o soluție simplă și eficientă pentru încărcarea leneșă a imaginilor! Scriptul este activ și pe pagina de start a proiectului, astfel încât să vezi cum funcționează în timp real. Utilizatorii WordPress pot găsi numeroase plugin-uri pentru încărcare leneșă în depozitul public de plugin-uri.
#4: Cache web
Cache-ul web se bazează pe conceptul de a copia o versiune a unei pagini, care poate fi apoi afișată utilizatorului. Paginile sunt stocate în cache la prima vizită. Când un utilizator încearcă să acceseze pagina respectivă, în loc să difuzeze versiunea live, serverul web va afișa versiunea stocată în cache.
Scopul oricărui tip de stocare în cache este de a îmbunătăți performanța paginii și de a reduce resursele back-end necesare. În funcție de soluția de stocare în cache, poți configura intervale personalizate și alte evenimente bazate pe declanșatoare.
Câteva nume populare în domeniul memoriei cache web sunt Varnish, Squid și Memcached. Dar, există o multitudine de alte soluții pe piață, în special dacă ești un utilizator WordPress.
De asemenea, poți lua în considerare un abonament la un CDN.
Ce este un CDN (Content Delivery Network)?
O rețea de livrare de conținut utilizează un grup global de servere distribuite pentru a oferi livrare de conținut foarte rapidă. Un CDN poate transfera rapid toate tipurile de conținut popular de pe web: video, fotografii, JavaScript etc. În prezent, majoritatea traficului web trece printr-o formă de CDN.
Reține că rețelele de livrare de conținut funcționează cel mai bine atunci când sunt utilizate pe site-uri web cu trafic mare. Dacă ai doar câteva mii de vizitatori pe lună, îmbunătățirile vizibile pot fi greu de observat. Cu toate acestea, un CDN este o soluție excelentă pentru a reduce timpii de încărcare, costul lățimii de bandă, pentru a crește disponibilitatea conținutului și pentru a consolida securitatea generală.
Dacă nu ai experiență anterioară cu CDN-urile, îți recomandăm să încerci Cloudflare – oferă un plan gratuit permanent și este o platformă excelentă pentru începători. Dacă Cloudflare nu corespunde așteptărilor tale, consultă lista noastră de furnizori CDN gratuiti de pe piață.
#5: AMP (Pagini Mobile Accelerate)
Proiectul AMP de la Google reprezintă optimizarea mobilă dusă la extrem! Practic, AMP reduce paginile pentru a oferi o experiență de încărcare extrem de rapidă și pentru a prioritiza lizibilitatea conținutului. Având în vedere cât de importantă este viteza de încărcare, poți refuza timpii de încărcare aproape instantanee?
Toate aceste cuvinte la modă sună bine, dar cum funcționează AMP?
AMP este o pagină HTML simplă, cu anumite limitări în ceea ce privește conținutul care poate fi afișat. Aceste limitări duc la timpi de încărcare mult mai rapizi și la o performanță generală îmbunătățită, deoarece restricționează execuția scripturilor și a altor elemente.
De exemplu, JavaScript nu funcționează cu AMP, cu excepția cazului în care utilizezi Biblioteca AMP JS disponibilă pe GitHub. Folosirea bibliotecii JS permite anumite rezultate, cum ar fi evitarea blocajelor de anunțuri, dar, pentru performanțe cu adevărat rapide, AMP brut este alegerea ideală.
Studii de caz interesante pentru AMP:
#6: Testează înainte de a publica
În prezent, nu există nicio scuză pentru a nu avea un mediu de testare separat pentru proiectul tău. Majoritatea platformelor de găzduire cloud oferă medii de testare în mod implicit, deci verifică dacă ai acces la unul.
Ce este un mediu de testare?
Cea mai simplă modalitate de a explica este să te uiți la site-ul tău live actual.
Acest site este ceea ce numim site de producție – o versiune în timp real a codului, scripturilor și conținutului pe care se bazează site-ul tău. Un mediu de testare, în acest context, este o copie a site-ului de producție. Un site „fals”, dacă vrei. În acest mediu, poți face modificări sau adăuga funcții noi fără a afecta site-ul live.
Îmi amintesc mereu de articolul lui Ashley Harpp, Nu pierde timpul – Testează modificările înainte de a le publica.
Observația ei despre modul în care ne „păcălim” pentru a evita anumite sarcini este un exemplu bun despre cum nu vrem să ne asumăm responsabilitatea atunci când facem o greșeală. Articolul lui Ashley conține și link-uri către instrumente utile pentru a configura un mediu de testare local.
Testarea nu este atât de înfricoșătoare pe cât pare. Dar devine înfricoșătoare atunci când ștergi accidental întreaga bază de date de pe un server de producție!
Concluzie
Optimizarea site-ului tău pentru o experiență mobilă fluidă nu este atât de complicată. Ai nevoie de puțină determinare și să aplici metodele prezentate în acest articol. Probabil, ești familiarizat cu aspecte precum stocarea în cache a conținutului și încărcarea leneșă, dar ce părere ai de mediile de testare sau preîncărcări?
Sperăm că acest articol a clarificat situația actuală a optimizării site-urilor mobile.