Les Core Web Vitals són una de les últimes incorporacions a l'algorisme de Google com a factor de posicionament i cada cop aniran agafant més pes.
En resum es tracta daconseguir la millor experiència dusuari possible quan un usuari està visitant una pàgina web.
Així doncs, les Core Web Vitals són mètriques que se centren a avaluar lexperiència que obtenen els visitants quan arriben a una pàgina web.
Ja no es tracta simplement davaluar el temps de càrrega (la velocitat de la pàgina) sinó que Google ha afegit uns quants paràmetres més.
Continguts
Què avalua Google per determinar la qualitat de l'experiència a la pàgina?
- Mobile-friendly: imprescindible per puntuar en l'algorisme que la pàgina estigui ben optimitzada per a mòbils.
- Neteja d'infeccions: No hi pot haver codi maliciós ni res de codi sospitós. Si t'infecten la web has de netejar ràpidament i informar a Google.
- Certificat de seguretat, SSL : La pàgina ha d'estar publicada a https.
- Sense popups intersticials que impedeixin veure el contingut principal i/o que impedeixin navegar correctament.
- Core Web Vitals: La pàgina ha de carregar ràpidament i tenir una bona estabilitat visual.
Mètriques Core Web Vitals
LCP
Càrrega: renderitzat de l'element més gran d'una pàgina o Largest Contentful Paint (LCP)
Aquesta mètrica fa referència al rendiment de càrrega duna pàgina web i mesura la velocitat de càrrega percebuda per l'usuari. Així doncs, ens avalua quant de temps es triga a mostrar els elements que són importants per a l'usuari.
Google i la W3C van determinar que la manera més precisa de mesurar quan es carrega el contingut principal d'una pàgina és quan s'ha renderitzat l'element més gran (quan tot s'ha carregat completament).
Per exemple:
Una pàgina té contingut cridaner i molt elaborat, amb una gran oferta, com pot ser un banner a la part superior de la pàgina, això normalment és més “pesat” de carregar i moltes vegades deixa uns segons tota aquesta part de la pàgina en blanc , tenint una informació molt important que o bé posarà l'usuari en context del que trobareu a la resta de la pàgina o bé té la super oferta que volem que ens compri. Això, si triga 5 o 6 segons a carregar-se, no serveix de gaire ja que probablement l'usuari no tingui paciència i marxi a una altra web perquè durant el temps que ha estat esperant només ha vist un tros de pàgina en blanc.
Google s'ha adonat que això provoca molt de rebot i ho ha començat a penalitzar.
Per aquest valor, Google ens dóna com a referència 2,5 segons. Així doncs, tota la part superior de la pàgina s'ha de carregar abans d'aquest temps.
Quan tota la teva pàgina s'acabi de carregar, aquest serà el teu LCP i si el teu LCP és lent tindràs pitjors posicions i si el teu LCP és ràpid les tindràs millors. Sembla simple, oi?
Quins elements es consideren per avaluar el LCP?
- elements
- elements dins d'un element
- elements (s'utilitza la imatge del cartell)
- Un element amb una imatge de segon pla que es carrega a través de la funció url() (a diferència d'un gradient CSS)
Com saber el LCP de la teva pàgina web?
Hi ha diverses eines que poden avaluar aquesta mètrica, les nostres preferides són:
- Llum
- Consola de cerca de Google
FID
Interactivitat: latència de la primera interacció o First Input Delay (FID)
Aquesta mètrica mesura el temps entre la primera interacció dun usuari amb la pàgina i el moment en què el navegador pot respondre a aquesta interacció. És el temps que transcorre entre que un usuari fa una acció fins que la pàgina web respon a aquesta acció. D'aquesta manera es quantifica l'experiència que els usuaris senten quan intenten interactuar amb pàgines que no responen o responen extremadament lent. A web i també en altres aspectes de la vida sempre és molt important la primera impressió, i en aquesta mètrica es mesura aquesta primera impressió, podent marcar la diferència entre tenir usuaris o tenir clients
Un bon valor FID serà per sota dels 100 mil·lisegons. Així doncs, com més baixa sigui la mètrica FID, millor garantia que la pàgina sigui usable i que Google us posicioni millor.
Per exemple:
Acabes d'emplenar els camps d'un formulari i fas clic a “enviar”, a la pàgina “no passa res” i et quedes esperant o bé algun missatge o bé algun senyal conforme el teu formulari s'està enviant. Això pot provocar 2 coses, per una banda que l'usuari li de 100 vegades al botó pensant que no ha funcionat o per altra banda, li pot provocar frustració de no obtenir el resultat esperat i també pot acabar abandonant i tu pots perdre una venda.
Quins elements HTML han d'esperar que es completin les tasques en curs abans de respondre les interaccions de l'usuari?
- Camps de text, caselles de verificació i botons d'opció ( , )
- Seleccionar menús desplegables ( )
- Enllaços ( )
- Etc...
Com saber el FID de la teva pàgina web?
Les nostres eines preferides són:
- PageSpeed Insights
- Consola de cerca de Google
CLS
Estabilitat visual: canvis de disseny acumulats o Cumulative Layout Shift (CLS)
Aquesta mètrica tracta de la freqüència de canvis inesperats en el disseny i l'estabilitat visual general d'una pàgina web.
Per exemple:
Estàs navegant per una pàgina web i just quan faràs clic en un botó es carrega un altre contingut que fa que acabis clicant sobre un altre botó que no és el que tu volies. Després has de tornar enrere i buscar el contingut i el botó en què sí que volies fer-li clic. Amb una mica de sort ho trobaràs, però en alguns casos no serà una tasca ràpida. També és un bon exemple d'aquesta mala experiència d'usuari que es vagin carregant vídeos o banners de publicitat mentre llegiu algun contingut del vostre interès.
En el cas de la mètrica CLS, l'objectiu és tenir una puntuació tan propera com sigui possible a zero. Com menys intrusius i frustrants siguin els canvis a la pàgina, millor.
Ara que ja saps que són les Core Web Vitals, en un proper article, t'explicarem com pots millorar aquestes mètriques.
Descobreix el nou Hosting WordPress de Nominalia. Ràpid, Segur i Confiable.