Produse

Store Framework: Cum a optimizat VTEX performanța magazinelor cu React

Rodrigo Affonso
Rodrigo Affonso iunie 8, 2020
Store Framework: Cum a optimizat VTEX performanța magazinelor cu React

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.

Citește în continuare: articole relaționate
Produse

De ce să alegi o platformă cu un OMS integrat?

Comerțul online a ieșit de multă vreme din sfera platformelor rigide, a comenzilor întârziate și a tranzacțiilor dificile.…

Vlad Stoiculescu
Vlad Stoiculescu
Operațiuni

Tutorial: Cum să îți listezi business-ul în elefant.ro marketplace 

Elefant.ro a atras într-un an peste 600 de comercianți în marketplace, tehnologia VTEX oferind un proces de onboarding…

Alex Goaga
Alex Goaga
Strategie

6 tendințe comune, dar ignorate, care expun magazinele online la incidente de securitate cibernetică

Cumpărăturile online aduc avantaje și dezavantaje. Citiți articolul pentru a afla 6 dintre cele mai importante tendințe de…

Alex Goaga
Alex Goaga
Tehnologie

Zece ponturi pentru a reduce abandonul coșurilor de cumpărături

Pierderea unor potențiale comenzi pe un magazin online este una dintre cele mai mari probleme atât pentru business-uri,…

Alex Goaga
Alex Goaga
Produse

Live Shopping pentru Magazinele B2B – O armă secretă pentru o piață complexă

Astăzi, popularitatea trendului live shopping nu mai surprinde pe nimeni. Deși a prins avânt în perioada pandemiei, segmentul…

Vlad Stoiculescu
Vlad Stoiculescu
Produse

De ce este VTEX IO potrivită pentru companiile retail de tip enterprise

De obicei, retailerii enterprise trebuie să implementeze strategii avansate și interconectate pentru a reuși în spațiul de comerț…

Allan Centurione
Allan Centurione
Produse

Cele mai bune aspecte ale VTEX IO

Numeroși dezvoltatori și specialiști în ecommerce au avut parte de câteva impedimente atunci când au încercat să modifice…

Larícia Mota
Larícia Mota
Tehnologie

Demontăm miturile legate de migrarea platformei: 4 lucruri pe care departamentul IT nu le înțelege

Din cauza caracterului său complicat și a pașilor amănunțiți, migrarea la o nouă platformă de ecommerce poate fi…

Gabriela Porto
Gabriela Porto
Produse

Crește-ți rata de conversie și fidelizează-ți cumpărătorii cu VTEX SmartCheckout™

Deși piața de ecommerce a continuat să crească și în 2021, iar rata medie de conversie a crescut…

Vlad Stoiculescu
Vlad Stoiculescu
See More