El motor de cerca més potent del món Google pretén millorar encara més l’experiència dels usuaris amb un nou conjunt de mètriques anomenat Core Web Vitals. Les actualitzacions es van anunciar a principis del 2020, però s’espera que es comencin a aplicar en algun moment del 2021.
Per refrescar els fonaments de l’optimització dels motors de cerca, Google publica una llista de senyals o factors que utilitza per classificar les pàgines a les SERP. Aquests senyals són patrons de comportament que Google utilitza per avaluar les webs i decidir si mereixen un lloc destacat a les pàgines de resultats.
Els patrons poden ser positius o negatius, segons com interactuen els usuaris amb el lloc web. Hi ha una interacció positiva si un usuari navega per les seves pàgines i se subscriu a un butlletí informatiu. Però si només es desplaça per la teva pàgina dinici i se’n va a un altre lloc web, això és òbviament una interacció negativa.
Els senyals de classificació de Google se centren principalment en lusuari. Alguns dels factors més importants són la qualitat del contingut, la velocitat de càrrega de la pàgina i la facilitat dús en dispositius mòbils, tot això orientat a millorar lexperiència de lusuari.
Assegurar una experiència dusuari òptima és clau per a lèxit a llarg termini de qualsevol web. Tant per al propietari d’un negoci, com per a l’especialista de màrqueting o desenvolupador Els Web Vitals us poden ajudar a quantificar l’experiència del vostre lloc i identificar oportunitats d’optimització.
Informació general
Web Vitals és una iniciativa de Google per proporcionar una guia unificada dindicadors de qualitat que són essencials per brindar una excel lent experiència dusuari a la web.
Google ha proporcionat una sèrie d’eines al llarg dels anys per mesurar i generar informes de rendiment. Alguns desenvolupadors són experts en l’ús d’aquestes eines, mentre que a d’altres els és difícil mantenir-se al dia amb l’enorme quantitat d’eines i mètriques disponibles.
Aquesta iniciativa de Google té com a objectiu simplificar el panorama i ajudar els administradors web a centrar-se en les mètriques que més importen, els anomenats Core Web Vitals .
Què són les Core Web Vitals?
Els Core Web Vitals són el subconjunt de Web Vitals que s’aplica a totes les pàgines web, tots els propietaris de llocs han de mesurar-los i apareixeran a totes les eines de Google. Cadascun dels Core Web Vitals representa una faceta diferent de lexperiència de lusuari, que es pot mesurar i reflectir lexperiència real dun resultat indispensable centrat en lusuari.
Les mètriques que componen els Core Web Vitals evolucionaran amb el temps. El conjunt actual se centra en tres aspectes de l’experiència de l’usuari: càrrega , interactivitat i estabilitat visual , i inclou les mètriques següents:
Largest Contentful Paint (LCP)
Es refereix al temps per a la càrrega del contingut més extens, LCP per les sigles en anglès, mesura el rendiment de càrrega. Per proporcionar una bona experiència d’usuari, el LCP s’ha de produir dins dels 2,5 segons des que la pàgina comença a carregar-se.
Podeu comprovar el LCP del vostre lloc a Google Search Console.
Pren nota del LCP recomanat:
- 2,5 segons o menys: Bona
- Més de 2,5 segons a 4,0 segons: Necessiteu millorar
- Més de 4,0 segons: Pobre
- Es recomana analitzar el percentil 75 de les càrregues de pàgines a tots els dispositius per assolir l’objectiu de “2,5 segons o menys” per a la majoria dels seus usuaris.
En el proper llançament de Core Web Vitals, hi haurà cinc elements que es tindran en compte per a LCP. És possible que s’hi afegeixin altres elements en el futur.
- Elements< img> ;
- Elements< imatge> dins d’un element< svg> ;
- elements< vídeo> (s’utilitza la imatge del cartell);
- Un element amb una imatge de fons carregada mitjançant la funció url (en lloc d’un gradient CSS); i Elements a nivell de bloc que continguin nodes de text o altres elements de text.
- Una pàgina amb moltes imatges dalta resolució és probable que tingui un LCP deficient. En aquest cas, és possible que hagueu de canviar la mida de les imatges o eliminar-ne algunes.
La mida de l’element, com la mida de la imatge, que es reporta per a LCP és normalment la mida visible per a l’usuari dins de la finestra gràfica del que es mostra a la pantalla. Si una imatge ha estat redimensionada a partir de la seva mida intrínsec (mida basada en el contingut d’un element, si no se li van aplicar factors externs), la mida que s’informa és la mida visible o la mida intrínsec, la que sigui menor.
Consells d’optimització per a la pintura de més contingut (LCP)
- Elimina els elements de la pàgina amb mides grans. Comproveu a cada pàgina si hi ha elements que alenteixen el LCP.
- Opta per imatges responsive que s’adaptin dinàmicament a la mida de la finestra del navegador.
- Estableix una càrrega asíncrona o “Lazy Load” que posposi la inicialització dels elements de la pàgina fins al moment que es necessitin. Les imatges només es carregaran quan l’usuari interactuï amb la pàgina.
- Elimina els scripts innecessaris de tercers, que alenteixen una pàgina una mitjana de 34 mil·lisegons.
- Elimina les parts innecessàries del teu codi mitjançant la modificació del CSS. Això redueix la mida del fitxer i accelera el temps que un navegador baixa i executa el codi.
First Input Delay (FID)
Es refereix al temps fins que es pot realitzar la primera interacció amb la pàgina web, FID per les sigles en anglès, mesura la interactivitat . Per proporcionar una bona experiència dusuari, les pàgines han de tenir un FID de menys de 100 mil·lisegons .
First Input Delay és un Core Web Vital que mesura el temps que transcorre des que un usuari real interactua amb la teva pàgina fins que el navegador pot començar a processar els esdeveniments. Aquestes interaccions poden ser fer clic a un enllaç, triar una opció de menú o escriure una adreça de correu electrònic en un camp.
Si la vostra pàgina només conté contingut, com ara una entrada de bloc, les interaccions mesurables són el desplaçament de la pàgina o l’acostament i allunyament. Però essencialment, el FID fa referència a les interaccions en què un usuari introdueix dades en un camp d’una pàgina.
Les vostres dades FID estan disponibles a Search Console.
A continuació es mostra la classificació de la puntuació FID del teu lloc web:
- 100 mil·lisegons o menys: Bé
- Més de 100 mil·lisegons a 300 mil·lisegons: Necessita millorar
- Més de 300 mil·lisegons: Pobre
- Aspireu a tenir una puntuació FID de 100 mil·lisegons o menys. Un bon llindar per mesurar és el percentil 75 de les càrregues de pàgines, segmentat entre dispositius.
Tingueu en compte, però, que el Search Console pot no tenir dades de FID a les vostres pàgines, ja que no totes les interaccions són rellevants per al FID. El FID només mesura el retard en el processament d’esdeveniments, per tant només ha de considerar el retard d’entrada.
Què causa el retard d’entrada (o la latència d’entrada)?
Els usuaris experimenten un retard dentrada quan una pàgina triga massa a respondre a esdeveniments o interaccions. La raó més comú és que el navegador està ocupat analitzant i executant un gran fitxer JavaScript. Els elements HTML, com ara els camps de text i els desplegables de selecció, han d’esperar que es completin les tasques del fil principal abans de respondre a les interaccions de l’usuari.
Consells d’optimització per al retard de la primera entrada (FID)
- Redueix el temps dexecució de JavaScript. El JavaScript que triga massa a executar-se comporta diversos costos, com els de xarxa, els danàlisi i compilació i els dexecució. Com s’executa al fil principal, retarda el teu Temps d’Interacció (TTI).
- Redueix limpacte del codi de tercers. El JavaScript de tercers són scripts incrustats al vostre lloc web que no són de la vostra autoria o que se serveixen des de servidors de tercers. Per no afectar el rendiment de les pàgines, audita i neteja regularment els scripts de tercers redundants.
- Minimitza el treball del fil principal. El fil principal del procés de renderització sol encarregar-se de la major part de la feina de convertir el teu codi en una pàgina amb què els usuaris puguin interactuar. Si el fil principal està ocupat, com quan executeu un JavaScript de grans dimensions, és possible que les vostres pàgines no responguin immediatament a les interaccions de l’usuari.
Cumulative Layout Shift (CLS)
Es refereix al canvi acumulatiu en el disseny, CLS per les sigles en anglès, mesura l’estabilitat visual . Per proporcionar una bona experiència dusuari, les pàgines han de mantenir un CLS de menys de 0,1.
El tercer Google Core Web Vital és el canvi de disseny acumulatiu que mesura l’estabilitat d’una pàgina mentre es carrega. L’estabilitat visual ajuda a garantir que no es produeixi un moviment inesperat del contingut de la pàgina, com ara que els textos i els enllaços es moguin o canviïn de lloc mentre es carrega una pàgina (o canvi de disseny).
La inestabilitat es produeix quan els recursos es carreguen de forma asíncrona o els elements del DOM s’injecten dinàmicament a la pàgina per sobre dels elements existents. Les imatges, els anuncis, les incrustacions i els iframes sense dimensions també poden provocar un CLS deficient.
CLS analitza totes les puntuacions de canvis de disseny individuals per a cada canvi de disseny inesperat durant la vida duna pàgina. Els canvis de disseny només es produeixen quan els elements existents canvien la posició inicial. A més, un canvi afecta negativament la puntuació de CLS només si l’usuari no s’ho espera. Si un canvi de disseny és iniciat per lusuari o es produeix en resposta a la interacció de lusuari, com fer clic en un enllaç, la puntuació CLS no es veu afectada.
Pots comprovar la teva puntuació CLS a Search Console o PageSpeed Insights:
- 0,1 o menys: Bona
- Més de 0,1 a 0,25: Necessiteu millorar
- Més de 0,25: Pobre
- T’hauries d’esforçar per tenir una puntuació CLS de menys de 0,1 o per garantir als usuaris una bona experiència a la pàgina.
Consells d’optimització per al canvi de disseny acumulatiu (CLS)
- Inclou atributs de mida a les imatges i els elements de vídeo per garantir que el navegador de l’usuari pugui assignar la quantitat correcta d’espai que aquest element utilitzarà en una pàgina. També podeu reservar l’espai necessari amb quadres de relació d’aspecte CSS.
- Evita inserir contingut sobre l’existent, tret de resposta a la interacció de l’usuari. Recordeu que un canvi de disseny està bé sempre que l’usuari l’esperi. Reserva suficient espai a la finestra gràfica per evitar que els elements de la pàgina es desplacen de manera sorprenent.
- Desa espai estàtic per reduir el desplaçament dels anuncis. Reserva la mida més gran possible per als anuncis, però assegura’t que omplen l’espai; altrament, t’arrisques a tenir un espai negre.
- Trieu les animacions de transformació en lloc de les animacions de les propietats que desencadenen els canvis de disseny. Tingueu en compte que algunes propietats CSS provoquen canvis en el disseny quan es modifiquen. Aquestes propietats inclouen amplada i alçada, marge i família de fonts.
- Deixa prou espai per a les incrustacions amb un marcador de posició o un recurs. Les incrustacions, com els vídeos de YouTube i les publicacions a les xarxes socials, solen ocupar molt d’espai, cosa que provoca canvis de disseny quan es carreguen.
Eines per mesurar els Core Web Vitals
El Chrome User Experience Report (Informe d’experiència de l’usuari de Chrome) recopila dades de mesura d’usuaris reals i anònims per a cada Core Web Vital.
Aquestes dades permeten als administradors web avaluar ràpidament el rendiment sense haver d’instrumentar manualment les anàlisis a les seves pàgines, i potencien eines com PageSpeed Insights i l’ informe de Core Web Vitals de Google Search Console.
| LCP | FID | CLS | |
| Chrome User Experience Report | ✔ | ✔ | ✔ |
| PageSpeed Insights | ✔ | ✔ | ✔ |
| Search Console (Core Web Vitals Report) | ✔ | ✔ | ✔ |
Evolució dels Web Vitals
Els Web Vitals i els Core Web Vitals són els millors indicadors disponibles que els desenvolupadors tenen actualment per mesurar la qualitat de l’experiència a la web, però aquests KPIs no són perfectes i cal millorar molt els seus sistema de mesurament.
Els canvis en aquestes mètriques tindran un impacte de gran abast; per això, els desenvolupadors han d’esperar que les definicions i els llindars de Core Web Vitals siguin estables i que les actualitzacions passin amb un previ avís i una cadència anual predictible.
Punts clau
Si milloreu l’experiència de l’usuari al vostre lloc web, fomentareu la navegació. Les Google Core Web Vitals “són un conjunt de mètriques, centrades a l’usuari, que quantifiquen aspectes clau de l’experiència de l’usuari”. Aquestes serveixen de guia per millorar encara més lexperiència de la pàgina i, en última instància, us ajuden a assolir els vostres objectius doptimització web.
En explorar aquestes noves Web Vitals, recorda aquests punts principals:
- Pots millorar el LCP o la mètrica relativa a la velocitat de càrrega eliminant els elements de grans dimensions i els scripts innecessaris de tercers. Treu qualsevol element, especialment de JavaScript, que alenteixi el teu LCP.
- Millora la puntuació FID o el temps que transcorre abans que l’usuari interactuï realment amb la teva pàgina reduint el temps d’execució de JavaScript, netejant els scripts de tercers i minimitzant el treball del fil principal.
- Pots millorar el teu CLS o la mètrica de l’estabilitat visual establint atributs de mida als elements de la pàgina, reservant espai per als anuncis i les incrustacions, i triant animacions de transformació que evitin els canvis de disseny.
- Quan feu canvis al vostre lloc web, col·loqueu sempre l’experiència de l’usuari al top de les vostres prioritats. Al capdavall, els senyals de classificació de Google se centren en lusuari.
