​Sfaturile unui programator pentru antreprenori: cum sa-ti optimizezi magazinul online

Ionut Staicu este unul dintre cei mai activi programatori din blogosfera romaneasca, autorul a mai multor analize comparative a performantelor site-urilor magazinelor online autohtone, si administrator al devforum.ro, o platforma de discutii dedicata programatorilor. Prin urmare, l-am intrebat ce sfaturi ar acorda unui antreprenor care decide sa investeasca intr-un magazin online si sa ne spuna ce greseli ar trebui sa evite in cazul in care opteaza pentru crearea unui site de la zero in locul unor solutii la cheie, cu abonament lunar.

Scurta introducere tehnica

Inainte de a cere crearea unui site, un antreprenor trebuie sa inteleaga in ce consta acesta, sa inteleaga cateva notiuni tehnice. Intr-un mod cat se poate de superficial, se poate spune ca acestea sunt: gazduirea web, limbajele de programare folosite, imagini si fisiere aditionale.

De regula, structura unui site include mai multe tipuri de fisiere si mai multe limbaje de programare: PHP, HTML, JavaScript, CSS sunt printre cele mai comune. Daca prin HTML (hypertext markup language) se stabileste structura vizuala a unei pagini (aranjarea “casetelor”, imaginilor etc.), CSS (Cascading Style Sheets) este codul prin care defineste pozitionarea elementelor (margini, spatii albe) si stilizarea efectiva (culori, umbre etc.). De cele mai multe ori, cu ajutorul JavaScript, sunt create efectele vizuale (galerii de imagini, elemente interactive etc.) PHP este limbajul prin care sunt programate functiile unui site (de exemplu, cele de filtrare a produselor, modul in care sunt adaugate produsele in baza de date etc.)

Un magazin online este o structura complexa si, implicit, se va folosi de multe fisiere. Fiecare functie genereaza fie o “cerere” catre baza de date, fie “cereri” catre alte fisiere ce includ, la randul lor, alte functii. Dar sunt si fisiere, precum cele CSS, JavaScript sau chiar imagini, ce nu necesita incarcarea in browser mai mult de o singura data (caching - descarcarea fisierelor pe computer sau smartphone si deschiderea lor, in urmatoarele instante, direct de pe suportul local, nu de pe server), iar acesta este un aspect care tine de optimizarea site-ului.

De cele mai multe ori, acest lucru poate fi rezolvat folosind o retea de distributie a continutului (content delvery network sau, prescurtat, CDN), solutie explicata de Ionut Staicu, pe intelesul tuturor, pe blogul sau. Pe scurt insa, “un CDN e bun la mai multe lucruri: reduce incarcarea serverului si poate imbunatati experienta utilizatorului daca este mai aproape de acesta. In plus, daca este un CDN public si sunt incarcate de acolo diverse scripturi folosite pe mai multe site-uri (de exemplu, jQuery), browserul nu va mai trebui sa descarce acest cod suplimentar, cata vreme il are deja in cache.”

In cazul in care site-ul nu e optimizat corespunzator, va continua sa incarce aceleasi fisiere de fiecare data cand utilizatorul va deschide o pagina, chiar si daca a mai intrat pe ea. Acest lucru creste timpul de incarcare si, in cazul in care utilizatorul intra de pe mobil, consuma mult mai rapid banda alocata. Spre exemplu, daca un consumator are un plan de date, de la operatorul de telefonie mobila, de 300 MB lunar, si intra pe un site ale carui pagini “cantaresc” 3 MB fiecare, consuma 10% din banda alocata doar vizitand prima pagina si paginile a inca noua produse.

Viteza de incarcare a site-ului

In urma cu doi ani, Ionut Staicu publica pe blogul sau o analiza a performantelor principalelor magazine online romanesti. In medie, la acea vreme, incarcarea unei pagini a unui astfel de site, de pe mobil, consuma doi megabytes .

“Un site care se incarca mai greu risca sa fie ori abandonat de vizitator, ori sa ramana uitat intr-un tab sau o fereastra de fundal. Cu cat se incarca mai repede, cu atat utilizatorul va fi mai motivat sa ramana, sa citeasca, sa caute si sa cumpere. Chiar daca Romania este printre tarile cu cea mai rapida conexiune la internet, nu toti sunt conectati la o retea gigabit. Nu exista o impartire foarte clara, de genul PC-urile au o retea gigabit, telefoanele au retea 3G sau 4G”, spune acesta.

“Este o greseala profunda sa se plece de la premisa ca daca e desktop, putem sa ii servim zeci de megabytes”.

Ce optimizari trebuie sa ceara antreprenorul

Daca ar exista un top 3 al optimizarilor din punctul sau de vedere, ar arata astfel:

\t
• minimizare & compresie gzip (arhivare) pentru CSS, JavaScript si HTML. In majoritatea cazurilor, asigura o reducere de 100-200 kilobytes (nu pare mult, dar la o medie de 2 MB per pagina, precum cea din exemplul anterior, inseamna 5-10%).

