Anul trecut, Google a anuntat un nou factor de clasare organica – experienta pe pagina. Si nu ne surprinde deloc, deoarece conceptul de a judeca site-urile web prin ceea ce simte un utilizator atunci cand interactioneaza cu o pagina, are sens. Acest lucru este si mai important cand vorbim despre website-urile de comert electronic, unde intregul proces, de la cautarea produselor pana la plasarea comenzilor, este esential pentru succesul afacerii. Pentru a masura experienta pe pagina, Google a dezvoltat un nou set de metrici numit Core Web Vitals.
Experienta utilizatorului a fost intotdeauna o parte importanta in analiza site-urilor web pentru Google, cu metrici precum compatibilitatea cu dispozitivele mobile, absenta pop-up-urilor intruzive si navigarea sigura avand intotdeauna un rol important.
Suntem pasionati de comertul electronic si marketing, asa ca, daca ai nevoie de informatii despre produsele si serviciile noastre, suntem aici pentru a te ajuta.
Statisticile ne spun acelasi lucru. Rata medie de retentie a website-urilor de comert electronic care se incarca in 2 secunde este de peste 90%. Cand timpul de incarcare a paginii creste de la 1 la 6 secunde, rata de respingere (bounce rate) creste cu peste 100%. Pe mobil, timpii rapizi de redare aduc cu 327% mai multe venituri decat redarea lenta. Paginile care se incarca in 2.4 secunde convertesc de 3 ori mai mult decat cele care dureaza peste 6 secunde. Acum este clar de ce oferirea unei bune experiente a utilizatorului a devenit esentiala.
Clasamentele Core Web Vitals iau in considerare multi factori precum viteza, dimensiunea imaginii, incarcarea buna, stabilitatea, interactivitatea, dimensiunile codului, experienta neintrerupta si sunt impartite in trei metrici: Largest Contentful Paint (LCP), First Input Delay si Cumulative Layout Shift.
Largest Contentful Paint (LCP)
Acesta masoara momentul in care cel mai mare element de continut apare pe ecran. Aceste elemente pot include imagini, videoclipuri sau alte tipuri de continut. Potrivit Google, ar trebui sa urmaresti ca LCP sa se intample in primele 2,5 secunde de la incarcarea paginii. Tot ce este sub 4 secunde necesita imbunatatiri, iar tot ce este peste poate fi considerat ca avand performante slabe.
LCP este afectat de mai multi factori, cum ar fi timpii lenti de raspuns ai serverului, codul JavaScript si CSS, resursele care se incarca lent sau problemele de redare in timpul interactiunii clientului.
First Input Delay
First Input Delay (FID) masoara timpul necesar pentru ca browserul sa raspunda la prima interactiune a utilizatorului. Aceastea pot fi actiuni precum clicuri si apasari de taste. Cu cat browserul reactioneaza mai repede, cu atat pagina va parea mai receptiva.
Site-urile web mai complexe sunt adesea alimentate de JavaScript, si veti constata ca acesta este vinovatul cand vine vorba de scoruri FID scazute. JS poate fi utilizat pentru a crea interactiuni impresionante, dar deoarece foloseste cod complex, browserul nu poate raspunde rapid in timp ce executa JavaScript. Prin urmare, imbunatatirea codului JavaScript va imbunatati automat scorurile de experienta pe pagina.
Google considera o intarziere de mai putin de 100ms ca fiind o buna receptivitate. Orice intre 100ms si 300ms necesita imbunatatiri, iar orice peste aceast scor este considerat ca avand performante slabe.
Cumulative Layout Shift
Cel de-al treilea Core Web Vital determina cat de “stabil” se incarca continutul pe ecran. Ca exemplu, cand un buton se incarca pe ecran, in fundal s-ar putea incarca inca o zona mare de continut. Cand aceasta se incarca complet, butonul este impins putin in jos. Si acest lucru se intampla de obicei exact in momentul in care un utilizator doreste sa faca clic pe el.
Aceste schimbari de aspect se intampla des pe website-urile complexe de comert electronic, iar principalii vinovati aici sunt imaginile produselor. Daca dezvoltatorii nu specifica latimea si inaltimea unei imagini in cod, va fi lasat la latitudinea browserului sa decida cum ar trebui sa apara imaginea pe ecran.
Google considera un rating de 0.1 sau mai putin ca fiind bun, in timp ce orice de la 0.1 la 0.25 necesita imbunatati. Ratinguri peste 0.25 vor declansa o nota slaba pentru pagina ta.
Instrumente pentru masurarea Core Web Vitals
Exista multe platforme care ofera analize despre performanta site-urilor web, dar consideram ca instrumentele oferite de Google sunt suficiente.
Page Speed Insights functioneaza foarte bine cu Core Web Vitals si ofera nu numai date, dar si sfaturi despre ce trebuie imbunatatit.
Lighthouse, un alt instrument de la Google, a fost construit pentru a audita PWAs (aplicatiile web progresive), dar s-a transformat intr-un instrument uimitor pentru a masura tot felul de factori, inclusiv performanta, accesibilitatea, aplicatiile web progresive si altele.
Comerciantii pot obtine, de asemenea, rapoarte in Google Search Console. Acesta plaseaza toate paginile in categorii etichetate convenabil in: slabe, care necesita imbunatatiri si bune.
In plus, exista mai multe instrumente pentru developeri in Chrome care ofera o modalitate rapida de a evalua performanta site-urilor web.
Suntem pasionati de comertul electronic si marketing, asa ca, daca ai nevoie de informatii despre produsele si serviciile noastre, suntem aici pentru a te ajuta.
Optimizare Magento pentru Core Web Vitals
Dupa cum am spus mai devreme, magazinele online complexe necesita multe optimizari pentru a obtine note bune. De fapt, aceste optimizari ar trebui sa fie considerate ca cele mai bune practici, deoarece, de cand Google a introdus Core Web Vitals, cand vine vorba de clasarea organica, scrierea de continut a inceput sa piarda din importanta in comparatie cu crearea unei experiente bune a utilizatorului.
Cum sa obtii cel mai bun scor pentru Largest Contentful Paint
Unul dintre motivele obisnuite pentru un LCP slab in magazinele Magento este timpul lent de raspuns al serverului. Problema poate aparea din cauza unui web hosting slab, lipsei procesului de caching, interogarilor neoptimizate ale bazei de date sau raspunsurilor API care dureaza mult timp sa se rezolve. HTTP este de asemenea important, iar Google sugereaza utilizarea HTTP2, deoarece este mult mai rapid decat predecesorul sau si poate gestiona cereri paralele. JavaScript si CSS joaca un rol important, la fel si alte resurse care pot agrava performanta LCP.
Daca problema gazduirii web poate fi rezolvata destul de usor alegand un hosting dedicat care poate gestiona toate complexitatile unui magazin Magento, cand vine vorba de JavaScript si CSS, lucrurile sunt putin mai complexe.
Unul dintre primii pasi este reducerea timpului de blocare JavaScript prin combinarea mai multor fisiere JS pentru a reduce numarul de solicitari catre server. In al doilea rand, deoarece cele mai multe fisiere JS sunt plasate de obicei in partea de sus a documentului, este o practica buna sa le mutati in partea de jos a sectiunii . Astfel, browserul va proceda cu incarcarea paginii, executand JS-ul la final. In al treilea rand, ar trebui folosite ‘async’ sau ‘defer’ pentru a amana orice scripturi care nu sunt critice pentru continutul de deasupra fold-ului. In cele din urma, ori de cate ori este posibil, script-urile inline ar trebui mutate in fisiere JS externe.
Fisierele CSS mari pot incetini de asemenea redarea continutului intr-un magazin Magento, prin urmare, reducerea cantitatii de CSS non-critic la minim este esentiala. Unul dintre primele lucruri de facut pentru a realiza acest lucru este activarea functiei „CSS Critical Path” din Panoul de Administrare Magento. Acest pas va amana toate fisierele CSS non-critice care sunt incarcate asincron. Combinarea si minimizarea fisierelor CSS vor aduce, de asemenea, o imbunatatire semnificativa, deoarece cateva fisiere mari vor fi descarcate mai repede decat o multitudine de fisiere mici.
Pe langa fisierele JS si CSS, imaginile, videoclipurile si alte elemente de continut pot afecta scorul. daca nu sunt optimizate. Lazy Loading este o tehnica comuna de optimizare a imaginilor in Magento, folosita de multi. Tehnica inlocuieste imaginile din afara viewport-ului cu locuri rezervate, facandu-le vizibile atunci cand clientii scrolleaza. Dar, in ceea ce priveste LCP, nu este o practica buna, prin urmare ar fi indicat sa faci Lazy Load la tot ce este sub fold in timp ce pagina se incarca.
Pentru multe magazine Magento, imaginile, sliderele, bannerele sunt unele dintre cele mai utilizate elemente pentru a crea continut uimitor. Problema cu ele este ca sunt principalul vinovat pentru un scor LCP scazut. Prin urmare, fie trebuie comprimate, fie convertite in formate moderne, cum ar fi WebP. Trecerea la WebP iti poate economisi pana la 30% din dimensiune fata de JPEG fara pierdere de calitate.
Un CDN (Content Delivery Network) poate fi, de asemenea, utilizat pentru a accelera livrarea fisierelor media, alegand servere care sunt mai apropiate de utilizatori.
Caruselele de imagini sunt componente excelente de UX, dar pot avea un impact semnificativ asupra scorului LCP daca sunt lasate pe redare automata. Cel mai bine este sa faci primul slide sa se incarce static ca o imagine. Celelalte imagini ar trebui sa aiba incarcare amanata pana cand sunt solicitate.
O alta tehnica simpla, dar larg utilizata de optimizare, este transformarea logo-ului si a tuturor icon-urilor in SVG-uri, deoarece acestea nu sunt luate in considerare pentru a calcula Largest Contentful Paint.
Un rezultat excelent in magazinele Magento poate fi obtinut prin activarea functiei ‘preload’, care informeaza browserele despre resursele critice care trebuie incarcate mai intai.
In cele din urma, comprimarea ‘gzip’ este o modalitate simpla si eficienta de a accelera website-ul. S-ar putea sa nu functioneze bine pentru clientii care folosesc browsere vechi, dar sa fim sinceri, in zilele noastre, majoritatea traficului provine de la browsere moderne si comprimarea gzip va aduce mult mai multe beneficii decat dezavantaje.
Optimizare Magento pentru First Input Delay
Un bun First Input Delay (FID) va face minuni pentru clasarea in cautari. Contribuie, de asemenea, mult la rata de retentie a clientilor si la rata de respingere, deoarece formeaza prima impresie a utilizatorului despre magazinul online, concentrandu-se pe evenimentele de initiere, cum ar fi clicurile si apasarile de taste. Principalul motiv pentru un FID scazut este browserul care ruleaza sarcini grele si care nu poate raspunde la actiunile utilizatorului pana cand aceste sarcini sunt finalizate. Acest lucru poate fi cauzat de fisiere JS mari, pachete JS lungi sau sarcini lungi in care browserul trebuie sa faca pauza.
In primul rand, o buna tehnica de optimizare este sa imparti orice bucata de cod care blocheaza firul pentru mai mult de 50 ms in bucati mai mici.
In al doilea rand, deoarece multe magazine Magento sunt pline de diferite Tag-uri, o solutie buna este sa activezi incarcarea la cerere a codului acestora, prioritizand incarcarea elementelor web care ofera cea mai mare valoare utilizatorilor.
Cand vine vorba de rularea JavaScript-urilor, in multe cazuri poti utiliza web workers pentru a rula multiple executii JS pe o pista paralela. Acestea vor fi executate intr-un mediu JavaScript separat fara a afecta firul principal. In plus, poti amana incarcarea JS pana cand fisierele JavaScript trebuie sa fie executate. Astfel, browserul va prelua elementele web esentiale (HTML, CSS) in prima instanta, iar apoi, dupa ce procesul este completat, toate etichetele script pot fi analizate. Acest lucru se poate face fie prin efectuarea de modificari de cod manual, fie utilizand o extensie Magento 2 cum ar fi Magento 2 Defer Parsing of JavaScript, care pune automat toate fisierele JS la sfarsit.
Multe magazine Magento folosesc polyfills pentru a permite functionalitatilor si caracteristicilor moderne sa functioneze pentru utilizatorii care viziteaza site-urile web cu browsere vechi. Chiar daca acest lucru poate parea bun, ele forteaza, de asemenea, browserele moderne sa descarce cod de care nu au nevoie, rezultand in intarzieri si, prin urmare, un scor FID slab. Solutia este analizarea browserelor pe care le foloseste publicul dvs. si restrictionarea numarului de polyfills la cele necesare.
Optimizare Magento pentru Cumulative Layout Shift
Cel mai frecvent, motivul principal pentru un CLS (Cumulative Layout Shift) slab este nespecificarea dimensiunilor pentru imagini, iframes. Acest lucru creeaza incapacitatea browserului de a aloca cantitatea necesara de spatiu in timp ce elementul se incarca. Rezolvarea aici este simpla, prin setarea atributelor de inaltime si latime pentru a permite browserului sa aloce cantitatea corespunzatoare de spatiu pentru imagini inainte de a fi complet descarcate.
Continutul injectat dinamic, cum ar fi bannerele pop-up sau formularele de inscriere sau de contact, poate crea aceeasi problema, impingand in jos intregul continut.
Utilizarea unui loc rezervat care ocupa exact dimensiunile imaginilor este o tehnica des utilizata de multi developeri Magento pentru a evita ca incarcarea lenta a acestui tip de continut sa cauzeze modificari ale aspectului.
Utilizarea fonturilor diferite de cele oferite de sistem poate declansa FOIT (Flash Of Invisible Text) si FOUT (Flash Of Unstyled Text). Cand se intampla acest lucru, browserul afiseaza un text invizibil sau afiseaza un font neformatat (de rezerva) in timp ce fontul web se reda. Solutia este sa utilizezi fonturi de sistem pentru a preveni schimbarile neasteptate.
Caruselele neoptimizate pot contribui, de asemenea, la un scor slab, chiar daca schimbarea este adesea aproape invizibila cu ochiul liber. Pentru a remedia acest lucru, se poate utiliza proprietatea ‘CSS transform’ pentru a face caruselul de imagini mult mai rapid si mai prietenos pentru utilizatori.
Extensii Magento
Exista cateva extensii care iti pot ajuta magazinul online Magento sa creeze o experienta extraordinara pentru utilizatori.
Google Page Speed Optimizer Powered by SpeedSize de la Amasty este un concurent puternic. Extensia poate ajuta magazinele magento sa-si creasca viteza site-ului, sa optimizeze media fara a pierde calitatea, sa repare erorile Core Web Vitals si, ca rezultat final, sa imbunatateasca clasarea SEO.
Magento 2 Page Speed Optimization (Google Core Web Vital) de la Webkul este o alta extensie care merita mentionata. Are unele caracteristici puternice precum conversia automata a formatului de imagine in .webp, incarcarea continutului paginii inainte de incarcarea JS, sau utilizarea Lazy Loading pentru a reduce timpul si dimensiunea de incarcare a paginii.
Suntem pasionati de comertul electronic si marketing, asa ca, daca ai nevoie de informatii despre produsele si serviciile noastre, suntem aici pentru a te ajuta.