# Optimizarea ecommerce pentru mobil: Core Web Vitals, plata și remedierile concrete care cresc conversia

> 70-85% din traficul de ecommerce vine de pe mobil. Cele zece zone concrete (Web Vitals, ținte tactile, completare automată, Apple Pay, zonele degetului mare) care reduc diferența de conversie dintre mobil și desktop, cu instrumente reale și valori de referință.

Ryan Badger - 1 mai 2025 - 8 min de citit

## De ce mobilul decide totul

70-80% din traficul tău de ecommerce vine de pe mobil. Pentru majoritatea categoriilor de consum se apropie de 85%. Conversia pe desktop este de obicei de 2-3 ori mai mare decât pe mobil, ceea ce spune mai puțin despre faptul că desktopul ar fi mai bun și mai mult despre faptul că mobilul e stricat în majoritatea magazinelor.

O experiență mobilă bine optimizată poate închide diferența și adesea o inversează: unele branduri DTC convertesc acum pe mobil la același nivel cu desktopul sau peste. Diferența e concretă, măsurabilă și ține mai ales de igienă, nu de inovație.

Articolul acesta acoperă ce îmbunătățește cu adevărat conversia pe mobil, cu valori de referință, instrumente și lucruri concrete de reparat. Nu „proiectează mai întâi pentru mobil”. Ci verificările concrete care produc un câștig cumulat.

## 1. Core Web Vitals și de ce le urmărește Google

Google folosește Core Web Vitals ca semnal de clasare și ca indicator al calității experienței. Dincolo de unghiul SEO, metricile de bază sunt predictori puternici ai conversiei.

### LCP (Largest Contentful Paint)

Timpul până când se afișează cel mai mare element de deasupra liniei de plutire (de obicei o imagine principală sau H1). Țintă: sub 2,5 secunde pe mobil, 4G.

Cele mai frecvente cauze ale unui LCP prost:

- Imaginea principală necomprimată sau prea mare
- Încărcarea fonturilor web care blochează afișarea
- Scripturi terțe injectate (widgeturi de chat, analiză, instrumente de teste A/B) în `<head>`

### INP (Interaction to Next Paint)

Timpul de la o interacțiune a utilizatorului (atingere) până la următoarea actualizare vizuală. Țintă: sub 200 ms.

Cele mai frecvente cauze ale unui INP prost:

- Pagini încărcate cu JavaScript (magazine React/Vue fără împărțirea codului)
- Scripturi de analiză sau de chat care rulează sincron la interacțiune
- Întârzierea atingerii pe browsere mobile mai vechi

### CLS (Cumulative Layout Shift)

Elemente care sar prin pagină pe măsură ce se încarcă. Țintă: sub 0,1.

Cele mai frecvente cauze:

- Imagini fără atribute width/height
- Reclame sau încorporări terțe care se încarcă după conținut
- Fonturi care se încarcă și schimbă dimensiunea textului

### Cum verifici

