Core web vitals: 10 consells per millorar

Core Web Vitals són els 3 indicadors clau de rendiment proposats per Google per avaluar la qualitat de l'experiència de l'usuari. Un estudi de Google mostra que quan Core Web Vitals són bons, els usuaris d'Internet tenen un 24% menys de probabilitats d'abandonar una pàgina web abans que s'acabi de carregar. Per tant, és important tenir cura de l'experiència de l'usuari amb pàgines ràpides per animar els clients a anar al final del túnel de conversió. En aquest article us explico com millorar-lo.

Per què són tan importants els elements vitals bàsics del web?

Core Web Vitals és un conjunt de mètriques clau de Google que mesuren l'experiència de l'usuari real en termes de rendiment de càrrega, interactivitat i estabilitat visual d'una pàgina web. Es recomana obtenir un bon Core Web Vitals per tenir èxit a la cerca de Google, ja que ajuda a garantir una gran experiència d'usuari ràpid, sensible i visualment estable.

Les tres mètriques de Core Web Vitals són Largest Contentful Paint (LCP) que mesura el rendiment de càrrega, Interaction to Next Paint (INP) que fa un seguiment de les interaccions dels usuaris i mesura el retard d'entrada i Cumulative Layout Shift (CLS) que mesura l'estabilitat visual mitjançant el seguiment dels canvis de disseny a la pàgina. Google utilitza aquests senyals de qualitat com a part del seu algorisme de classificació, i millorar-los pot ajudar a la classificació del vostre motor de cerca.

Pintura amb contingut més gran (LCP)

La pintura de contingut més gran (LCP) és un dels principals indicadors de rendiment clau (KPI) per mesurar l'experiència de l'usuari d'un lloc web. Mesura el temps que triga a carregar completament el contingut més gran visible per l'usuari. LCP ràpid és essencial per a una bona experiència d'usuari.

Interacció amb Next Paint (INP)

Interaction to Next Paint (INP) és una mètrica de rendiment que mesura el temps entre la interacció de l'usuari amb el lloc web i l'actualització visual de la pàgina. És important tenir un INP baix per oferir una experiència d'usuari fluida i sensible.

Canvi de disseny acumulatiu (CLS)

El canvi de disseny acumulat (CLS) és una mètrica d'estabilitat visual que mesura els canvis de disseny inesperats en una pàgina web. Un CLS feble garanteix que els elements de la pàgina no es moguin de manera inesperada, proporcionant una experiència d'usuari agradable i evitant errors de clic. Ús de senyals de qualitat per part de Google Google utilitza aquests senyals de qualitat, com ara LCP, INP i CLS, per avaluar la usabilitat d'un lloc web i utilitzar-los en el seu algorisme de classificació.

Si milloreu aquestes mètriques, podeu augmentar les vostres possibilitats de classificar-vos més en els resultats de la cerca i d'atreure més trànsit orgànic al vostre lloc. Per millorar Core Web Vitals, el primer pas és provar-los mitjançant eines dedicades i, a continuació, optimitzar els elements identificats com a problemàtics. La puntuació de PageSpeed ​​també està vinculada a aquestes mètriques.

Com mesurar Core Web Vitals?

Hi ha diferents eines disponibles per mesurar l'estat de Core Web Vitals, tant a partir de dades reals dels usuaris com de proves de laboratori (mesures simulades). Aquestes eines ajuden els propietaris de llocs web a fer un seguiment del rendiment dels seus Core Web Vitals i a identificar àrees de millora.

Google PageSpeed ​​Insights

Aquesta eina d'anàlisi en línia de Google és una de les més completes i àmpliament utilitzades per avaluar el rendiment del lloc web. Se centra específicament en les tres mètriques clau de Core Web Vitals: la pintura de contingut més gran (LCP), el retard de la primera entrada (FID) i el canvi de disseny acumulat (CLS).

