Te-ai asigurat că site-ul tău este compatibil cu dispozitivele mobile?
Știați că Google a introdus o nouă politică numită Mobile-First?
Din ce în ce mai mulți utilizatori de web se îndepărtează de computerele desktop și, în schimb, navighează și cumpără folosind dispozitivele lor mobile.
Designul web responsiv a făcut posibilă crearea de site-uri care funcționează pe toate platformele la un nivel egal. Dar, chiar și atunci, designul responsive este doar o fracțiune din strategiile de optimizare UX pentru mobil.
Dacă doriți o adevărată optimizare a performanței, va trebui să luați în considerare și alte alternative.
Acesta este motivul pentru care se pune un accent atât de puternic pe construirea site-ului dvs. ca a experiență pe primul loc pe mobil. În termeni simpli, mobile-first î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, ne vom uita la câteva principii fundamentale de proiectare pentru dispozitive mobile. Și petreceți ceva timp concentrându-vă pe aspecte tehnice pentru optimizarea experienței utilizatorului pentru utilizatorii dvs. de telefonie mobilă.
Cuprins
# 1: Proiectare având în vedere mobil
Web-ul este construit în mare parte pe principiul de a servi utilizatorilor de desktop. Web-ul real, progresele reale ale tehnologiilor, este cel mai bine afișat pe un afișaj frumos pe tot ecranul. Însă, smartphone-urile și alte dispozitive mobile sunt un lucru, și este timpul să începem să ne adaptăm la conceptul de design pe mobil mai întâi.
În afară de designul responsiv de bun simț, ce alte elemente de design ar trebui să implementați în design-urile dvs. web pentru mobil?
- Prioritizare. Ecranele mobile sunt limitate la spațiul de afișare disponibil. De asemenea, ecranele mobile prezintă conținut într-o manieră verticală, spre deosebire de o structură mult mai largă – orizontală – pentru desktop-uri. Aceasta înseamnă că trebuie să proiectați folosind prioritizarea. Ce elemente sunt de cea mai mare importanță să vadă utilizatorii? Dacă există butoane CTA, cât de ușor este să le vezi pentru utilizatorul mobil?
- Conținutul în primul rând. Culoare secundă. Puteți face câteva lucruri interesante cu designul mobil, dar cu siguranță nu în domeniul designului desktop. Așadar, dați loc mai întâi conținutului. Faceți copia dvs. și alte părți de conținut ușor de citit și accesibile. Un ecran mobil este mult mai puțin îngăduitor cu elementele vizuale care distrag atenția.
- Navigare ușoară. Pe un dispozitiv mobil, nu puteți să faceți clic oriunde și să vă întoarceți la pagina de pornire. Cu excepția cazului în care, desigur, planificați acest tip de navigare din timp. Și ar trebui. Experimentați cu widget-uri Scroll-to-Top, dar și cu anteturi lipicioase fără întreruperi ori de câte ori este posibil.
Cel mai bun mod de a verifica dacă faceți acest lucru corect este să vă folosiți telefonul (eu o fac tot timpul!) și să vă vizitați site-ul. Faceți o examinare amănunțită a modului în care lucrurile se simt și se desfășoară împreună.
Dacă stai într-o cafenea sau aștepți într-un zbor într-un aeroport, împinge pe cineva pe umăr și roagă-i politicos să verifice site-ul tău în locul tău. Apoi, stați pe loc și ascultați feedback-ul lor. De cele mai multe ori te vei surprinde cu modul în care oamenii percep experiența utilizatorului site-ului tău.
#2: Optimizarea resurselor; imagini, icoane etc.
Cât de des te trezești să folosești elementele vizuale de dragul preferințelor personale și nu de UX? Se întâmplă și, dacă vrei să fii 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ă pe paginile web.
Dimensiunea medie a paginii web în 2018. Listate după industrii și diferite țări.
Deși nu există o dimensiune stabilită a paginii web pe care trebuie să o îndeplinească toată lumea, este de bun simț că dimensiunea mai mică a paginii web este egală cu timpi de încărcare mai rapidi.
Deci, cum poți tăia niște KB-uri sau chiar MB-uri suplimentare din conținutul tău vizual?
- Redimensionați imaginile dvs. Sună simplu, nu? Ei bine, nu pot socoti de câte ori am răsfoit un site mobil doar pentru a avea imagini de 1980 x 1200 încărcate în fundal. În schimb, fotografiile la dimensiune completă ar trebui să fie furnizate ca linkuri 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 pentru a depăși cel mult intervalul 600-700px.
- Reduceți dimensiunea fișierului cu compresie. Compresia/optimizarea imaginii este procesul de utilizare a unui software terță parte pentru a reduce numărul de culori prezente într-o imagine. Acest lucru se poate face într-o măsură în care fotografiile dvs. să nu-și piardă calitatea înnăscută, dar pot avea dimensiunea fișierului redusă drastic. Dacă aveți nevoie de ajutor pentru comprimarea imaginilor, nu căutați mai departe decât rezumatul nostru complet de instrumente de comprimare a imaginilor.
- Explorați formate de fișiere alternative. Toată lumea a auzit de formatele de fișiere PNG și JPEG. La urma urmei, acestea sunt standardele de facto ale imaginii de pe web. Dar nu pentru mult timp. Cea mai recentă și mai bună tehnologie în livrarea imaginilor digitale se învârte în jurul WebP și formate de fișiere SVG. SVG-urile, de exemplu, pot automat scala la dimensiunea ecranuluireducând numărul de resurse necesare pentru încărcarea unor componente vizuale specifice.
Optimizarea experienței utilizatorului pentru dispozitivul mobil este doar un lucru atent. Proiectarea din 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 având în vedere utilizatorii de telefonie mobilă de la zero.
Profund: În conformitate cu conceptul de design mobil intuitiv, nu trebuie să refolosiți aceleași componente vizuale pe design-urile mobile. Eliminarea câtorva imagini de fundal și înlocuirea lor cu fundaluri colorate — pe mobil — nu va dăuna experienței utilizatorului. Căutați întotdeauna modalități de a economisi 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 pagini care necesită o perioadă semnificativă de timp pentru a le citi? Și, poate ajuta să redați pagini externe înaintea utilizatorilor care le vizitează?
Să ne uităm mai întâi la preîncărcările, cunoscute și sub numele de sugestii de browser.
Preîncărcările sunt modalități prin care o pagină poate spune browserului despre oportunitățile potențiale de navigare. De exemplu, un utilizator ar putea vizita Pagina B din Pagina A.
Cu preîncărcare, utilizatorul poate reda Pagina B înainte de a face clic pe linkul de navigare din Pagina A.
Rețineți că preîncărcarea nu funcționează întotdeauna și că rămâne la latitudinea browserului să ia decizia finală. Factorii precum tipul dispozitivului și lățimea de bandă sunt cântăriți individual.
Care sunt cele mai comune tipuri de preîncărcare?
- Preluare. Acest tip sugerează că o anumită adresă URL este cel mai probabil să fie următoarea alegere de navigare. Și, dacă browserul acordă cererea, atunci va stoca automat în cache resursele importante ale paginii, ceea ce, la rândul său, face ca următoarea pagină să se încarce mult mai rapid.
- Predare. În timp ce tipul de mai sus preia doar anumite resurse, pre-rendarea va stoca în cache întreaga pagină. Tot conținutul redat este stocat în memoria dispozitivului utilizatorilor.
- DNS-Prefetch. Preluarea DNS va rezolva DNS-ul specificat și nimic altceva. Drept urmare, dacă un utilizator face o anumită „întorsătură” pe site-ul dvs., în esență reduceți timpul necesar pentru a naviga.
- Preconectare. 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?
<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, puteți preîncărcați conținut precum Google Fonts sau creați un script personalizat pentru preîncărcarea elementelor JavaScript în WordPress.
BTW, dacă utilizați WordPress atunci WP Rocket vă poate ajuta cu asta pentru a vă supraalimenta site-ul.
Acum că știți mai multe despre preîncărcare, să vorbim despre celălalt subiect fierbinte: încărcarea leneșă.
Ce este Lazy Loading?
Ori de câte ori vizitați o pagină web nouă, fie că este o postare pe blog sau un site static, browserul preia întregul conținut al paginii și apoi servește acel conținut ca experiență nativă de navigare. În cele mai multe cazuri, sunteți forțat să descărcați întreaga pagină fără a vedea de fapt mai mult decât deasupra pliului.
În timp ce în cazul încărcării leneșe, browserului i se spune să încarce (radă) conținut care se află numai în fereastra de vizualizare a utilizatorului. Deci, dacă sunt adăugate fotografii sau videoclipuri sensibile la dimensiunea unei anumite pagini, acele fișiere se vor afișa numai ori de câte ori ecranul browserului dvs. ajunge în acea parte a site-ului.
Și dacă ești îngrijorat de potențiale probleme de SEO, nu fi. Yoast a confirmat asta Google redă pagini care utilizează încărcare lenerăși îl vede doar ca un alt semnal de îmbunătățire a performanței.
Recomandarea mea pentru utilizarea unei biblioteci este Layzr.js — încărcare leneșă simplă și eficientă pentru imaginile dvs.! Scriptul este activat și pe pagina de pornire a proiectului, astfel încât să puteți vedea cum funcționează în timp real. Utilizatorii WordPress pot găsi zeci de pluginuri cu încărcare leneșă în depozitul public de pluginuri.
#4: Cache web
Cacheul web se bazează pe conceptul de copiere a unei versiuni a unei pagini, care poate fi apoi prezentată utilizatorului în orice moment. Paginile sunt stocate în cache la prima vizită la pagina unui site web. Atunci când un utilizator nou î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 site-ului web și de a reduce resursele back-end necesare. În funcție de soluția de stocare în cache, puteți configura intervale personalizate și alte evenimente bazate pe declanșare.
Unele dintre cele mai populare nume în memoria cache 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 (Content Delivery Network)?
O rețea de livrare de conținut utilizează un cluster global de servere distribuite pentru a oferi livrarea 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 prezent, majoritatea traficului web-urilor trece printr-o formă de CDN.
Singurul lucru de reținut despre rețelele de livrare de conținut este că funcționează cel mai bine atunci când sunt utilizate pe un site web cu cerere mare. Așadar, dacă deserviți doar câteva mii de vizitatori pe lună, observarea unor îmbunătățiri vizibile 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., reducerea costului lățimii de bandă, creșterea disponibilității conținutului și consolidarea securității generale.
Dacă nu aveți experiență anterioară cu CDN-urile, vă recomandăm să încercați Cloudflare — oferă un plan gratuit pentru totdeauna și este o platformă excelentă pentru a începe să înveți. Și dacă Cloudflare nu se ridică la înălțimea așteptărilor tale, consultă postarea noastră pentru cei mai buni furnizori de CDN gratuit de pe piață.
#5: AMP (Pagini mobile accelerate)
de la Google Proiect AMP este optimizarea mobilă pe steroizi! În esență, AMP reduce paginile dvs. pentru a oferi o experiență de încărcare super-rapidă, dar și pentru a face ca lizibilitatea conținutului să fie o prioritate. Având în vedere cât de importantă este viteza paginii, puteți să vă faceți curajul să spuneți nu timpilor de încărcare aproape instantanei?
Bine, toate aceste cuvinte la modă sună grozav, dar cum funcționează AMP?
AMP este o pagină HTML simplă, cu anumite limitări pentru ce tip de conținut poate fi afișat. Acest lucru duce la timpi de încărcare mult mai rapidi și la performanță generală din cauza limitării pentru executarea scripturilor și altele.
JavaScript, de exemplu, nu funcționează cu AMP. Dacă, desigur, nu utilizați Biblioteca AMP JS disponibilă pe GitHub. Folosirea bibliotecii JS vă permite să obțineți anumite rezultate, cum ar fi evitarea blocajelor de anunțuri, dar dacă doriți performanță adevărată, atunci AMP brut este calea de urmat.
Studii de caz interesante pentru AMP:
#6: Testează înainte de a te angaja
În zilele noastre, nu există nicio scuză pentru a nu avea un mediu de punere în scenă separat pentru proiectul dvs. Majoritatea platformelor de găzduire în cloud oferă în mod implicit medii de pregătire, așa că verificați cu furnizorul dumneavoastră pentru a vedea dacă aveți acces la unul.
Ce este un mediu de scenă?
Ei bine, cel mai rapid mod de a explica acest lucru este să vă uitați la site-ul dvs. actual live.
Acest site este ceea ce numiți un site de producție – o versiune în timp real a întregului cod, scripturi și conținut pe care se bazează site-ul dvs. Un mediu de pregătire în acest context este o copie a site-ului dvs. de producție. Un site fals, dacă vrei. Și în acest mediu de organizare, puteți face modificări sau adăuga funcții noi fără a vă distruge site-ul live.
Mă gândesc mereu la postarea lui Ashley Harpp, Nu pierde timpul – Testează modificările înainte de a te angaja.
Parerea ei despre modul în care ne „păcălim” pentru a evita anumite lucruri este un exemplu excelent al modului în care nu vrem să ne asumăm responsabilitatea atunci când facem o greșeală. Cu toate acestea, postarea lui Ashley include și link-uri către instrumente utile pentru configurarea unui mediu de organizare local.
Testarea nu este atât de înfricoșătoare pe cât pare. Dar cu siguranță este înfricoșător când ștergeți din greșeală întreaga bază de date de pe un server de producție!
Declarație de încheiere
Optimizarea site-ului dvs. pentru o experiență mobilă fluidă nu este chiar atât de dificilă. Tot ce aveți nevoie este puțină determinare și aplicați de bunăvoie metodele prezentate în această postare. Sunt șanse ca sunteți deja familiarizați cu lucruri precum stocarea în cache a conținutului și încărcarea leneră, dar cum rămâne cu mediile de pregătire sau preîncărcările?
Sperăm că această postare a aruncat puțină lumină asupra stării actuale a optimizării site-urilor mobile.