Què són les Core Web Vitals? – Guia per a accelerar la teua web

Les Core Web Vitals representen la qualitat de l’experiència d’usuari que aporta un lloc web, millorar la teua puntuació en les Core Web Vitals t’ajudarà a classificar millor en Google, millorar la satisfacció dels teus visitants i aconseguir més vendes.

En este article t’explicarem tot sobre les Core Web Vitals, i si també vols saber quines altres recomanacions pots seguir per a millorar l’experiència d’usuari en el teu negoci, pots visitar esta llista dels 19 consells més importants per a millorar l’experiència d’usuari.

Què són les Core Web Vitals?

Les Core Web Vitals són un conjunt de mètriques creades per Google per a mesurar i representar de manera quantitativa el nivell de qualitat que té una pàgina pel que fa a l’experiència d’usuari que oferix.

Cada una de les mètriques que componen les Core Web Vitals representa un aspecte important de l’experiència d’usuari i la unió d’estes 3 mètriques representa la qualitat d’una pàgina en relació amb com d’agradable pot ser per a un usuari a l’hora d’interactuar-hi.

Mètriques Core Web Vitals

Les Core Web Vitals estan formades per 3 mètriques creades per Google que es relacionen amb la velocitat de càrrega, la interactivitat del lloc i l’estabilitat visual dels elements. 

Cada una d’estes mètriques tindrà un llindar de puntuació diferent que representarà la situació de la teua pàgina respecte a eixa mètrica.

Largest Contentful Paint (LCP)

Largest Contentful Paint o LCP fa referència al temps que es tarda a renderitzar l’element de major grandària que es troba dins de la primera pintura del contingut de la pàgina.

El temps que es té en compte a l’hora de valorar la puntuació de la mètrica LCP comença des del moment en què la pàgina va començar a carregar-se.

Puntuació LCP:

LCP és la mètrica que representa la velocitat d’una pàgina web, una puntuació de la mètrica Largest Contentful Paint inferior a 2.5 segons es considera bona i podria interpretar-se com que eixa url no té problemes de velocitat.

First Input Delay (FID)

First Input Delay o FID fa referència al temps que transcorre des que un usuari intenta utilitzar la pàgina per primera vegada fins que el navegador respon.

Esta interacció pot ser qualsevol funció que s’execute de manera interactiva, com prémer un botó o fer clic en un enllaç, i des d’eixe moment es comença a avaluar el temps fins que el navegador és capaç de començar a processar eixe esdeveniment.

Puntuació FID:

La mètrica FID representa de manera quantitativa com d’interactiva és la pàgina, i una puntuació inferior a 100 mil·lisegons indicarà que la teua pàgina és interactiva per a l’usuari.

Esta és una mètrica més difícil de valorar, ja que la puntuació serà millor o pitjor segons quan i com interactue l’usuari.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift o CLS fa referència a l’estabilitat visual del lloc, és a dir, una pàgina amb una puntuació de CLS alta és una pàgina que presenta un disseny agradable en què els usuaris no experimenten canvis de disseny inesperats.

El CLS es pot considerar un aspecte important per a l’experiència d’usuari, ja que una pàgina en què els elements no es mantenen estables fins que es carrega completament pot generar una impressió desagradable.

Puntuació CLS:

Per a considerar que una pàgina té una bona estabilitat visual, la mètrica CLS hauria de situar-se per davall de 0.1.

Això vol dir que cada vegada que un element visible modifica la seua posició d’un fotograma renderitzat al següent, siga inestable durant un temps inferior a 1 segon.

Per què són importants les Core Web Vitals i com afecten el SEO?

Les Core Web Vitals són importants perquè formen part de l’algoritme de Google per a avaluar la qualitat de l’experiència de la pàgina.

En 2020 Google va anunciar les anomenades Core Web Vitals i a partir de 2021 es van implementar com a factor de classificació.

