Alex Mihaileanu

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

Imagine principala
​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.

Parallax

Vizualizari
296
Conţinut
Parerea ta despre articol
Adauga comentariu
poza de profil
Ce antreprenor? Nu vad de ce ar trebui sa stie un antreprenor toata tehnicalitatea asta insiruita aici. Daca citeste unul care nu vine din zona asta I.T., va crede ca-i obligatoriu sa invete HTML, CSS, PHP, JAVASCRIPT in loc sa angajeze om pentru asta.
poza de profil
Articol scris de un programator E normal sa fie mai tehnic ;) Dar sfaturile sunt foarte utile pentru a explica eventualele probleme ce pot fi intalnite atunci cand lansezi un site. Ca antreprenor poate ar trebuia macar sa te gandesti la experienta clientilor pe site-ul tau apoi sa transferi grijile tale celui care-ti face site-ul. Si ar fi bine sa stii ce acume sa urmaresti sic e sa ceri
poza de profil
Hell no ... 1) nu am nicio treaba cu autorul articolului, dar astea nu prea sunt sfaturi de dat unui client. pe client nu-l intereseaza ca pui gzip sau folosesti un layer de caching. pe el il intereseaza sa-i mearga site-ul bine. dupa parerea mea, ce s-a scris in articolul asta e un search pe google dupa "bune practici pt optimizarea unui site". nu vad nicaieri in articolul lui ca vorbeste despre optimizarea query-urilor sau de alte solutii (cache, load balancer, queues care ar avea un impact mult mai mare decat tot ce spune el acolo). nu spune nicaieri ca degeaba ai site-ul optimizat daca il hostezi pe un cont de reseller pe un server din Papua Noua Guinee vs un VPS sau un server dedicat intr-un data center local (dar care inseamna 2-300 E / luna).2) ca antreprenor ar trebui sa iti faci un plan de afaceri, sa vezi daca "in worst case scenario" tot poti castiga bani, si apoi sa-i bagi. daca eu ma duc la croitor sa-mi fac un sacou ii zic ce material / culoare / model vreau. nu ma intereseaza cum il face. important e ca la final sacoul sa vina bine pe mine, sa se incheie nasturii si sa ma simt confortabil in el. d-aia am apelat la un specialist - pt ca eu nu ma pricep si nu ma intereseaza sa ma pricep. ce spune omul asta in articol sunt texte de luat ochii "mama ce tare e, se justifica banii pe care ii cere"deci, tot respectul pt domnul programator, dar articolul asta e cam varza
poza de profil
:) Salut. În primul rînd, acesta nu este un articol tehnic, dedicat programatorilor, pentru că nu e un site dedicat acestei zone. În al doilea rînd, e vorba de nişte greşeli pe care antreprenorii ar trebui să le evite. E mai important să ştii ce să ceri decît să nu ceri şi să te trezeşti penalizat de Google sau de potenţialii clienţi. La load balancers ajungi cînd ai trafic foarte mare, nu cînd eşti la început de drum. Însă dacă eşti la început, nu văd de ce n-ar trebui să ştii cum funcţionează site-ul pentru care plăteşti şi, eventual, să ştii să ceri din start nişte optimizări de bază. Or, din punctul ăsta de vedere, articolul şi-a atins scopul. Antreprenorul nu trebuie să înveţe programare, dar cred că e ideal să aibă o minimă idee despre structura site-ului pe care-l va folosi pentru a-şi vinde produsele sau serviciile, mai ales dacă nu vrea să rişte să plătească altă echipă de programare dacă prima nu şi-a făcut treaba ca lumea. Atîta tot :)
poza de profil
cum spuneam nu e nevoie ca un client sa stie astfel de detalii. important e sa scrie in contract: "vreau ca orice pagina de pe site sa se incarce in sub o secunta". cum face programatorul chestia asta?! nu-i problema clientului. pentru ca, daca mergem pe acelasi principiu, clientul ar trebui sa stie cum functioneaza partea de livrare a produselor, care este logistica de la curier, cum ii este marfa urcata in camion si livrata la client. ar trebui sa stie cum functioneaza procesatorul de plati, si / sau o gramada de multe alte lucruri / procese pe care-si bazeaza afacerea. clientul trebuie sa aiba o singura grija: sa stie cum sa faca afacerea profitabila. (PUNCT)ca sa dau alt exemplu. daca ma duc la cofetarie sa cumpar un tort, nu ma apuc sa-i spun cofetarului cate oua sa puna, cata faina si fructe. ii spun "vreau un tort (modelul x) de 2 kg".
poza de profil
Cofetar vs Antrepenor?? :)) Faza cu tortul...nu prea inteleg legatura. Articolul este legat de un antrepenor (nu un client), iar personal mi se pare destul de bun. Ar fi frumos sa vii cu cateva idei practice - si mai putin trolling.
poza de profil
/// Antreprenorul cu site-ul este client al firmei care face site-ul, e la fel ca atunci cand tu te duci sa-ti cumperi tortul: un tort d-ala, cu specificatiile alea, de 2kg; un site asa si pe dincolo, nu cu memcached.

- Ultimele știri -

 

  Ultimele știri