Core Web Vitals pentru magazin online: LCP, INP și CLS pe verde

Pe scurt: ce înseamnă Core Web Vitals pentru un magazin online

Core Web Vitals pentru magazin online înseamnă trei cifre măsurate pe telefoanele reale ale clienților tăi: LCP (cât de repede apare imaginea principală a produsului) trebuie să fie de cel mult 2,5 secunde, INP (cât de repede reacționează pagina când apeși „Adaugă în coș” sau un filtru) de cel mult 200 ms, iar CLS (cât „sare” pagina în timp ce se încarcă) de cel mult 0,1. Fiecare tip de pagină pică din alt motiv: produsul pică de obicei la LCP, categoria la INP și CLS, checkout-ul la INP. Le repari pe șablon, nu pagină cu pagină.

De ce contează viteza magazinului online mai mult decât crezi

Google măsoară Core Web Vitals la percentila 75 din vizitele reale din Chrome, pe o fereastră de 28 de zile, separat pe mobil și desktop. Dacă unul din patru clienți de pe mobil vede imaginea produsului după 4 secunde, tot grupul de pagini e marcat ca slab. Din martie 2024, INP a înlocuit First Input Delay, iar INP e mult mai greu de trecut pe magazinele încărcate cu JavaScript.

La majoritatea magazinelor, cei mai mulți clienți cumpără de pe telefon, adesea pe date mobile. Asta face ca un magazin care „merge bine” pe laptopul din birou să pice în datele reale. Magazinele au trei probleme pe care un site de prezentare nu le are:

• Imagini mari deasupra pliului. Poza produsului e aproape mereu elementul LCP și e de multe ori un JPEG de 2.000 px într-un slider.
• Multă interacțiune. Variante de culoare, filtre, mini-coș, selector de cantitate: toate intră la INP.
• Scripturi externe. GA4, Meta Pixel, TikTok, widgeturi de recenzii, chat, pop-up de newsletter, banner de cookie.

Costul nu e doar SEO. O pagină lentă face reclamele Google și Meta mai scumpe, pentru că o parte din clickuri pleacă înainte să se încarce pagina.

Cum măsori LCP, INP și CLS pe produs, categorie și checkout

Fiecare unealtă are rolul ei:

Unealtă	Tip de date	La ce o folosești
Raportul Core Web Vitals din Search Console	Reale (CrUX), adrese grupate	Ce șabloane pică, pe mobil sau desktop
PageSpeed Insights	Reale + laborator	O singură adresă: datele reale sus, diagnosticul jos
Chrome DevTools → panoul Performance	Laborator, pe dispozitivul tău	Găsești elementul, scriptul sau clickul exact
Librăria web-vitals sau evenimente GA4	Reale, datele tale	Monitorizare pe șablon, inclusiv checkout (de obicei prea puțin trafic pentru CrUX)

În raportul din Search Console, fiecare problemă e legată de un indicator și de un dispozitiv, de exemplu LCP peste 2,5 s pe mobil, INP peste 200 ms sau CLS peste 0,1, iar grupurile de adrese sunt marcate ca bune, care necesită îmbunătățiri sau slabe. Dacă dai click, Google îți arată adrese exemplu. Dacă toate sunt /produs/..., problema e în șablonul de produs.

Pragurile oficiale sunt explicate în documentația web.dev despre Core Web Vitals și în ajutorul Search Console pentru raport.

Ce pagini din magazin pică la ce indicator

Șablon	Indicatorul care pică de obicei	Cauza tipică
Prima pagină	LCP	Slider de bannere, video pe autoplay, fonturi care blochează textul
Categorie	INP, CLS	Filtre AJAX care redesenează toată grila, imagini fără dimensiuni, „Încarcă mai multe” care împinge conținutul
Produs	LCP	Imaginea principală încărcată „lazy” sau într-o galerie JS, poze neoptimizate, CSS care blochează randarea
Coș	INP	Recalcularea totalului la fiecare modificare de cantitate, cart fragments, scripturi pentru cupoane
Checkout	INP, CLS	Autocompletare adresă, iframe-ul procesatorului de plăți încărcat târziu, metodele de livrare care apar după încărcare