Tant en les actualitzacions més recents de l’algoritme com en actualitzacions molt més antigues, com Google Panda en 2011, es menciona la importància de l’experiència de l’usuari, en la qual influïxen les Core Web Vitals.

Tenint en compte que les Core Web Vitals són una representació de la usabilitat d’un lloc web, tindran un impacte en el SEO de la teua web.

A més, una experiència de pàgina positiva no sols es traduïx en millors classificacions i més visites, sinó que també reduirà la taxa de rebot en el lloc, donarà la possibilitat d’augmentar el nombre de conversions, farà més probable fidelitzar l’usuari, etc.

Com millorar la puntuació en les Core Web Vitals?

Per a millorar la puntuació en les mètriques Core Web Vitals, primer hauràs de mesurar i obtindre dades per a saber quin és l’estat del teu lloc, conéixer quins són els aspectes que fallen o on tens marge de millora i actuar.

Eines per a mesurar les Core Web Vitals

A l’hora de mesurar la puntuació en les mètriques web principals, es poden obtindre dos tipus de dades:

• Dades de laboratori: són dades que s’obtenen amb eines que carreguen la pàgina simulant com ho faria un usuari.
• Dades de camp: són dades obtingudes d’usuaris reals que han interactuat amb el teu lloc.

Google Search Console

L’eina Google Search Console, en el seu apartat d’informes d’experiència, oferix un informe amb dades de les mètriques web principals.

Estes dades són interessants per a valorar la qualitat del lloc perquè es basen en la informació obtinguda d’usuaris reals.

En este informe de Search Console tindràs dades sobre la quantitat d’urls que es troben en cada estat (ràpides, necessiten millorar o pobres) i, si accedixes a l’informe, podràs conéixer quina és la mètrica o les mètriques que fallen o necessiten millora.

Page Speed Insight

Page Speed Insight és una altra eina de Google, que en este cas oferix tant dades d’usuaris reals (quan n’hi ha prou) com dades de laboratori, és a dir, un diagnòstic en temps real fet per Google.

Així es mostra un panell de l’avaluació de les mètriques web:

Així es mostra un panell del rendiment en temps real:

En la part inferior de l’informe de rendiment t’aporta dades sobre quins són els problemes crítics, els punts de millora i els aprovats amb èxit, per a la versió mobile i desktop.

Lighthouse

Lighthouse, novament una eina de Google que permet obtindre dades per a mesurar les Core Web Vitals.

L’eina Lighthouse t’aporta dades de laboratori de manera semblant a Page Speed Insight, però esta eina va un poc més enllà de mesurar el rendiment i també aporta dades de SEO, PWA i altres bones pràctiques.

Per a avaluar les Core Web Vitals amb Lighthouse, en el cas de la mètrica First Input Delay (FID), es pot relacionar amb les dades obtingudes de la mètrica Total Blocking Time.

Total Blocking Time (TBT) mesura el temps que la pàgina es troba “bloquejada”, és a dir, el temps que transcorre fins que un usuari pot interactuar-hi, la qual cosa pot ser una manera més precisa de conéixer el FID.

Com millorar les mètriques Core Web Vitals?

Per a millorar la puntuació de les mètriques web principals, haurem de buscar accions que vagen dirigides a fer que la teua pàgina siga interactiva (FID), ràpida (LCP) i amb una bona estabilitat visual (CLS).

Millorar el First Input Delay (Interactivitat)

La causa o el problema més freqüent que afecta la mètrica First Input Delay sol ser que els recursos es carreguen de manera desordenada i estos desordres en el codi fan que no es puguen executar els esdeveniments perquè eixa funció siga interactiva ràpidament.

Per exemple, en el cas que el navegador estiga ocupat carregant un arxiu JavaScript pesat i mentrestant no puga carregar cap esdeveniment, com pot ser que es desplegue el menú.

La solució és ordenar estos scripts i imatges i sol·licitar al navegador que s’executen en l’orde adequat.

Per a això, utilitza la càrrega asíncrona o diferida per a estos recursos..

