Core Web Vitals

Què són les Core Web Vitals?

Les Core Web Vitals són mètriques creades per Google per millorar l'experiència de l'usuari als webs. L'àmplia varietat d'eines disponibles per analitzar la velocitat de càrrega ha estat un dels factors que Google ha considerat per unificar totes aquestes mètriques, per simplificar una mica la complexitat que comporta optimitzar els temps de càrrega. Aquesta iniciativa té com a objectiu fer que ens centrem en aquests "senyals de qualitat" tan importants per aconseguir una experiència d'usuari òptima.

Google resumeix en poques paraules en què se centren les Core Web Vitals:

• ›

  Experiència de càrrega

• ›

  Interactivitat

• ›

  Estabilitat visual del contingut de la pàgina

Largest Contentful Paint o LCP

El LCP o Largest Contentful Paint és una mètrica que ens diu el temps de càrrega perquè el "major" contingut visible per a l'usuari estigui disponible i sigui útil. És a dir, Google diu que els elements col·locats en el que coneixem com a "Above the Fold" han de carregar ràpid i ser llegibles, i així estar disponibles per a l'usuari perquè hi pugui interactuar.

Cal aclarir que els elements que apareixen quan l'usuari clica a la pantalla o fa scroll no afecten el LCP. El major contingut pot ser un bloc de text, un vídeo, una imatge, etc.

Classificació de l'estat del LCP segons els temps. Imatge © web.dev

Quin temps considera Google òptim?

Com podem veure al gràfic, Google considera que el temps màxim per carregar el LCP i proporcionar una bona experiència d'usuari és per sota de 2,5 segons. És important assenyalar que durant la càrrega, l'element LCP pot canviar.

Com puc esbrinar el LCP d'una URL?

Al mateix navegador Chrome, executant una auditoria de Lighthouse, tenim l'opció d'esbrinar què considera Google que és el major contingut a carregar. Així:

Quins factors poden influir en la càrrega del LCP?

Diverses accions influeixen perquè el temps de càrrega del LCP sigui més alt del que s'espera. Aquests elements o accions són:

• ›

  Resposta del servidor

• ›

  Consultes a la base de dades

• ›

  Respostes d'API que triguen a resoldre's

• ›

  CSS o JS que bloqueja el render

• ›

  Lentitud en la càrrega d'altres recursos

• ›

  Imatges no optimitzades

• ›

  Etc.

First Input Delay o FID

El FID o First Input Delay és una mètrica que indica quant triga la pàgina a reaccionar quan l'usuari interactua amb qualsevol dels elements.

Mètriques extretes de Pagespeed

A l'eina Pagespeed, que Google va posar a disposició de tothom fa un temps, podem veure la referència a aquesta mètrica. Els valors considerats bons haurien d'estar per sota dels 100 ms.

Classificació de l'estat del First Input Delay (FID) segons els temps. Imatge © web.dev

Les principals causes de problemes amb aquesta mètrica (FID) provenen de l'execució de JavaScript, així que necessitaríem identificar quina part del codi està causant que la pàgina trigui a reaccionar a la interacció. Personalment he experimentat aquest problema amb càrregues JS de publicitat.

Cumulative Layout Shift o CLS

El Cumulative Layout Shift és una mètrica que estableix límits a la càrrega d'elements que modifiquen la visualització mentre carreguen. Estem parlant de proporcionar estabilitat als elements en pantalla perquè la vista no es desplaci a mesura que altres recursos carreguen.

Google considera (bé, Google i tot usuari) que és molt molest que, quan hem començat a interactuar amb una pàgina (ja sigui llegint, fent scroll, etc.), un element que carrega més tard desplaça la posició de l'usuari respecte al contingut, obligant-lo a corregir-se fent scroll.

Aquest exemple ens ajuda a explicar millor com funciona aquesta mètrica. Inicialment veiem el contingut carregat al costat esquerre. Quan Google parla d'estabilitat, es refereix a la càrrega d'un tercer element no desplaci els carregats prèviament. Com veiem a la imatge de la dreta, carregar el vídeo de YouTube ha desplaçat els dos blocs que es van carregar inicialment.

Per què són importants les Core Web Vitals?

Des que coexistim amb els cercadors, i més específicament amb Google, ha anat incorporant obligacions per a qualsevol que tingui un web i vulgui que sigui una de les opcions als resultats de cerca.

Millorar l'accessibilitat des de tots els dispositius, afavorir la navegació segura sota un protocol de seguretat o penalitzar els webs que utilitzaven publicitat invasiva (interstitials), han estat algunes de les batalles del gegant tecnològic.

Aquestes mètriques són indicadors que Google ens dona per assenyalar quines parts del web poden ser un problema per a l'usuari però… vol dir que són importants?

