Provocarea de a îmbunătăți performanța comerțului digital nu este un lucru simplu. Pierderea vânzărilor din cauza unui website cu performanță lentă este unul dintre coșmarurile oricărui magazin online. Acesta este motivul pentru care optimizarea performanței și timpul de încărcare a paginii este o prioritate de top pentru VTEX.
Acest articol nu reprezintă un scenariu de succes pentru îmbunătățirea performanței, însă este un raport care prezintă o cale curajoasă către inovație. O cale care include succese, erori, teste și îmbunătățiri, dar care are deja un impact asupra vieților clienților noștri.
De ce este performanța importantă pentru comerțul digital?
Performanța este un factor critic pentru succesul comerțului digital. Conform Radware, 20% din clienți își abandonează coșul de cumpărături din cauza vitezei scăzute a website-ului. Suplimentar, timpul de încărcare a paginii și rating-ul SEO sunt strâns conectate. Prin urmare, programatorii din întreaga lume depun eforturi pentru a își optimiza website-urile.
De la metode simple până la instrumente extrem de complexe, există multe moduri prin care se pot gestiona problemele legate de performanță: reducerea dimensiunilor imaginilor, reducerea numărului de cereri HTTP și stocarea a cât mai multor date posibil în cache sunt moduri excelente pentru a le rezolva. Dar VTEX a decis să depășească aceste lucruri:
Performanța în magazinele VTEX: cu ajutorul Store Framework și React
Programatorii noștri lucrează neîncetat pentru căutarea unor noi moduri de a gestiona nevoia optimizării performanței. În ceea ce privește Store Framework, soluția noastră pentru implementarea magazinului, construită în baza unor componente React „pre-built”, răspunsul a fost React Partial Hydration, o metodă inovatoare pentru a gestiona timpul de încărcare al componentelor non-statice, precum un carusel.
Dacă te întrebi ce înseamnă React, nu-ți face griji, voi explica în cele ce urmează: React este o bibliotecă JavaScript, creată de Facebook pentru design-ul front-end și este baza multor website-uri, precum Netflix, Walmart și Airbnb. În cadrul VTEX, aceasta este baza componentelor noastre admin, iar acum și a Store Framework.
Imaginează-ți că accesezi o pagină web care are elemente interactive, precum un carusel. Fiind un element dinamic, caruselul necesită ca datele asociate să fie descărcate pentru a putea fi vizualizate. Dar nu poți descărca doar codul caruselului; trebuie descărcat întregul conținut al paginii și acest lucru cauzează un ritm lent. În acest context apare React Partial Hydration, permițând descărcarea doar a conținutul necesar.
În termeni tehnici, atunci când o pagină construită cu ajutorul React este accesată, trebuie executat codul JavaScript din fiecare componentă pentru reîntoarcerea la elementul HTML. Pentru a face acest lucru, folosim Server Side Rendering (SSR), un proces în care componentele JavaScript și CSS ale unei pagini sunt redate pe server într-un mod static, în loc să fie încărcate în browser (client-side). Acest proces reduce timpul de încărcare a paginii, oferindu-le utilizatorilor acces la conținut aproape instant.
Singura problemă cu SSR este că revine doar la componentele statice – conținutul devine dinamic pe partea clientului printr-un proces numit Hydration. Dar este totul sau nimic: tot codul de pe pagină este descărcat și executat pe partea clientului, care cauzează încetinire în timpul de încărcare a paginii.
Aceasta este o problemă pe care Partial Hydration o rezolvă. Folosind această metodă, putem descărca și executa doar părțile de cod care sunt necesare – în acest caz, conținutul pe care îl vede utilizatorul, deasupra scroll-ului paginii. Sub scroll, componentele sunt încărcate la cerere, ceea ce înseamnă că sunt descărcate și executate doar atunci când utilizatorul folosește scroll-ul. Astfel, prin descărcarea doar a codului necesar, putem reduce timpul de încărcare a paginii.
În cadrul acestui exemplu, codul pentru componenta ProductSummary nu este încărcat din prima, atunci când este sub scroll-ul paginii. Acesta este descărcat și executat doar în momentul în care utilizatorul face scroll.
O nouă paradigmă pentru echipele de dezvoltare și business
Lucas Bebber, programatorul care a condus proiectul de performanță al echipei de produs din cadrul VTEX, punctează că această nouă schimbare este noua paradigmă în utilizarea React. El ne-a mai spus câte ceva și despre tehnologia asociată cu Partial Hydration:
De ce a fost ales React pentru a clădi magazine în Store framework?
„React este extrem de popular în industria tech, dar nu neapărat din motive de performanță. În cadrul VTEX, l-am ales pentru că ne putem componentiza foarte bine codul cu ajutorul lui. Ne permite să creăm componente independente și care sunt actualizabile. Iar cu Partial Hydration, am găsit ce e mai bun din ambele lumi: avem componente React, păstrând redarea pe partea de server și descărcând doar componentele non-statice.”
Dacă Partial Hydration este atât de importantă, de ce este folosită de atât de puține companii din jurul lumii?
„Este posibil ca companiile să aplice Partial Hydration pentru produsele interne, dar ca instrument de platformă, într-adevăr, este folosit de foarte puține companii. Unul dintre motivele pentru acest lucru este că React în sine funcționează cu redare, nu se ocupă de partea de descărcare, lucru care ar fi necesar pentru a profita mai mult de această tehnică. Prin urmare, pentru a realiza Partial Hydration, compania trebuie să dețină controlul complet, o platformă care se ocupă atât de back-end, cât și de front-end. Acesta este unul dintre diferențialele VTEX IO.”
Rezultatele utilizării tehnologiilor Store Framework și React
În cadrul VTEX, ideea de a folosi Partial Hydration a apărut și a fost implementată în ultimele 4 luni și plănuim să o dezvoltăm în continuare. În viitor, vom evolua pentru a reduce și mai mult nevoia de a descărca și executa activele pe partea clientului: componentele statice nu vor mai fi descărcate. De asemenea, există în desfășurare alte îmbunătățiri ale performanței, cum ar fi optimizarea personalizărilor CSS.
Recunoaștem faptul că îmbunătățirile performanței sunt în desfășurare. Am depus foarte multe eforturi și am realizat eficient anumite rezultate, dar suntem conștienți că acest drum al îmbunătățirii este interminabil.
Rezultatele ne încurajează: am făcut nenumărate teste pentru a valida această metodă și de a o îmbunătăți, de exemplu, pentru magazinul Al Sporting Goods.
Aceste rezultate ne oferă certitudinea că suntem pe calea cea bună, iar, ușor-ușor, beneficiile încep să apară. Am împărtășit recent Comunicatul de presă despre îmbunătățiri ale performanței, iar în următoarele luni, intenționăm să le oferim tuturor programatorilor Store Framework mai multe instrumente pentru a garanta performanța la care visăm dintotdeauna.