Executar els arxius JavaScript de manera asíncrona i diferida permet al navegador carregar els elements visibles de la pàgina al mateix temps que es descarrega el JavaScript.

En el cas de la càrrega async, l’script es descarregarà al mateix temps que s’analitza l’HTML, però s’executarà una vegada estiga descarregat. 

En el cas de la càrrega diferida, l’execució de l’script es produïx al final i l’anàlisi de l’HTML no es pausa.

Cumulative Layout Shift (Estabilitat visual)

Algunes de les causes més freqüents dels problemes de CLS són els elements sense dimensions especificades.

Els mitjans visuals (imatges, vídeos, iframes, etc.) sense grandària especificada poden ser un dels principals problemes que causen una mala estabilitat visual.

Per a solucionar este problema, inclou les etiquetes height i width especificant les dimensions de l’element, i d’esta manera el navegador sap quant d’espai necessitarà eixe element i no es modificarà a mesura que es carrega la web.

Altres elements, com els anuncis o els elements incrustats (per exemple, tweets), també poden causar problemes en l’estabilitat visual, i en alguns casos pot ser un poc més complicat de solucionar.

Per exemple, en el cas dels anuncis, la solució pot ser crear un element div especificant el height i el width al qual s’ajustarà l’anunci.

Largest Contentful Paint (Velocitat)

Principalment, la puntuació en el LCP es veu afectada per:

• Servidor lent.
• Arxius que bloquegen el renderitzat
• Imatges o elements molt pesats

Servidor lent

La mètrica TTFB és una manera quantitativa de conéixer el rendiment del servidor, i el temps que indica esta mètrica és quan el servidor permet que es comence a carregar la pàgina, la qual cosa tindrà un gran impacte en el LCP.

Pràctiques recomanades per a millorar el temps de resposta del servidor:

• Revisa si necessites un pla de hosting superior o canviar el teu proveïdor actual.
• Utilitza un CDN per a carregar el teu lloc prop de la ubicació de l’usuari.
• Activa l’emmagatzematge en memòria cau.

Arxius que bloquegen el renderitzat

Carregar els arxius Js i Css de manera asíncrona o diferida, igual que beneficia la mètrica FID, en el cas del LCP també és important, ja que permet que no es bloquege la representació de l’element mentre es carrega un altre arxiu.

Imatge o elements molt pesats

Com que el LCP probablement serà una imatge bonica o un contingut multimèdia, és recomanable aplicar algunes pràctiques per a millorar la velocitat dels elements multimèdia:

• Utilitza un format d’imatge adequat (per exemple (JPG) i oferix que es convertisquen a format WebP si és possible)
• Pujar les imatges amb les dimensions màximes adequades i optimitzades.
• Si uses GIFs intenta optar per vídeos, ja que un GIF possiblement serà un problema pel que fa a la velocitat de càrrega.

Resum

En conclusió, les Core Web Vitals són un conjunt de mètriques importants per al SEO i per a l’èxit del negoci en general.
Les Core Web Vitals són una representació de la qualitat de l’experiència d’usuari que aporta un lloc, i encara que hi influïxen molts factors, si seguixes les recomanacions de l’article podràs millorar la teua puntuació.

Quan el problema principal apareix en el mòbil, convé fer a banda una revisió específica de SEO mòbil a València: rendiment, UX, rastreig i conversió des de pantalles xicotetes.

Les Core Web Vitals són una part del diagnòstic, però no expliquen per si soles tot el rendiment orgànic. Per a ordenar la resta de senyals he preparat la guia de com millorar les mètriques SEO.

En Angular, les Core Web Vitals depenen de JavaScript, de la hidratació, del renderitzat i de la càrrega de components. La part tècnica està ampliada en SEO per a Angular a València.

En Django, les Core Web Vitals depenen tant del servidor i les plantilles com de les imatges, la memòria cau i els scripts. Ho desenvolupe aplicat a projectes web en SEO Django.