Cum afli ca ai nevoie de optimizare site pentru mobil

Zilele trecute ma uitam in rapoartele din Google Analytics si am constatat ca accesarea site-ului de pe dispozitivele mobile (smartphone si tablete) a crescut constant, dar cu o rata mai mica decat anul trecut. Poti vedea mai jos ca aproape 18% dintre utilizatori intra pe site de pe smartphone.  Aceasta cifra depinde si de grupul tinta al site-ului, in alte rapoarte am vazut si 37% vizite.

Aceste dispozitive au devenit indispensabile, peste 85% din utilizatori afirma ca smartphone-ul a devenit o parte centrala a vietii lor de zi cu zi. Consumatorii utilizeaza dispozitivele mobile pentru conectivitate si continut. Acestia doresc sa-si imbunatateasca experienta de cautare si consum a continutului, dar multe site-uri nu sunt inca pregatite.

Apoi mi-am adus aminte ca acum  o luna Google a anuntat urmatoarele:

Începând cu 21 aprilie, vom extinde utilizarea prietenoasă pe dispozitivele mobile ca un semnal în clasament. Această modificare va afecta căutările de pe dispozitivele mobile în toate limbile din întreaga lume și va avea un impact semnificativ în rezultatele căutării. Prin urmare, utilizatorii vor găsi mai ușor și vor obține rezultate relevante de căutare, de înaltă calitate, care sunt optimizate pentru dispozitivele lor.

Ce e de facut? Mai intai afla cum se afiseaza site-ul tau pe mobil, apoi treci la optimizare. Astfel site-ul va fi pregatit pentru marea schimbare de pe 21 aprilie si nu vei cadea …  din primele pagini ale rezultatelor cautarii in Google.

Pagina Google, dedicata optimizarii pe dispozitive mobile vine cu cateva recomandari si explicatii. In continuare iti fac si eu cateva recomandari.

1. Verifica daca site-ul tau se afiseaza corect pe mobil

La testul facut pe wptut.ro am primit raspuns pozitiv, dar totusi experienta nu este grozava pe prima pagina, dupa cum vezi in imaginea de mai jos.

Site-ul este responsive (receptiv), continutul se afiseaza pe verticala, pana acum e bine. Imaginile animate din partea de sus se vad pe mobil (sunt de tip HTML5) dar nu dau valoare continutului si ingreuneaza incarcarea paginii. Apoi meniul ramane clasic, nu specific pentru mobil – restrans si senzitiv la atingerea cu degetul.

Atentie! Toate animatiile de tip Flash nu se vor vedea pe mobil deoarece aplicatia de smartphone nu intelege Flash ci HTML5.

Tot vin sarbatorile de Pasti, e timpul sa fac curatenie 🙂

2. Schimbarea temei sau utilizarea unui plugin?

Daca site-ul tau nu este responsive, recomand schimbarea temei. Acest proces incepe cu un backup al site-ului, ca sa nu ai surprize neplacute. Apoi se instaleaza tema responsive si se activeaza. In general procesul nu e foarte lin dar nu trebuie sa intri in panica, totul se rezolva.

De cele mai multe ori dispare meniul, pentru ca fiecare tema are definita o anumita locatie a meniului. tot ce trebuie sa faci este sa te duci la Aspect (Appearance) -> Meniu (Menus), sa localizezi meniul principal si sa bifezi locatia, apoi salvezi.

Surprize poti avea si cu widget-urile utilizate mai ales in bara laterala. Tot din Aspect alegi Widgets si cauti Widget-urile inactive. Le tragi cu mouse-ul in pozitia initiala si gata, ai rezolvat problema.

Alta problema ar fi de conflict cu plugin-urile (module), caz in care apar, in partea de sus, niste erori sau atentionari. Aici nu stiu ce raspuns sa-ti dau pana nu vad eroarea, dar se poate gasi o solutie.

Plugin-uri care sa transforme site-ul intr-unul prietenos pe mobil nu am folosit, dar am gasit pe WordPress.org urmatoarele module compatibile cu versiunea WordPress 4.1.1:

WPtouch Mobile Plugin – iti face site-ul prietenos pe mobil doar cu cateva click-uri.

WordPress Mobile Pack – permite sa-ti „impachetezi” continutul site-ului intr-o platforma web pentru dispozitive mobile.

WP Mobile Edition – alta varianta de a-ti face site-ul usor de utilizat pe mobil.

N-am idee daca apar conflicte in urma utilizarii acestor module, asa ca nu le pot recomanda ci doar semnaliza ca exista.

3. Optimizare site pentru mobil

Daca ai tema responsive si totul se afiseaza corect pe mobil, testeaza viteza de incarcare a site-ului. Intotdeauna mai ai ceva de imbunatatit.

Optimizeaza imaginile – pe multe site-uri vad imagini imense, redimensionate din HTML, care aparent sunt mici, dar ele sunt incarcate la dimensiunea reala. Rezultatul: site-ul se incarca greu de oriunde e accesat. Optimizarea imaginilor inseamna:

• redimensionarea imaginii inainte de a fi incarcata in WordPress
• gasirea formatului optim pentru o anumita imagine – .jpg, .png sau .gif
• reducerea calitatii pana la pragul in care devine vizibil acest lucru

Toate acestea duc la o marime in Kb mica, ceea ce mareste viteza de incarcare a paginii web. O sa-ti dau mai multe amanunte intr-un articol viitor.

Acorda prioritate continutului vizibil (above the folder) – adica tot continutul din partea de sus sa poata fi citit. Eu am acel slider care nu este relevant pentru continut din punctul de vedere  al robotului google, iar pe mobil ce sa mai zic. Am  modificat, am testat si ce a iesit vezi mai jos:

wptut.ro pe laptop

wptut.ro pe mobil

Modificarile facute in setarile slider-ului au adus un plus de viteza.

Pentru dispozitive mobile am ascuns slider-ul  si acum utilizatorul vede destul de mult din continut.

Transforma paginile site-ului in pagini statice pentru ca intotdeauna o pagina statica se incarca instant. Cele dinamice executa comenzi PHP si MySQL si au o latenta pana afiseaza continutul.

Plugin-urile cele mai utilizate sunt:

W3 Total Cache – creat pentru a imbunatati experienta utilizatorului si viteza de incarcare a paginii.

WP Super Cache – acest modul tine cont de activitatea vizitatorului pe site; daca nu lasa comentarii sau nu se autentifica serveste pagina cache.

WP Fastest Cache – de obicei configurarile pentru modulele cache sunt stufoase. Acest modul are o configurare mai simpla.

Toate aceste module de cache sunt gratuite si te ajuta la imbunatatirea performantei site-ului. Iti recomand sa instalezi doar unul din aceste module, poti sa testezi care ti se potriveste.

Mai sunt multe de spus despre optimizarea unui site, doar ca eu ma opresc aici si revin intr-un articol viitor. Daca te-a ajutat sau ti s-a parut interesant ce-ai aflat, te rog sa spui si altora printr-un share sau like.