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

Hoi, salut, 안녕하세요! Platforma VTEX este acum disponibilă în olandeză, franceză și coreeană.

Făcând încă un pas fundamental către obiectivul nostru de a contribui semnificativ la viitorul comerțului, suntem încântați să…

Larissa Dias
Larissa Dias
Tehnologie

De ce ar trebui să ia în considerare retailerii online consimțământul pentru modulele cookie?

Regulamentul general privind protecția datelor (RGPD) și Directiva asupra confidențialității și comunicațiilor electronice (ePR) afectează modul în care…

Sorana Gheorghiade
Sorana Gheorghiade
Tehnologie

Ce este UX Design și cum te poate ajuta

Imaginează-ți că ești interesat de un brand. Îi vizitezi website-ul și speri să afli mai multe despre acest…

Anisoara Munteanu
Anisoara Munteanu
Tehnologie

Dumitrescu, CustomSoft: 2020 a fost interesant. Deși nu ne așteptam, am înregistrat creștere

2020 a fost un an interesant, în sensul în care CustomSoft, unul dintre principalii furnizori de soluții software…

Alex Goaga
Alex Goaga
Produse

România, una dintre țările în care METRO a lansat noua aplicație digitală

METRO anunță lansarea oficială a aplicației mobile METRO în România, o alternativă digitală, modernă a tradiționalului card METRO,…

Alex Goaga
Alex Goaga
Produse

„Kon’nichiwa Japonia!” Platforma VTEX este acum disponibilă în limba japoneză. Provocările implementarii

După deschiderea unui sediu în Singapore, pentru a-și putea deservi mai bine clienții din Regiunea APAC, VTEX are…

Cassiane Vilvert
Cassiane Vilvert
Tehnologie

Ann Reeves & Francesca: Cât trebuie să investești pentru a produce 25 mil. măști chirurgicale, lunar?

Ann Reeves & Francesca este un exemplu de business care s-a adaptat rapid și eficient în timpul pandemiei.…

Alex Goaga
Alex Goaga
Omnichannel

Bucovicean, Molecule F: În fashion a fost esențial să pivotezi direcția creativă

Anul 2020 a fost unul (extrem de) provocator pentru intreaga industrie de comerț din România. Ce s-a întâmplat în…

Alex Goaga
Alex Goaga
Tehnologie

Contakt: De Valentine`s Day, românii vor cumpăra cu 25% mai multe accesorii de telefon

Contakt, unul dintre principalii jucători în distribuția de accesorii și tehnologii dedicate dispozitivelor mobile, estimează o creștere a…

Alex Goaga
Alex Goaga
Vizualizează mai mult