PageSpeed nu este doar un scor de vanitate. Google confirma ca LCP este factor de ranking direct, ca utilizatorii cu LCP peste 4s abandoneaza pagina in proportie de 90% si ca fiecare secunda de intarziere costa aproximativ 7% din rata de conversie. Am adus 47 de site-uri la scor 90+ — iata metodologia noastra completa.
Ce sunt Core Web Vitals si ce praguri trebuie sa atingi in 2025
- LCP (Largest Contentful Paint): Cat dureaza sa se incarce cel mai mare element vizibil. Target: sub 2.5 secunde (Bun) | sub 4s (Mediu) | peste 4s (Slab)
- CLS (Cumulative Layout Shift): Cat de mult se misca elementele paginii in timp ce se incarca. Target: sub 0.1 (Bun) | sub 0.25 (Mediu) | peste 0.25 (Slab)
- INP (Interaction to Next Paint): Inlocuieste FID din 2024. Masoara cat de repede raspunde pagina la click-uri si tap-uri. Target: sub 200ms (Bun) | sub 500ms (Mediu) | peste 500ms (Slab)
LCP sub 2.5 secunde — metodologie pas cu pas
- Identifica elementul LCP: foloseste DevTools > Performance > LCP sau web.dev/measure
- Preload LCP image: adauga link rel=preload as=image href=hero.webp fetchpriority=high in head — castig tipic: 0.5-1.5s
- Converteste imaginile in WebP/AVIF: reducere medie de 60-80% fata de JPEG, fara pierdere vizibila de calitate
- Serveste imaginile de pe CDN: Cloudflare Free tier este suficient pentru majoritatea site-urilor romanesti — latenta redusa de la 80ms la 15ms
- Elimina render-blocking resources: CSS si JS care blocheaza randarea. Verifica cu Coverage tool din DevTools
- Foloseste server-side rendering (SSR): pentru Vue.js/React, SSR reduce LCP cu 0.8-2s fata de client-side rendering
CLS — cum elimini salturile de layout
- Imagini fara dimensiuni explicite: adauga intotdeauna width si height pe img — browser-ul rezerva spatiul inainte de descarcare
- Web fonts care inlocuiesc sistemul font: foloseste font-display: swap plus size-adjust pentru a minimiza layout shift
- Ads si embeds fara spatiu rezervat: rezerva un div cu dimensiunea minima asteptata inainte de a incarca ad-ul
- Animatii CSS care schimba layout: margin, padding, height in animatii cauzeaza reflow. Foloseste transform si opacity in schimb
INP — optimizarea interactivitatii
- JavaScript heavy pe main thread: cod JS care ruleaza sincron si blocheaza click-urile — foloseste requestIdleCallback si Web Workers
- Event listeners excesivi: sute de listeners pe elemente din scroll — foloseste event delegation
- Third-party scripts: Google Tag Manager cu 15+ taguri, chat widgets, analytics — fiecare script adauga 20-200ms la INP
- Long tasks peste 50ms: identifica cu DevTools > Performance > Main thread tasks si sparge-le in chunk-uri mai mici
Fonturi: cea mai usoara victorie de PageSpeed
Google Fonts adauga 300-500ms la Time to First Byte prin cereri externe (DNS lookup + download CSS + download font files). Solutia: self-host fonturile in woff2. Procesul: descarca fontul, converteste in woff2 cu Transfonter.org, adauga in CSS cu @font-face, adauga link rel=preload as=font in head. Castig tipic in PageSpeed: 8-15 puncte.
Specificul pentru Laravel + Vue.js: stack-ul nostru principal
- SSR cu Inertia: activarea SSR reduce LCP cu 0.8-2s — pagina HTML completa vine de la server, nu se construieste in browser
- Code splitting Vite: defineAsyncComponent pentru componentele mari (editors, dashboards) — nu le incarca pe pagina de start
- Lazy loading imagini: loading=lazy pe toate imaginile below-the-fold — reducere de 30-60% la dimensiunea paginii initiale
- Laravel Octane: pentru site-uri cu trafic mare, Octane cu Swoole reduce TTFB de la 150ms la 15ms
- Cache agresiv cu Spatie Response Cache: paginile statice sau semi-statice servite direct din Redis — 0ms procesare PHP
WordPress: optimizare fara plugin bloat
- Hosting NVMe cu PHP 8.2+: evita hosting-ul shared ieftin — latenta serverului singur poate dura 1-3s
- WP Rocket sau FlyingPress: cache page, preload, CSS/JS defer — nu instala 10 plugin-uri separate
- Imagini cu Imagify sau ShortPixel: compresie WebP automata cu CDN integrat
- Dezactiveaza Emojis, Embeds, XML-RPC: functionalitati WordPress ce adauga JS/CSS inutil pe fiecare pagina
Solicita un audit PageSpeed gratuit pentru site-ul tau. Iti furnizam un raport detaliat cu exact ce blocheaza scorul 90+ si care sunt pasii prioritari de optimizare.
Consultanță Gratuită #pagespeed #core web vitals #lcp #cls #inp #laravel #wordpress #optimizare site