Plugin de viteză, hosting mai bun sau temă nouă?

Află unde e blocajul înainte să cumperi ceva. Sunt trei niveluri de soluție și fiecare rezolvă altceva.

Variantă	Ce rezolvă	Ce nu rezolvă	Când e suficientă
Plugin de cache/optimizare (WP Rocket, LiteSpeed Cache, Perfmatters)	TTFB pe paginile din cache, amânare CSS/JS, lazy-load	Paginile fără cache (coș, checkout, clienți B2B logați), JS greu din temă	Temă curată, sub ~30 de pluginuri, mai ales vizitatori nelogați
Hosting mai bun (VPS administrat, Redis, CDN)	TTFB peste tot, vârfuri de Black Friday, admin lent	Deplasări de layout, scripturi grele, imagini mari	TTFB peste 800 ms chiar și cu cache
Temă refăcută sau magazin personalizat	Structura LCP, INP din page builder și slidere, CLS din design	Obiceiurile proaste cu scripturile de marketing	Page builder plus multe addonuri, sau fiecare reparație strică altceva

O capcană frecventă: două pluginuri de optimizare care minifică și combină aceleași fișiere. Rezultatul e JavaScript stricat, un checkout care aruncă Uncaught TypeError în consolă și un INP mai prost decât înainte. Folosește o singură unealtă și exclude coșul și checkout-ul de la amânarea scripturilor.

Contează și unde e serverul. Un hosting ieftin din SUA pentru un magazin cu clienți din România adaugă sute de milisecunde la fiecare cerere; un server în UE plus CDN rezolvă asta.

Pas cu pas: repari LCP pe pagina de produs

1. Află elementul LCP. În PageSpeed Insights caută, în secțiunea de diagnostic, elementul care a fost măsurat ca LCP. Pe produs e aproape mereu prima imagine din galerie.
2. Nu o încărca lazy. Scoate loading="lazy" de pe prima imagine și adaugă fetchpriority="high". Multe pluginuri de galerie pun lazy-load pe toate pozele, inclusiv pe prima.
3. Servește dimensiunea corectă. Un slot de 400 px pe telefon nu are nevoie de o imagine de 2.400 px. Generează srcset corect și folosește WebP sau AVIF. Țintește sub 150 KB pentru imaginea principală pe mobil.
4. Scade timpul de răspuns al serverului. Cu TTFB peste 800 ms, un LCP de 2,5 s e aproape imposibil. Ai nevoie de cache de pagină pe produs și categorie, cache de obiecte (Redis) pentru interogările WooCommerce și CDN.
5. Elimină CSS-ul și JS-ul care blochează randarea. Pune CSS-ul critic inline, amână scripturile neesențiale și renunță la librăria de slider dacă galeria poate fi HTML simplu cu CSS scroll snap.
6. Fonturi: maximum două fișiere, cu font-display: swap, ca textul să apară imediat.

Pas cu pas: repari INP pe categorie, coș și checkout

INP măsoară cea mai lentă interacțiune tipică din vizită. În magazine, vinovații sunt task-urile lungi de JavaScript.

• Filtre: în loc să reîncarci toată grila la fiecare bifă, folosește adrese de filtru randate pe server sau un index de căutare rapid. Pune debounce pe sliderul de preț.
• Variante de produs: evită pluginurile care reconstruiesc tot tabelul de variante în JavaScript la fiecare click. Pregătește datele variantelor pe server.
• Cart fragments în WooCommerce: cererea ?wc-ajax=get_refreshed_fragments rulează pe multe pagini ca să actualizeze mini-coșul. Încarc-o doar când coșul nu e gol sau înlocuiește-o cu un endpoint mic.
• Scripturi de marketing: fiecare tag din Google Tag Manager adaugă muncă pe firul principal. Mută ce poți pe server (GA4 server-side, Meta Conversions API), amână chatul și widgetul de recenzii până la prima interacțiune și scoate tagurile pe care nu le mai urmărește nimeni.
• Checkout: doar scripturile pentru plată, adresă și tracking. Fără slidere, pop-up-uri sau upsell.

În Chrome DevTools înregistrează un trace în panoul Performance în timp ce bifezi un filtru. Orice task mai lung de 50 ms are un colț roșu, iar pista „Interactions” îți arată exact ce click a urcat INP peste 200 ms.

