Salta al contingut

Core Web Vitals sense tecnicismes: què són i com millorar-los

Actualitzat: Lectura: 6 minuts

Dial daurat de precisió al costat de formes geomètriques de llautó i marbre sobre pedra fosca

Els Core Web Vitals són tres mètriques amb què Google mesura com de ràpid, reactiu i estable resulta el teu web per a una persona real: LCP (quant triga a veure’s el contingut principal), INP (quant triga a respondre quan toques alguna cosa) i CLS (quant es mou el contingut mentre carrega). Es mesuren gratis i gairebé sempre es milloren amb canvis concrets en imatges, tipografies i scripts.

No cal saber programar per entendre-les. Sí que convé conèixer-les, perquè un web lent perd visites abans que llegeixin ni una sola paraula.

Què són els Core Web Vitals?

Són el conjunt de mètriques d’experiència d’usuari que Google considera essencials. Formen part dels senyals d’experiència de pàgina, juntament amb factors com que el web sigui segur (HTTPS) i es vegi bé al mòbil.

Important: no substitueixen un bon contingut. Un text útil i rellevant pesa més que unes dècimes de segon. Però entre dos webs semblants, el més ràpid i estable té avantatge, i sobretot converteix millor: la gent no espera ni es frustra.

Les tres mètriques, explicades

Llindars dels Core Web Vitals: LCP bo fins a 2,5 segons, INP fins a 200 mil·lisegons i CLS fins a 0,1LCP · Velocitat de càrregaQuant triga a veure's el contingut principalBo≤ 2,5 sMillorable2,5 – 4 sDolent> 4 sINP · RespostaQuant triga a reaccionar a un clic o tocBo≤ 200 msMillorable200 – 500 msDolent> 500 msCLS · Estabilitat visualQuant es mou el contingut en carregarBo≤ 0,1Millorable0,1 – 0,25Dolent> 0,25
Els tres llindars de Google, d'un cop d'ull.

LCP: quant triga a aparèixer el contingut principal

Largest Contentful Paint. Mesura el temps fins que es mostra l’element més gran de la pantalla, normalment la imatge principal o el titular.

  • Bo: 2,5 segons o menys.
  • Necessita millorar: entre 2,5 i 4 segons.
  • Dolent: més de 4 segons.

INP: quant triga a respondre

Interaction to Next Paint. Mesura la rapidesa amb què el web reacciona quan fas clic, toques un menú o escrius en un formulari. Va substituir l’antiga mètrica FID.

  • Bo: 200 mil·lisegons o menys.
  • Necessita millorar: entre 200 i 500 mil·lisegons.
  • Dolent: més de 500 mil·lisegons.

CLS: quant es mou el contingut

Cumulative Layout Shift. Mesura els salts visuals. És aquella molèstia d’anar a prémer un botó i que es desplaci perquè acaba de carregar un anunci o una imatge.

  • Bo: 0,1 o menys.
  • Necessita millorar: entre 0,1 i 0,25.
  • Dolent: més de 0,25.

Google avalua aquestes xifres amb dades d’usuaris reals i es fixa en el percentil 75: per aprovar, tres de cada quatre visites han de complir el llindar.

Com mesurar el teu web gratis

  1. PageSpeed Insights (pagespeed.web.dev): escriu l’adreça d’una pàgina i veuràs les dades d’usuaris reals, si hi ha prou visites, i una anàlisi amb recomanacions.
  2. Google Search Console: l’informe d’experiència, dins de «Core Web Vitals», agrupa les pàgines del teu web per estat (bones, a millorar, dolentes) tant al mòbil com a l’ordinador.
  3. Lighthouse a Chrome: dins de les eines per a desenvolupadors, ofereix una prova controlada que serveix per comprovar si un canvi concret millora alguna cosa.

Mesura sempre al mòbil, que és on la majoria de webs surten pitjor. I recorda que les dades de laboratori (Lighthouse) i les d’usuaris reals (PageSpeed i Search Console) poden diferir: mana la segona.

Què canviar primer per millorar-los

Mètrica Causa més habitual Primer arranjament
LCP Imatge principal massa pesada Comprimir-la i fer servir WebP o AVIF
INP Scripts de tercers i plugins innecessaris Eliminar o endarrerir els que no aportin
CLS Imatges i bàners sense espai reservat Indicar amplada i alçada de cada element

Detall de cadascuna:

Per a l’LCP

  • Comprimeix i redimensiona les imatges, i fes servir formats moderns com WebP o AVIF.
  • No carreguis en diferit (lazy loading) la imatge principal de la pàgina: ha d’aparèixer com més aviat millor.
  • Revisa l’allotjament: un servidor lent endarrereix tota la resta.
  • Evita sliders i vídeos pesats a la capçalera.

Per a l’INP

  • Elimina plugins i scripts que no aportin res (xats, ginys, píxels duplicats).
  • Endarrereix els scripts de tercers fins que siguin necessaris.
  • Menys JavaScript és gairebé sempre millor: per això els llocs generats com a pàgines estàtiques solen anar molt bé.

Per al CLS

  • Indica sempre l’amplada i l’alçada d’imatges i vídeos per reservar-ne l’espai.
  • Reserva espai per a bàners de cookies, anuncis i formularis incrustats.
  • Carrega les tipografies de manera que no canviïn el disseny en aparèixer.

Influeix la tecnologia del web?

Molt. Un web construït amb un tema pesat i vint plugins parteix d’una base lenta, mentre que un web lleuger que lliura HTML ja generat ho té més fàcil. Ho expliquem en comparar WordPress, Astro i desenvolupament a mida. Tot i això, cap tecnologia garanteix bons resultats: depèn de com es construeixi i es mantingui, i per això el manteniment web també compta.

Quan val la pena arreglar-ho i quan refer

Si els problemes són imatges pesades i algun plugin sobrant, s’arregla en hores. Si la base tècnica és lenta d’arrel, de vegades compensa més reconstruir: t’expliquem quan refer el teu web i quan n’hi ha prou amb millorar-lo.

Conclusió

Mesura el teu web a PageSpeed Insights, anota les tres xifres i ataca primer el més pesat: normalment les imatges. No cal obsessionar-se amb una puntuació perfecta, sinó que el web carregui amb rapidesa, respongui a l’instant i no es mogui.

A Find The Gap desenvolupem webs ràpids des del principi i revisem els existents. Coneix el nostre servei de desenvolupament web o explica’ns el teu projecte.

Demana una revisió del teu web

Parlem?

Si vols resultats, cal fer les coses amb sentit

Estratègia, disseny i desenvolupament han de treballar junts. T'ajudem a plantejar-ho bé des del principi.

Política de privacitat