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
Tehnologie

Cum afectează reglementările privind datele personale magazinul meu de ecommerce?

În calitate de retailer online, trebuie să fi auzit despre reglementările privind datele, cum ar fi RGPD (Regulamentul…

Sorana Gheorghiade
Sorana Gheorghiade
Tehnologie

Exemple de comerț conversațional oferite de Suiteshare

Suiteshare, care s-a alăturat recent familiei VTEX, este o platformă care le permite brandurilor și retailerilor să vândă…

Andreea Pop
Andreea Pop
Strategie

Cum să alegi cu succes platforma de ecommerce ideală pentru cumpărături alimentare online?

De la declanșarea crizei COVID-19, în martie 2020, retailerii de produse alimentare au fost supuși provocării de a…

Gabriela Porto
Gabriela Porto
Produse

VTEX Marketplace Network: conectează vânzătorii și marketplace-urile din jurul lumii într-un singur ecosistem

Marketplace Network este o funcționalitate a platformei VTEX care ajută la crearea unei conexiuni între marketplace-uri și vânzătorii…

Sorana Gheorghiade
Sorana Gheorghiade
Strategie

Ivănescu, Trainer Sport: Vânzările pe online și în marketplace-uri au susținut creșterea de 30% a afacerilor

Trainer Sport, unul dintre cele mai cunoscute lanțuri de retail din România din domeniul sportiv, a funcționat exclusiv…

Alex Goaga
Alex Goaga
Tehnologie

Ce reprezintă confidențialitatea datelor și de ce este importantă pentru ecommerce?

Dacă ai vândut vreodată produse, prin telefon sau prin intermediul unui site, ai plătit cu ajutorul terminalelor de…

Sorana Gheorghiade
Sorana Gheorghiade
Tehnologie

Cîrstean, Piera Lingerie: Online-ul este prezentul ȘI viitorul, iar acesta depinde de acțiunile noastre de acum

Anul 2020 a fost un an dificil pentru toată lumea, un an în care toate obiceiurile noastre au…

Alex Goaga
Alex Goaga
Strategie

Justyna TORRES, Carrefour: La începutul pandemiei au crescut de 5 ori vânzările de produse pentru igienă

Sistemul omnichannel al Carrefour (magazine tradiționale în diferite formate, canal de vânzări online și express delivery via Bringo)…

Alex Goaga
Alex Goaga
Strategie

Cătălin Ioana, Winmarkt: Nu putem ignora componenta online. Nu exclud nicio soluție care ar aduce beneficii

Cu siguranță anul 2020 va rămâne un an de referință, fie că ne raportăm la nivel economic, social,…

Alex Goaga
Alex Goaga
Vezi mai multe