El SEO que ve. Del Mobile-first a les Core Web Vitals

Mantenir un lloc web actualitzat, perquè posicioni adequadament en els cercadors, implica un seguiment continu dels canvis que els cercadors realitzen en els seus algoritmes per evitar les estratègies de posicionament dels especialistes en SEO. Aquesta persecució entre “gats i ratolins” afegeix una càrrega addicional a la tasca de generar continguts interessants, seleccionar paraules clau, definir nínxols de posicionament, organitzar el linkbuilding, definir l’estratègia de continguts … I ara, el SEO tècnic. Aquells factors ocults, com les Core Web Vitals, que l’usuari no percep quan es realitzen correctament i que castiguen l’experiència d’usuari quan no passa.

L’evolució d’experiència d’usuari en el SEO

Juny de 2021 és la data seleccionada per Google per introduir els canvis en el seu algoritme, les denominades Core Web Vitals.

La utilització de mètriques, com a element que influenciador en el posicionament, vinculades a la percepció de l’usuari és un procés iniciat el 2016, amb l’eliminació dels pop ups que dificultaven la navegació. En 2017 es va incloure el safe browsing, la verificació que els llocs estan lliures de malware que pugui infectar els equips clients, i la utilització de certificats de servidor que encripten les comunicacions dels internautes. El Mobile friendly és l’avaluació de l’experiència d’usuari en dispositius mòbils que es va introduir en 2015.

Fins aquest any, Google diferenciava el rastreig de les pàgines publicades a internet, entre l’experiència d'”escriptori” i la de telèfons mòbils, encara que va ser el 2016 quan va començar a utilitzar les versions mòbils com a referència per establir l’ordre dels resultats de les recerques.

Aquest procés, finalitzat el març de 2021, va suposar la incorporació definitiva del mobile-first indexing, de manera que ja només es considera el rastreig de les versions mòbils dels llocs web.

Aquest canvi té implicacions per als llocs que no hagin considerat el disseny mobile, ja que, no importa si el trànsit d’un lloc és bàsicament d’escriptori, el seu posicionament dependrà exclusivament de com rendeixi en la seva versió mòbil. Amb aquest canvi l’objectiu del cercador és forçar, als propietaris dels llocs, a oferir la mateixa experiència, amb independència del dispositiu utilitzat pels usuaris. I, com és habitual, per poder comprovar l’acompliment d’un lloc davant les seves mètriques, Google ens ofereix, a més de Search Console, una eina per a l’adaptació d’una pàgina a dispositius mòbil .

L’any 2020, Google va introduir 3 nous factors per complementar l’avaluació de l’experiència d’usuari en la navegació. Una manera de donar més pes a la part tècnica de l’SEO, el web Perfomance Optimization (WPO) com a complement a l’experiència de pàgina.

L’aplicació d’aquests canvis no implica que les estratègies de construcció d’enllaços, l’estructura de la informació d’un lloc o la redacció de continguts deixi de ser important. A contra, des del cercador se segueix indicant que la millor manera d’aconseguir un bon posicionament implica generar contingut de qualitat, encara que ara la presentació a l’usuari és molt més important.

Aquests nous factors d’avaluació treballen en relació amb el viewport, o “espai visible de finestra”, durant el renderitzat de les pàgines. S’han substituït els mesuraments dels temps de càrrega, per informació sobre la manera en què els llocs web reaccionen a les accions dels usuaris.

Quines són les Core Web Vitals?

Largest Contentful Paint (LCP)

Font: https://web.dev/lcp

Amb aquesta mètrica s’avalua el temps que triga a mostrar-se la imatge, o bloc de text més gran, que s’hauria de mostrar a la finestra inicial. D’acord amb les especificacions del mesurament, Google considera que el límit d’una bona experiència d’usuari es troba en els 2,5 segons establint com “dolent” qualsevol resultat per sobre dels 4 segons.

Per calcular el temps és important considerar que el «bloc més gran» no és un element fix que s’identifica a l’inici de la càrrega, sinó que a mesura que es van renderitzant elements la característica pot ser transferida a un nou element incrementant els valors LCP. Per exemple, quan es carrega un bloc de text es “etiqueta” com el “largest-contentful-paint”. Ara bé, si a continuació carrega una imatge més gran, dins del viewport, la imatge serà el nou “largest-contentful-paint”, incrementant-se el valor de la mètrica.

First Input Delay (FID)

Font: https://web.dev/fid/

EL FID mesura la capacitat de reacció d’una pàgina enfront d’una interacció de l’usuari, és a dir, el temps màxim que ha de trigar la pàgina a respondre a un usuari que clica un enllaç, prem un botó…

Complementa a l’anterior, en el sentit que el LCP serà la primera impressió de la pàgina per a l’usuari (renderitzat ràpid). No obstant això, el FID mesura des de la primera acció amb la pàgina fins que es mostra el resultat de la interacció. Una reacció lenta perjudica l’experiència de navegació per a l’usuari, de manera que, des del cercador, es considera que el temps màxim de reacció mitjà d’una pàgina hauria d’estar, el 75% de les vegades, per sota de 100 ms.

Cumulative Layout Shift (CLS)

Font: https://web.dev/cls/

EL CLS estableix l’estabilitat visual d’una pàgina. És el més tècnic dels tres i es relaciona amb la manera en què es dibuixen les pàgines web.

