Evaluează metricile separat pentru mobil și desktop

Subiect din roadmap-ul Bune practici: performanța frontend · parte din „Core Web Vitals”

Această practică implică monitorizarea independentă a experienței utilizatorilor pe dispozitive mobile față de cele desktop, deoarece performanța nu este uniformă între cele două medii. Ignorarea acestei diferențe poate duce la o imagine distorsionată asupra calității aplicației, ascunzând probleme critice de încărcare sau interactivitate pe mobil, unde conexiunile sunt mai lente și hardware-ul mai slab. Deoarece majoritatea traficului web provine acum de pe telefoane, o experiență proastă aici afectează direct conversiile și SEO-ul, chiar dacă versiunea desktop funcționează impecabil.

Cum o aplici

  1. Configurează instrumentele de monitorizare (cum ar fi Google Analytics 4 sau Lighthouse CI) să segmenteze datele după device_category.
  2. În setările de raportare, creează vizualizări separate sau filtre personalizate pentru „mobile” și „desktop”.
  3. La testarea automatizată, asigură-te că emulatorul sau dispozitivul fizic simulează corect condițiile rețelei mobile (ex: 3G/4G lent) și hardware-ul limitat.
  4. Definește obiective de performanță distincte pentru fiecare platformă, recunoscând că standardele pentru mobil pot necesita compromisuri diferite față de desktop.

Exemplu

Într-un script de testare Lighthouse, este greșit să rulezi o singură dată fără a specifica contextul, obținând o medie generală.

// Varianta GREȘITĂ: Nu separă contextul, riscă mascarea problemelor mobile
const report = await lighthouse(url, { port: 9222 });

// Varianta CORECTĂ: Specifică deviceType pentru a forța simularea mobilă
const mobileReport = await lighthouse(url, { 
  port: 9222,
  settings: { 
    formFactor: 'mobile',
    throttlingMethod: 'simulate' // Simulează CPU/RAM slab
  } 
});

În Google Analytics, folosește rapoarte precum „Tech Overview > Network” filtrate după Device Category pentru a vedea Core Web Vitals separat.

Cum verifici

Verifică consola de dezvoltator sau tab-ul „Performance” din Chrome DevTools, asigurându-te că indicatorii LCP, FID și CLS sunt evaluați sub profilul de dispozitiv mobil. Folosește instrumentul PageSpeed Insights inserând URL-ul și selectând explicit opțiunea „Mobile” versus „Desktop”; compară scorurile rezultate. Monitorizează dashboard-ul Google Search Console secțiunea „Core Web Vitals”, unde datele sunt deja agregate per tip de dispozitiv pentru a identifica paginile care eșuează doar pe mobil.

Greșeli frecvente

  • Media eronată: Calcularea unei medii globale a metricilor, ceea ce poate masca faptul că 80% din utilizatorii mobili au o experiență proastă, în timp ce desktopul este excelent.
  • Simulare incorectă: Testarea pe desktop folosind doar redimensionarea ferestrei browserului, fără a activa throttling-ul pentru CPU și rețea, ignorând astfel limitele reale ale dispozitivelor mobile.
  • Ignorarea rețelei: Testarea performanței doar pe Wi-Fi rapid, uitând că mulți utilizatori mobil accesează site-ul prin 4G instabil sau 3G lent, unde impactul metricilor este mult mai acut.

Resurse gratuite

Alte subiecte din „Core Web Vitals”