L'eina analitza una pàgina web específica i proporciona puntuacions detallades per a cada mètrica, que van des de "dolent" a "Bon“. Aquestes notes van acompanyades de recomanacions concretes per millorar el rendiment, com ara optimitzar imatges, reduir la mida dels fitxers JavaScript i CSS, o fins i tot millorar la representació del contingut principal.

PageSpeed ​​​​Insights es basa en dos tipus de dades per a la seva avaluació: mesures de laboratori (realitzades en condicions controlades) i mesures de camp (basades en interaccions reals de l'usuari). Aquesta combinació proporciona una visió completa del rendiment d'un lloc. Els resultats es presenten de manera clara i intuïtiva, amb gràfics i indicadors visuals. Això la converteix en una eina molt accessible, tant per a desenvolupadors com per a gestors de llocs web no tècnics.

Far

Lighthouse és una eina d'auditoria de codi obert desenvolupada per Google i integrada de manera nativa Chrome DevTools. Va més enllà de Core Web Vitals avaluant molts altres aspectes essencials de rendiment, accessibilitat, bones pràctiques web i SEO.

A diferència de PageSpeed ​​​​Insights que analitza una pàgina web específica, Lighthouse es pot executar directament al navegador en qualsevol pàgina. Això permet obtenir resultats més precisos i representatius de les condicions reals d'ús, sense el biaix potencial de les mesures de laboratori.

Els informes Lighthouse proporcionen puntuacions detallades per a cada criteri analitzat, així com recomanacions clares i accionables per millorar el rendiment. Aquesta eina és especialment popular entre els desenvolupadors, que poden integrar-la fàcilment al seu flux de treball de desenvolupament i depuració.

Extensió de Chrome Web Vitals

Aquesta extensió de Chrome és una eina de seguiment de Core Web Vitals en temps real. Mostra permanentment els valors actuals de LCP, FID i CLS de la pàgina web visualitzada, amb un codi de color que indica si es respecten els llindars recomanats. Aquesta eina és molt pràctica per als desenvolupadors que volen controlar l'impacte dels seus canvis en directe, sense haver d'executar anàlisis completes. També ajuda a detectar ràpidament problemes de rendiment mentre navegueu pel lloc.

L'extensió Web Vitals proporciona una interfície senzilla i intuïtiva, amb indicadors visuals clars. Per tant, és molt accessible, inclòs per als usuaris no tècnics que desitgin controlar el rendiment del seu lloc.

Consola de cerca de Google

Aquesta eina per a administradors web proporcionada per Google va més enllà del seguiment del rendiment d'una sola pàgina. Ofereix una visió general de Core Web Vitals per a tot el lloc web, amb dades històriques per fer un seguiment dels canvis al llarg del temps.

Els informes de Search Console faciliten la identificació de pàgines que no compleixen els llindars recomanats per a Core Web Vitals. Aquesta visió holística és especialment útil per a llocs web grans, on és important tenir una comprensió global del rendiment. Les dades proporcionades per Search Console també es poden integrar en altres eines d'anàlisi i supervisió, proporcionant una font de dades fiable i estandarditzada a Core Web Vitals.

API Web Vitals

A diferència de les eines anteriors que se centren a analitzar i presentar resultats, l'API de Web Vitals és una API de JavaScript per mesurar Core Web Vitals directament a nivell de client.

Aquesta API ofereix als desenvolupadors la possibilitat d'integrar la supervisió del rendiment a les seves pròpies eines d'anàlisi i supervisió. Així, poden personalitzar la recollida i enviament de dades segons les seves necessitats específiques, ja sigui per a anàlisis en temps real, alertes o l'enriquiment de les seves dades d'ús. L'API de Web Vitals també permet obtenir mesures més precises i representatives de les condicions reals d'ús, basant-se directament en les interaccions dels usuaris amb la pàgina.

Article per llegir: Els 9 millors connectors de seguretat de WordPress

Consells per millorar els elements vitals bàsics

Un cop hàgiu mesurat el vostre rendiment, definiu els KPI a millorar, a assolir i a no superar, en funció de les vostres prioritats empresarials i professionals. Observar els teus competidors és un punt de referència interessant per situar-te i avaluar els llindars a marcar, perquè cada mercat té les seves limitacions i les puntuacions mitjanes i els indicadors de rendiment poden variar molt.

 Consells per millorar la pintura de contingut més gran

La pintura de contingut més gran (LCP) és un indicador clau del rendiment del lloc web, mesurant el temps que triga a que el contingut principal d'una pàgina sigui visible per a l'usuari. Un LCP ràpid és essencial per oferir una experiència d'usuari suau i agradable. Aquí teniu quatre optimitzacions que podeu fer al vostre lloc web per millorar el vostre rendiment LCP.

Millora el teu allotjament

L'allotjament és sovint un factor determinant en el rendiment d'un lloc web. Cal per tant tria un bon amfitrió web. Si esteu en allotjament compartit, és possible que no hi hagi recursos suficients per gestionar el trànsit i les sol·licituds del vostre lloc. Els servidors compartits comparteixen recursos entre diversos usuaris, la qual cosa pot alentir el vostre lloc, especialment durant els períodes de feina.

Per millorar el vostre LCP, considereu l'actualització a un servidor dedicat o allotjament VPS (Virtual Private Server). Aquestes opcions us ofereixen recursos exclusius, que poden millorar significativament la velocitat de càrrega del vostre lloc. A més, els serveis d'allotjament optimitzats per a WordPress o altres CMS també poden garantir un millor rendiment. Busqueu amfitrions que ofereixin servidors situats a prop del vostre públic objectiu, ja que això redueix la latència i millora els temps de càrrega.

Utilitzeu dimensions adequades per a les vostres imatges

Les imatges solen ser responsables d'una gran part del pes d'una pàgina web. Hi ha massa llocs que pengen imatges grans que no estan optimitzades per al web. Això pot alentir significativament la càrrega del vostre contingut principal, afectant el vostre LCP.

Per evitar-ho, comenceu configurant les dimensions adequades per a les vostres imatges. Assegureu-vos que cada imatge s'ajusti a les dimensions necessàries per mostrar-les al vostre lloc. Utilitzeu eines com Photoshop o serveis en línia per comprimir les vostres imatges sense sacrificar la qualitat. A més, opteu per formats d'imatge moderns com WebP o JPEG 2000, que ofereixen una millor compressió mantenint una alta qualitat d'imatge.

No us oblideu d'utilitzar l'atribut srcset a les etiquetes d'imatge per proporcionar diferents resolucions d'imatge en funció de la mida de la pantalla de l'usuari. Això permet als navegadors carregar la versió més adequada de la imatge, la qual cosa ajuda a reduir el temps de càrrega i millora el LCP. EL Connector d'imaginar us permet convertir les vostres imatges a WebP i AVIF.

Aprofiteu la funció Lazy Load

Lazy Load és una tècnica que permet retardar la càrrega d'imatges i vídeos fins que siguin visibles a la pantalla. Això significa que els elements que no són visibles immediatament per l'usuari no es carreguen inicialment, reduint el temps de càrrega inicial de la pàgina.

Per implementar Lazy Load, podeu utilitzar biblioteques JavaScript o atributs HTML com ara loading="lazy" a les etiquetes d'imatge. Això permet als navegadors només carregar imatges quan l'usuari es desplaça cap avall. Aquest enfocament és especialment eficaç per a pàgines amb moltes imatges o contingut multimèdia. Si utilitzeu Lazy Load, reduïu la quantitat de dades que es carregaran inicialment, la qual cosa millora l'LCP. Això també ofereix una millor experiència d'usuari perquè els usuaris poden començar a interactuar amb el vostre contingut sense haver d'esperar que es carregui tot.

Eviteu els scripts d'aplicacions de tercers

L'ús d'aplicacions de tercers pot ser beneficiós, però també pot perjudicar el rendiment del vostre lloc. Els scripts de serveis externs per a la gestió de galetes, el xat en directe o el seguiment de visitants poden afegir temps de càrrega addicional que afecti directament el vostre LCP.

Avalueu els scripts que feu servir i determineu si són realment necessaris. Si heu d'utilitzar scripts de tercers, proveu de carregar-los de manera asíncrona o amb càrrega mandrosa. Això permet que el navegador continuï carregant el contingut principal de la pàgina sense que es bloquegi carregant aquests scripts. A més, considereu integrar solucions que combinin diverses funcions en un sol script. Per exemple, Algunes plataformes de xat en directe ofereixen integracions amb eines de seguiment, que poden reduir el nombre total d'scripts necessaris a la vostra pàgina.

Consells per millorar el retard de la primera entrada (FID)

First Input Delay (FID) és un indicador de rendiment clau que mesura el temps que triga un usuari a interactuar amb una pàgina web després que s'hagi carregat. Un FID baix és essencial per oferir una experiència d'usuari suau i agradable. Aquí teniu tres optimitzacions que podeu implementar per millorar el FID del vostre lloc web.

1. Eviteu els scripts d'aplicacions de tercers

Els scripts d'aplicacions de tercers, com els de les xarxes socials, les analítiques o els anuncis, poden alentir significativament la càrrega de la pàgina. Això es deu al fet que aquests scripts sovint es carreguen en paral·lel amb el vostre contingut principal i, si triguen massa a executar-se, poden bloquejar la interacció de l'usuari amb el vostre lloc.

Per minimitzar aquest impacte, comenceu per identificar quins scripts de tercers són realment necessaris per al vostre lloc. Fes una auditoria del teu codi i elimina els que no són essencials. Si heu d'utilitzar scripts de tercers, penseu a carregar-los de manera asíncrona o ajornar-los. Això vol dir que el vostre contingut principal es carregarà primer, cosa que permetrà als usuaris interactuar amb el vostre lloc mentre els scripts es carreguen en segon pla.

A més, tingueu en compte les actualitzacions de les API o biblioteques que feu servir. De vegades, les versions més noves d'aquests scripts poden oferir millores de rendiment. En ser proactiu en la gestió de les vostres dependències, podeu reduir-ne l'impacte en el FID.

2. Utilitzeu un sistema de memòria cau

La memòria cau és una tècnica essencial per millorar la velocitat de càrrega del vostre lloc. Quan un usuari visita el vostre lloc, el servidor ha de processar multitud de sol·licituds per carregar el contingut. En configurar un sistema de memòria cau, permeteu que el vostre servidor emmagatzemi versions precarregades de les vostres pàgines. Això vol dir que en visites posteriors, el servidor pot lliurar el contingut més ràpidament, sense haver de generar-lo cada vegada.

Hi ha diversos tipus de memòria cau, com ara la memòria cau del costat del servidor, la memòria cau del costat del client i la memòria cau de contingut estàtic. Per exemple, La memòria cau del costat del servidor emmagatzema pàgines HTML generades dinàmicament, mentre que la memòria cau del costat del client emmagatzema recursos com imatges i fitxers CSS al navegador de l'usuari.

Per implementar un sistema de memòria cau eficient, podeu utilitzar eines com Vernís, Redis o fins i tot les funcions de memòria cau integrades del vostre CMS. Assegureu-vos també de configurar les regles de memòria cau adequades perquè el contingut s'actualitzi quan sigui necessari, sense penalitzar la velocitat de càrrega.

3. Aprofiteu les funcions de Minimitzar i ajornar JavaScript

JavaScript és una eina potent per crear llocs web interactius i atractius, però l'ús excessiu o mal optimitzat pot perjudicar el rendiment general. Per millorar el vostre FID, és crucial minimitzar i ajornar la càrrega dels vostres recursos JavaScript. La minimització consisteix a reduir la mida dels fitxers JavaScript eliminant espais, comentaris i altres elements innecessaris. Això redueix el temps de càrrega i millora la velocitat d'execució. Podeu utilitzar eines com UglifyJS o Terser per automatitzar aquest procés.

Diferit, d'altra banda, vol dir que només carregueu el JavaScript quan sigui necessari. Utilitzant l'atribut defer a les teves etiquetes <script>, podeu dir al navegador que carregui l'script després que el contingut HTML s'hagi analitzat completament. Això permet a l'usuari interactuar amb la pàgina sense esperar que es carreguin tots els scripts.

Consells per millorar el canvi de disseny acumulat (CLS)

El canvi de disseny acumulat (CLS) és una mètrica essencial que mesura l'estabilitat visual d'una pàgina web. Una puntuació CLS baixa és crucial per oferir una experiència d'usuari fluida, ja que redueix les sorpreses desagradables causades pel contingut que es mou de manera inesperada mentre es carrega. Aquí teniu tres optimitzacions que podeu implementar per millorar el CLS del vostre lloc web.

1. Utilitzeu les dimensions adequades

Una de les causes més comunes dels retards de contingut és la manca de dimensions definides per als elements de la vostra pàgina, com ara imatges, vídeos i blocs de contingut. Quan aquests elements no tenen unes dimensions especificades, el navegador no sap quant d'espai ocuparan a la pàgina fins que estiguin completament carregats. Això pot fer que altres elements de la pàgina es moguin, pertorbant l'experiència de l'usuari.

Per evitar-ho, assegureu-vos d'establir dimensions fixes per a tots els vostres recursos multimèdia. Per exemple, per a les imatges, utilitzeu els atributs width et height a les teves etiquetes <img>. De la mateixa manera, per als vídeos, especifiqueu les dimensions al codi d'inserció. En respectar la mida de la pantalla dels vostres visitants, minimitzareu el retard del contingut mentre es carrega la pàgina. Això no només ajuda a estabilitzar el disseny, sinó que també millora el temps de càrrega percebut per l'usuari.

2. Configureu correctament les vostres insercions publicitàries

Si monetitzeu el vostre lloc amb anuncis d'inserció, és fonamental configurar-los correctament per evitar que provoquin retards de contingut. Quan els anuncis apareixen de manera inesperada o ocupen espai no desitjat en el disseny, poden interrompre l'experiència de navegació i afectar la vostra puntuació CLS.

Per solucionar-ho, reserveu una ubicació específica per als vostres anuncis al vostre codi HTML i CSS. Això vol dir que heu de definir dimensions per a les vostres insercions publicitàries i integrar-les en un espai fix del vostre disseny. D'aquesta manera, encara que un anunci trigui una estona a carregar-se, la resta del vostre contingut no es veurà afectat. A més, penseu a utilitzar formats d'anunci que s'adaptin millor al vostre disseny sense causar retard, com ara els anuncis responsius.

3. Integra els teus elements sota la línia de flotació

Un altre consell per millorar el CLS és integrar determinats elements sota el plec, és a dir, fora de la visió immediata de l'usuari. Aquesta estratègia s'ha d'utilitzar amb precaució i a més de les optimitzacions per a la pintura de contingut més gran (LCP) i el retard de la primera entrada (FID). La idea és "amagar” contingut temporal que podria provocar retards durant la càrrega.

Si col·loqueu determinats elements no essencials o menys importants per sota de la línia de flotació, reduïu la probabilitat que la seva càrrega afecti l'estabilitat dels elements visibles. Això pot incloure imatges, vídeos o seccions de contingut que l'usuari no necessita immediatament. Aquest enfocament ajuda a mantenir un disseny estable alhora que garanteix que el contingut essencial es carregui primer.

Conclusió

Core Web Vitals no té un gran impacte en el SEO tret que el lloc sigui molt lent. Tanmateix, són importants per a l'experiència de l'usuari. Les millores poden proporcionar més dades a Analytics i augmentar les conversions. Es recomana treballar amb desenvolupadors, experts en optimització de velocitat. En el futur, l'optimització serà cada cop més automàtica gràcies a les noves tecnologies i característiques de la plataforma.