Gratuit: [PageSpeed Insights](https://pagespeed.web.dev/) rulează Lighthouse și raportează toate cele trei. Testează pagina de produs cu cele mai mari venituri, nu pagina principală. Repară ce e roșu, acceptă ce e galben, mergi mai departe.

Cu plată / mai în profunzime: WebPageTest.org pentru analiza cascadei de încărcare, fila Performance din Chrome DevTools pentru profilare locală.

## 2. Viteză pe mobil sub 3 secunde (mobil real, nu desktop încetinit)

„Emulatorul de mobil” al unui browser de desktop folosește o conexiune rapidă și un procesor rapid. Telefoanele reale folosesc conexiuni mai lente și procesoare mai slabe. Diferența este substanțială.

Testează pe telefoane reale, pe 4G. Dacă pagina ta durează 2 secunde în emulatorul mobil din Chrome, probabil durează 4-5 secunde pe un Android de gamă medie, pe 4G.

### Cele mai mari câștiguri de viteză (în ordine)

1. **Optimizarea imaginilor:** comprimă la 80% calitate, redimensionează la dimensiunile necesare de fapt, servește WebP sau AVIF. Shoprocket face asta automat prin Cloudflare
2. **Încarcă leneș (lazy-load) conținutul de sub linia de plutire.** Imaginile, iframe-urile și scripturile grele nu ar trebui să se încarce până nu se ajunge la ele prin derulare
3. **Amână JavaScript-ul necritic.** Analiza, widgeturile de chat și instrumentele de teste A/B nu ar trebui să blocheze afișarea
4. **Pune în cache agresiv resursele statice.** Cache de 1 an pentru imagini, fonturi, CSS, JS cu URL-uri cu amprentă
5. **Folosește un CDN** (Cloudflare, Fastly sau cel integrat în platforma ta). Servește resursele de la noduri apropiate geografic
6. **Redu scripturile terțe.** Fiecare pixel și tag adaugă ~50-200 ms; verifică ce e cu adevărat necesar

## 3. Dimensiunea țintelor tactile

Ghidurile Human Interface ale Apple cer ținte tactile de cel puțin 44×44 de pixeli. Google Material cere 48×48. Majoritatea versiunilor „mobile” ale temelor nu ating niciuna.

**Remedieri:**

- Butoane de cel puțin 44 px înălțime, cu 8-12 px padding în interior
- Linkuri de navigare de cel puțin 44 px înălțime
- Câmpuri de formular de cel puțin 44 px înălțime (ajută și la accesibilitate)
- Spațiu între țintele tactile adiacente de cel puțin 8 px

Test: deschide magazinul pe un telefon. Încearcă să atingi cu degetul mare navigarea pe categorii. Atingi pe lângă? Asta e o problemă de ținte tactile.

## 4. Particularități ale plății pe mobil

Coșul și plata pe mobil sunt locul unde se pierde cea mai mare parte din conversie. Lista concretă de făcut:

### Formulare pe o singură coloană

Formularele pe două coloane merg pe desktop, dar eșuează pe mobil. Pune fiecare câmp unul sub altul. Fără excepții.

### Tipuri de câmpuri potrivite

- Câmpul de e-mail: `type="email"` (afișează tastatura de e-mail cu simbolul @)
- Telefon: `type="tel"` (tastatură numerică)
- Cod poștal: `type="text" inputmode="numeric"` pentru țările cu coduri poștale numerice
- Numărul cardului: `type="text" inputmode="numeric" autocomplete="cc-number"` (face ca completarea automată să funcționeze)

Majoritatea platformelor fac asta corect nativ. Merită să verifici formularul pe un telefon; dacă apare tastatura greșită, repar-o.

### Compatibilitate cu completarea automată

Browserele pot completa automat numele, adresa, e-mailul, telefonul și datele cardului dacă atributele `autocomplete` ale formularului sunt corecte. Un client care atinge o sugestie de completare automată termină plata în 3 secunde. Fără completare automată, scrie manual peste 12 câmpuri.

Valorile standard pentru autocomplete: `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`.

### Buton Adaugă în coș fix pe paginile de produs

Derulezi 3 ecrane într-o pagină de produs pe mobil și butonul Adaugă în coș iese din ecran. Soluția: adaugă o bară fixă în partea de jos, cu prețul și Adaugă în coș, care apare când butonul original iese din vedere.

### Apple Pay + Google Pay + Link

Acestea sunt cele mai mari îmbunătățiri ale plății pe mobil. Plată dintr-o atingere, fără tastat; autentificare biometrică nativă.

- **Apple Pay:** se activează automat după ce îți verifici domeniul în Stripe (Shoprocket se ocupă de asta)
- **Google Pay:** similar
- **Stripe Link:** completează cardul și adresa din identitatea Link, valabilă pe mai multe site-uri

Orice plată pe mobil fără acestea pierde clienți. Activează-le pe toate trei.

## 5. Reducerea câmpurilor din formular

Fiecare câmp din plata ta pe mobil este un punct de fricțiune. Verifică-ți câmpurile:

**De obicei necesare:**

- E-mail
- Adresa de livrare (nume, stradă, oraș, cod poștal, țară)
- Datele de plată (sau Apple/Google Pay)

**Adesea cerute în exces:**

- Numărul de telefon (doar dacă ai nevoie de el pentru livrare / curieri; mulți nu au)
- Data nașterii (aproape niciodată necesară la achiziție)
- Numele companiei (doar pentru B2B)
- Înscrierea la newsletter (bifată implicit unde e legal; altfel, casetă separată)
- „De unde ai aflat de noi?” (mută-l într-un sondaj de după achiziție)

Mai puține câmpuri = plată mai rapidă = rată de finalizare mai mare. Fiecare câmp pe care îl elimini înseamnă aproximativ 5-10% îmbunătățire a finalizării plății pe mobil, cu efect cumulat.

## 6. Text lizibil și lungimea rândului pe mobil

- **Textul de bază:** minimum 16 px (valoarea implicită din iOS și recomandarea Google Material)
- **Lungimea rândului:** 45-75 de caractere
- **Înălțimea rândului:** 1,4-1,6 ori dimensiunea fontului
- **Contrast:** minimum WCAG AA (4,5:1 pentru text, 3:1 pentru text mare)

Dacă clienții fac zoom cu două degete pe descrierea produsului tău, textul e prea mic. Dacă trebuie să-și rotească telefonul ca să citească, rândul e prea lat sau fontul e prea îngust.

## 7. Utilizarea cu o singură mână

Majoritatea utilizatorilor de mobil își țin telefonul într-o singură mână, atingând cu degetul mare din dreapta jos (sau din stânga jos, pentru stângaci). Interacțiunile importante trebuie să fie în zona aceea a degetului mare.

- CTA-ul principal (Adaugă în coș, Plată, Cumpără acum) aproape de partea de jos
- Meniul hamburger sus-stânga sau sus-dreapta, la îndemâna degetului mare
- Butonul „Înapoi” previzibil (înapoi din browser bate de obicei butoanele personalizate de înapoi)

Nu cere dublă atingere în zone greu de ajuns. Fiecare moment de gimnastică cu degetul mare pierde clienți.

## 8. Pagina de produs gândită pentru mobil

Paginile de produs de desktop arată adesea totul deodată (galeria în stânga, detaliile în dreapta, descrierea dedesubt). Aranjarea aceea nu se traduce pe mobil; trebuie să pui conținutul într-o succesiune.

O succesiune eficientă pentru pagina de produs pe mobil:

1. Imaginea principală (galerie care se derulează cu degetul)
2. Titlu + preț
3. Selectorul de variante (mărime, culoare)
4. Adaugă în coș (CTA principal)
5. Semnale de încredere (notă, livrare gratuită, retururi)
6. Descriere (pliabilă, restrânsă după 3 rânduri)
7. Specificații / detalii (pliabile)
8. Rezumat al recenziilor, cu extindere „vezi toate”
9. Produse similare
10. FAQ (pliabil)

Conținutul de sub linia de plutire ar trebui încărcat leneș. Un client de pe mobil ia adesea decizia de cumpărare în primele 3 secțiuni; încărcarea tuturor lucrurilor încetinește decizia.

## 9. Testarea pe dispozitive reale

Nu DevTools. Nu emulatorul de mobil din browser. Telefoane reale, pe conexiuni celulare.

Rotația minimă de testare:

- iPhone SE (ecran mic, dispozitiv mai vechi)
- iPhone 15 Pro (cel mai nou iOS, Safari)
- Samsung Galaxy de gamă medie (Android, Chrome)
- Android mai vechi pe 4G (scoate la iveală problemele de performanță)

Bonus: roagă 3 prieteni cu telefoane diferite să încerce să cumpere ceva din magazinul tău. Uită-te la ei. Ce îi încurcă este lista ta de remedieri.

## 10. Evitarea tiparelor care ucid conversia pe mobil

Greșeli frecvente care distrug conversia pe mobil:

### Ferestre pop-up care acoperă pagina

Pop-upul „Abonează-te pentru 10% reducere!” care acoperă ecranul la intrarea pe mobil. Google le penalizează în clasamentul căutărilor mobile. Clienții dau peste ele și pleacă. Folosește în schimb înscrieri integrate în pagină.

### Video cu redare automată și sunet

Risipește lățime de bandă, enervează utilizatorii, iar iOS oricum îl blochează adesea. Redarea automată fără sunet e acceptabilă pentru un video din imaginea principală; redarea automată cu sunet este ostilă utilizatorului.

### Stări hover pe ecran tactil

„Treci cu mouse-ul ca să vezi detaliile” nu funcționează pe ecran tactil. Dacă tema ta mai are pe mobil elemente care se dezvăluie la hover, ele sunt practic stricate.

### Butoane „închide” minuscule pe ferestrele modale

Un X de 16 pixeli în colț nu poate fi nimerit cu degetul mare. Fă butoanele de închidere de 44×44 sau folosește butoane „Închide” pe toată lățimea, în partea de jos a ferestrelor modale.

### Derulare orizontală pe grilele de produse

Pe mobil, caruselurile de produse cu derulare orizontală ascund 80% din produse sub linia de plutire. O grilă verticală (2 coloane pe mobil) convertește mai bine.

## Ce rezolvă Shoprocket pentru mobil

Cea mai mare parte a lucrurilor de bază, din start:

- **Optimizare automată a imaginilor:** redimensionare + comprimare + WebP + încărcare leneșă pentru fiecare imagine de produs
- **Coș ca sertar lateral (nu coș pe pagină întreagă)** este varianta implicită pe mobil
- **Adaugă în coș fix pe mobil** este acceptat în vitrinele cu teme
- **Plată adaptată pentru mobil**, cu tipuri de câmpuri corecte, completare automată și aranjare pe o coloană
- **Apple Pay + Google Pay + Stripe Link**, plată dintr-o atingere prin Stripe
- **Widget de chat live adaptat pentru mobil**
- **Livrare prin CDN** prin Cloudflare pentru fiecare resursă
- **Optimizat pentru Core Web Vitals din start** pe vitrina găzduită

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Dacă folosești widgetul integrat: tu controlezi viteza și designul paginii din jur. Widgetul Shoprocket se încarcă leneș și nu blochează afișarea paginii tale, dar viteza generală a paginii rămâne în grija ta.

> **Sfat:** O dată pe trimestru, rulează PageSpeed Insights pe primele 3 pagini de produs după venituri, pe mobil. Notează cele trei scoruri Core Web Vitals. Trimestrul următor, compară. O tendință descendentă este un ucigaș tăcut al conversiei; prinde-o la trimestru, nu după ce s-a produs paguba.

## Pe scurt

- **Mobilul înseamnă 70-85% din trafic.** Majoritatea magazinelor îl tratează ca pe o completare ulterioară; tu nu o face
- **Core Web Vitals sunt cele trei numere de urmărit:** LCP, INP, CLS. Sub 2,5 s / 200 ms / 0,1
- **Testează pe dispozitive reale, pe 4G,** nu într-un emulator din browser
- **Particularități ale plății:** formulare pe o coloană, tipuri de câmpuri corecte, completare automată, Apple/Google Pay, CTA-uri fixe
- **Mai puține câmpuri în formular** = finalizare mai mare. Verifică ce e necesar de fapt
- **Ținte tactile de minimum 44×44.** Spațiu între ținte de minimum 8 px
- **Zona degetului mare contează.** CTA-uri principale aproape de partea de jos; hamburger sus-stânga/dreapta
- **Evită ucigașii de mobil:** ferestre care acoperă pagina, sunet cu redare automată, stări hover, butoane de închidere minuscule

[Începe o perioadă de probă gratuită](https://app-v3.shoprocket.io/signup) și primești de la prima zi optimizare automată a imaginilor + Apple Pay + plată nativă pe mobil. 14 zile, fără card.

---

- HTML version: https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata
- Language: Română (ro)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)