Pas cu pas: repari CLS (paginile care „sar”)

CLS e de obicei cel mai ușor de reparat și cel mai enervant pentru client, mai ales când butonul „Adaugă în coș” fuge de sub deget.

• Fiecare imagine de produs are atributele width și height sau un aspect-ratio în CSS.
• Bannerul de cookie apare peste pagină, nu o împinge în jos.
• Bara de promoții („Livrare gratuită peste 200 lei”) are spațiu rezervat.
• Stelele de recenzii, prețul și „Ultimele 3 bucăți” vin randate de server, nu injectate ulterior.
• Fonturile au font-display: swap și un font de rezervă cu dimensiuni apropiate.
• Iframe-urile de plată și de adresă din checkout au o înălțime minimă fixă.
• „Încarcă mai multe” adaugă produse sub ecran, nu deasupra.

Checklist Core Web Vitals pentru magazin online

• Raportul Core Web Vitals din Search Console verificat pe mobil și desktop
• Elementul LCP identificat pe prima pagină, categorie și produs
• Prima imagine de produs fără lazy-load, cu fetchpriority="high"
• Imagini redimensionate, în WebP/AVIF, cu srcset
• TTFB sub 800 ms pe paginile din cache, măsurat din România
• Cache de pagină, cache de obiecte și CDN active
• Pluginuri și module de page builder nefolosite șterse
• Audit Tag Manager: fiecare tag are un responsabil și un scop
• Cart fragments limitat sau înlocuit
• Checkout-ul încarcă doar scripturile esențiale
• Monitorizare cu date reale pe fiecare șablon
• Validarea remedierii pornită în Search Console (în engleză: Start Tracking) și verificare după 28 de zile

Cât costă optimizarea Core Web Vitals pentru un magazin online

Sunt estimări din proiecte tipice, nu prețuri fixe. Intervalul depinde mai ales de cât din tema și pluginurile actuale pot rămâne. Cursul folosit e aproximativ 5,3 lei pentru 1 euro.¹

Ce faci	Efort tipic	Cost estimat (EUR fără TVA)
Audit: date reale, diagnostic pe șablon, listă de priorități	1–3 zile	400–1.200 € (aprox. 2.100–6.400 lei)
Reparații rapide: imagini, cache, lazy-load, curățenie de taguri	3–8 zile	1.000–3.500 € (aprox. 5.300–18.500 lei)
Temă refăcută pe aceleași date WooCommerce	3–8 săptămâni	4.000–12.000 €
Hosting mai bun (VPS administrat cu cache și CDN)	lunar	30–150 € pe lună

Dacă ai un page builder greu și peste 40 de pluginuri, o temă nouă iese de multe ori mai ieftin pe doi ani decât peticitul repetat. La Raao viteza e punctul de pornire: pachetul Starter (de la 1.900 €) și pachetul Launch (de la 3.900 €) includ încărcare rapidă, iar Launch vine standard cu CDN, cache și optimizare de imagini. Hostingul și mentenanța pe serverele administrate de noi încep de la 89 € pe lună. Detaliile sunt pe paginile magazine online și prețuri.

Dacă vrei o a doua părere pe raportul tău din Search Console, apelul gratuit de 30 de minute e un început bun: scrie-ne.

Cum am făcut asta pentru Kuiba

Kuiba vinde mobilier și iluminat premium, cu peste 10.000 de produse configurabile de la peste 25 de branduri europene. Viteza trebuia să reziste unui catalog de mărimea asta și multor scripturi de marketing.

• Un magazin personalizat, construit pentru viteză și SEO, nu o temă cu straturi de page builder.
• Căutare cu filtre instantanee, cu sinonime și rezervă AI, ca filtrarea unui catalog mare să rămână rapidă.
• GA4 server-side și Meta Conversions API, ca tracking-ul să fie corect fără să încarce fiecare pixel în browserul clientului.
• Feed-uri Google Merchant, Meta, TikTok și Pinterest generate din aceeași platformă.
• Un configurator de produs cu matrice de prețuri, finisaje și dimensiuni, care calculează corect prețul online.