Tant si entenem els webs des d'un punt de vista de "robots" com des d'un punt de vista d'"usuaris", aquestes mètriques són indicadors que els nostres webs no estan funcionant tan bé com haurien. Ja hem vist en diversos estudis com d'influent és el temps de càrrega en la conversió i en la paciència de l'usuari. Actualment no influeixen al posicionament, però anem a ignorar aquestes mètriques?

Per la nostra part, sens dubte les tindrem en compte.

Afecten les Core Web Vitals al posicionament?

Avui dia, tot el que sabem és que les mètriques per millorar l'experiència de l'usuari són cada vegada més importants, i algunes d'elles ja s'estan tenint en compte als resultats de cerca. A l'article del 28 de maig al blog de Google, es va anunciar que el 2021 espera llançar una nova actualització per incorporar diverses mètriques relacionades amb l'experiència de l'usuari.

Només hem de recordar com va gestionar el Mobile First Index i els avisos previs. En aquest cas, fent referència de nou a l'article de maig, adverteix que hi haurà una notificació prèvia d'almenys 6 mesos, així que… hi haurà una actualització a finals de l'any que ve?

Eines per optimitzar les Core Web Vitals

Ara que hem parlat de què són les Core Web Vitals i de la importància que tindran als pròxims mesos, és hora de començar a treballar en l'optimització d'aquestes mètriques. Mitjançant diferents eines podrem abordar els problemes que es detectin i aconseguir una millora del rendiment.

Lighthouse

Lighthouse és una potent eina open-source que trobem a Chrome. Mitjançant Lighthouse, podem auditar el nostre web, executant diferents proves per obtenir resultats sobre les mancances o parts de la pàgina que necessiten ser optimitzades. Entre aquestes parts hi ha les mètriques Core Web Vitals.

Imatge extreta dels resultats d'una auditoria Lighthouse

Page Speed Insights

Page Speed Insights és una altra opció que Google ens proporciona per obtenir les dades de rendiment del nostre web. Aquesta eina fins i tot ens mostra gràfics de les mètriques més importants i el seu estat. Page Speed Insights es basa en un informe d'experiència d'usuari l'objectiu del qual és obtenir dades en comparació amb altres webs.

Mètriques que ofereix Page Speed Insights

Chrome UX

Chrome User Experience Report és un conjunt de dades que Google proporciona sobre el comportament dels usuaris al voltant del món a través de Chrome. Per accedir a aquestes dades has d'utilitzar Big Query, així com tenir un compte de Google Cloud.

Mitjançant Google Data Studio, han facilitat l'accés i tenen tot semipreparat per a nosaltres en aquest Dashboard

Chrome Dev Tools

Podem analitzar les mètriques Core Web Vitals no només amb Lighthouse; si ens endinsem a les eines de desenvolupador de Chrome, podem arribar a les mateixes conclusions. Per exemple, a la pestanya "Performance", si fem una gravació o una nova càrrega, podem obtenir informació valuosa sobre com es comporta la nostra URL.

Captura presa a l'opció Performance de Chrome Dev Tools

Web.Dev

Sempre hi ha una manera més fàcil de fer les coses, almenys quan es tracta de conèixer les nostres Core Web Vitals. Al web oficial, tenim una pàgina que detalla cada mètrica i ens dona una explicació del que és i pràctiques per millorar-la.

A més, a la Chrome Store tenim una extensió que ens dona aquesta informació en entrar a cada URL:

Amb una indicació vermella o verda podem veure l'estat de la nostra URL respecte a aquestes mètriques:

Captura dels resultats que dona l'extensió Web Vitals

Search Console

Search Console és una eina indispensable per a qualsevol webmaster. S'hi ha afegit una funció que ens ajuda a veure quines URLs tenen problemes amb aquestes 3 mètriques (LCP, FID i CLS). Al menú esquerre, tenim l'opció "Core Web Vitals". Quan triem aquesta opció, apareixeran dos gràfics que mostren els resultats d'URLs per dispositiu. Si triem el dispositiu (escriptori o mòbil), veurem en detall quines URLs tenen problemes.

No t'alarmis si veus un nombre elevat d'URLs a la dreta; això és relativament normal, ja que els problemes solen produir-se per tipus de pàgines (per exemple, posts de blog) i treballar en una d'elles ens portarà la millora a totes elles.

Conclusions

Aquest recorregut per les Core Web Vitals té com a objectiu introduir-nos a mètriques que cada vegada guanyaran més protagonisme, i nosaltres, ja siguem SEOs o Webmasters, hi conviurem. Des de SEO Alive, volem recomanar-te que facis ús de totes aquestes eines que t'hem proporcionat, que sens dubte t'ajudaran a millorar el rendiment WPO del teu web.

*Acceptes el repte de millorar la velocitat del teu lloc? Fes una prova amb qualsevol de les eines que hem mencionat i envia'ns un missatge amb una captura. Et donarem un consell per millorar-la totalment gratis! *