\t
• gazduire web cat mai aproape de utilizatori, pentru a reduce latenta. Latenta este, practic, un timp mort in care utilizatorul asteapta sa se incarce site-ul fara sa vada nimic pe ecran. “Intre un CDN (content delivery network) din San Francisco si un hosting din Bucuresti, il voi prefera pe cel din Bucuresti fara sa stau pe ganduri (desigur, daca site-ul va fi pentru romani)”, spune Staicu.

\t
• Caching agresiv pentru fisierele statice. Comparativ cu impactul initial, al incarcarii primei pagini, caching-ul extrem de agresiv va asigura incarcarea aproape instanta celorlalte pagini.

“Dincolo de timpul efectiv de incarcare mai exista si problema latentei. Cand folosesti 3G sau 4G, la orice request (cerere) catre server, vei avea 100-200 milisecunde latenta. Deci, pe langa dimensiune, ar fi bine sa se aiba in vedere si numarul fisierelor externe”, explica programatorul.

Pe langa toate acestea, mai este si timpul de randare. Dupa ce se incarca toate fisierele, browserele interpreteaza tot codul: structura HTML, regulile CSS, JavaScript etc.

“Poate ca, pe un computer cu procesor Intel i7, cu 16 GB RAM, aceste operatiuni nu se simt (deoarece dureaza doar cateva zeci de milisecunde) dar pe un PC mai vechi, pe un telefon sau o tableta, s-ar putea sa fie vizibile. Prin urmare, este recomandat sa ai cat mai putine reguli CSS, cat mai putine noduri de interpretare a codului si, evident, cat mai putin JavaScript incarcat. Ca idee, cel mai mare magazin online romanesc are un CSS de peste 40.000 linii, in sapte fisiere CSS. Este nevoie de atat cod? Ma indoiesc!”, concluzioneaza acesta.

Implementarea codului

La capitolul bune practici, Ionut Staicu spune ca cea mai potrivita solutie ar fi impartirea in doua parti: codul absolut necesar trebuie sa fie incarcat o data cu site-ul, iar restul sa fie incarcat asincron, atunci cand toate celelalte parti esentiale au fost incarcate.

In cazul unor magazine online foarte mari, se ajunge in situatia in care, in afara de codul absolut necesar, mai e incarcat peste un megabyte de cod Javascript, aproape un megabyte de imagini si inca unul pentru CSS, fara a fi compresat, ceea ce face ca timpul de incarcare sa creasca extrem de mult.

“in plus, pe langa experienta utilizatorului, exista si un impact mai mic pentru server. Sigur, in majoritatea zilelor, asta nu inseamna nimic, dar tind sa cred ca in zilele cu oferte speciale (precum Black Friday), acest trafic suplimentar are o oarecare influenta in timpii morti ai magazinelor, atunci cand site-urile sunt picate”, precizeaza Staicu.

Responsive sau site de mobil dedicat?

“In majoritatea cazurilor? Responsive, dar depinde si de continutul site-ului. Un site de prezentare va avea mult mai multe imagini - implicit o dimensiune mai mare - decat unul de continut (text). In cele mai multe cazuri insa, responsive este mai potrivit. Dincolo de asta, mai este si mentenanta: un singur cod de intretinut, mai putine bug-uri de rezolvat, mai putini programatori etc.”

Optimizarea imaginilor

Imaginile, filmele si reclamele pentru responsive (rearanjarea designului site-ului in functie de rezolutia ecranului) sunt un pic mai dificile, dar nu imposibile, spune programatorul. De obicei, aceste resurse sunt si printre cele care ocupa mai mult spatiu si, prin urmare, cresc considerabil timpii de incarcare.

“Pentru imagini, s-a introdus relativ recent atributul ‘srcset’. Pe scurt, poti specifica mai multe imagini in cadrul unui singur tag ‘img’, iar browserul va afisa imaginea potrivita in functie de latimea disponibila. Pentru filme, solutia e un pic mai speciala, dar functioneaza fara probleme.

Apoi, am descoperit o solutie foarte ingenioasa pentru dimensiunea (in KB) a imaginilor: JPEG-uri supradimensionate la o calitate scazuta. Adica, daca ai nevoie de o imagine de 400 x 200 pixeli, folosesti o imagine de 800 x 400 pixeli, dar comprimata la 10-20%. Sigur, artefactele vor fi prezente. Dar daca imaginea este micsorata din CSS cu 50% (astfel incat sa ajunga la dimensiunea dorita initial), aceste artefacte nu vor fi vizibile. In plus, imaginea va avea o dimensiune mai mica decat ar fi avut in cazul initial.”

Ce ar trebui sa ceara un dezvoltator? “Profesionalism din partea programatorilor. In plus, ar trebui sa fie deschis si spre optimizari, nu doar spre profit”, spune Staicu.