Els navegadors són aplicacions que interpreten un arxiu de text (la pàgina web). D’acord identifiquen una etiqueta HTML, la renderitzen i assignen un espai a cada recurs que ha de mostrar. Aquests poden ser des d’una imatge (img, image, svg), una taula de dades (table, th, tr, td), una capçalera (h1, h2, h3), un bloc de navegació o publicitat (nav, div)… Així es presenta als usuaris un disseny ordenat de què seria la càrrega completa de la pàgina.

No obstant això, per millorar els temps de càrrega, es pot indicar al navegador que retardi l’anomenada d’alguns recursos (imatges, arxius de javascript …) després del renderitzat inicial. Quan s’utilitzen aquestes tècniques s’obtenen dues versions de la pàgina, el de la càrrega inicial i el definitiu.

Aquesta mètrica mesura la variació del disseny inicial i final al viewport com un percentatge, recomanant que la variació no superi el 0,1 (10% de la pantalla visible).

Com es mesuren aquestes mètriques?

Les Core web Vitals són registres d’experiència d’usuari (RUM – Reial User Metrics). Això vol dir que, quan es fa un mesurament des del navegador, s’obtenen els resultats d’aquest moment i amb l’actual configuració, per tant, es dificulta conèixer les dades agregades d’usuari per a una pàgina. Google planteja dos tipus d’eines per mesurar els resultats de core web vitals:

Eines de camp:

Chrome UX Report: recopila les dades d’usuari de forma anònima des de les instàncies de Google Chrome que tenen registrat un usuari. És un conjunt de dades públiques amb informació agregada.

Web Vitals Extension: Extensió per a Google Chrome que recopila la informació LCP, FID i CLS de la pàgina en la qual està l’usuari. Mesura les dades de la interacció que està registrant.

Eines de Laboratori:

Google Lighthouse: Genera un entorn per a la realització de proves en el mateix navegador. En lloc de l’FID mesura el “Temps total de bloqueig” (quan pot realitzar la primera interacció l’usuari). La diferència entre les dues és que el FID es mesura des que l’usuari interactua, el TBT des que s’inicia la càrrega de la pàgina.

Altres eines:

PageSpeed ​​Insights, Search Console: són dos frontal que utilitzen les dades de Chrome UX report per crear els informes sobre les pàgines consultades.

Com es poden optimitzar les pàgines per millorar l’experiència d’usuari?

Largest Contentful Paint (LCP)

Les principals causes per obtenir mals resultats en el LCP es vinculen a utilitzar servidors amb temps de resposta alts o temps de càrrega alts de les pàgines per tenir els recursos poc optimitzats.

Entre les possibles solucions que es podrien implementar per millorar els resultats d’aquesta mètrica es podria contractar servidors amb més recursos, optimitzar la càrrega d’arxius css o javascript mitjançant precàrregues (fonts, disseny), o ajornament (arxius de seguiment), segons si necessitem que es carreguin, o no, al principi del renderitzat de la pàgina. També millora amb la utilització de CDN, la memòria cau d’arxius que disminueixin els temps de resposta de servidor, la minimització d’arxius css… En definitiva, utilitzar estratègies de WPO.

First Input Delay (FID)

Un FID lent es relaciona amb excessos de càrrega a l’inici del renderitzat. En aquests casos, la millor opció és revisar els elements que demanen interactuar en la càrrega de la pàgina (habitualment javascript) reduint al màxim el seu nombre, deixant els essencials i establint una jerarquia de càrrega per a aquells indispensables.

Cumulative Layout Shift (CLS)

Una puntuació alta en CLS sol determinar-se per un mal ús de l’HTML, especialment imatges o iframes, en els quals no s’han definit les seves dimensions en els atributs, o recursos (habitualment externs) que en carregar modifiquen la mida d’un element ja dibuixat (lletres, imatges o vídeos).

En aquests casos la solució més senzilla és definir correctament les dimensions dels elements que carreguen des de l’inici. Una altra opció és no carregar aquest tipus de recursos en espai visible de finestra inicial.

El SEO que ve

Amb la irrupció de les IA a l’indexat dels cercadors, i la cada vegada major competència en els resultats de les recerques, les estratègies SEO han d’enfocar cap als continguts de més qualitat, amb l’objectiu de mantenir la presència d’usuaris en els llocs el màxim de temps possible. Per això, la part més tècnica de l’SEO és aquella que pot generar l’element diferenciador respecte a la competència. L’experiència d’usuari ja no és només una qüestió de disseny com s’ha de pintar un enllaç?, sinó també com és de ràpida la pàgina.

Fonts d’informació:

Finding more mobile-friendly search: results: https://developers.google.com/search/blog/2015/02/finding-more-mobile-friendly-search

Mobile-first Indexing: https://developers.google.com/search/blog/2016/11/mobile-first-indexing

Google Page Experience Algorithm Update Launching in Mid-June: https://www.searchenginejournal.com/google-page-experience-algorithm-update-launching-in-mid-june/403023

Timing for bringing page experience to Google Search: https://developers.google.com/search/blog/2020/11/timing-for-page-experience

Web Vitals: https://web.dev/vitals/

Largest Contentful Paint (LCP): https://web.dev/lcp/

First Input Delay (FID): https://web.dev/fid/

Cumulative Layout Shift (CLS): https://web.dev/cls/

Web Vital Tools: https://web.dev/vitals-tools/

Optimize Largest Contentful Paint: https://web.dev/optimize-lcp/

Optimize First Input Delay: https://web.dev/optimize-fid/

Optimize Cumulative Layout Shift: https://web.dev/optimize-cls/