El rendiment d’un lloc web va més enllà de la rapidesa amb què es carrega una pàgina. Encara que el contingut aparegui en pocs segons, els botons que responen lentament o els canvis inesperats en el disseny poden frustrar els visitants i perjudicar-ne l’experiència. Aleshores, com pots saber si el teu lloc web té un bon rendiment? Les Core Web Vitals són les mètriques clau de rendiment de Google que mesuren la velocitat de càrrega, la interactivitat i l’estabilitat visual. En aquesta guia coneixeràs les tres mètriques de les Core Web Vitals, els llindars recomanats i les eines que pots utilitzar per mesurar i millorar el rendiment del teu lloc web.
Què són les Core Web Vitals?
Les Core Web Vitals són un conjunt de mètriques de rendiment introduïdes per Google per mesurar aspectes importants de l’experiència d’usuari en un lloc web. Aquestes mètriques se centren en tres factors principals: el rendiment de càrrega, la interactivitat i l’estabilitat visual. En altres paraules, ajuden els propietaris de llocs web a entendre amb quina rapidesa es carrega una pàgina, amb quina fluïdesa hi poden interactuar els usuaris i si el contingut es manté estable mentre es carrega.
El rendiment d’un lloc web no depèn només de la rapidesa amb què s’obre una pàgina. Un lloc web pot carregar el contingut en poc temps, però si els usuaris han d’esperar abans de poder fer clic en un botó o si el disseny de la pàgina canvia de manera inesperada, l’experiència global pot continuar sent dolenta. Les Core Web Vitals ajuden a identificar aquests problemes i ofereixen objectius mesurables per millorar el rendiment del lloc web.
Actualment, Google utilitza tres mètriques de Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) i Cumulative Layout Shift (CLS). Cada mètrica mesura una part diferent de l’experiència d’usuari, de manera que millorar-ne una no implica necessàriament que les altres dues també millorin.
Per què són importants les Core Web Vitals?
Un lloc web ha d’oferir una experiència fluida i fiable als seus visitants. Quan una pàgina triga massa a carregar-se, els usuaris poden marxar abans d’accedir a la informació que necessiten. De la mateixa manera, si els botons responen lentament o els elements de la pàgina es mouen de manera inesperada, els visitants es poden frustrar i tenir dificultats per completar les seves tasques.
Les Core Web Vitals ajuden els propietaris de llocs web a identificar aquests problemes mitjançant dades de rendiment mesurables, en lloc de basar-se només en impressions personals. Per exemple, un desenvolupador pot provar un lloc web en un ordinador potent i comprovar que es carrega ràpidament. Tanmateix, els visitants que fan servir dispositius mòbils més antics o connexions a internet més lentes poden patir temps de càrrega molt més llargs.
Aquestes diferències fan que el seguiment del rendiment sigui important. Analitzant les dades de les Core Web Vitals, els desenvolupadors poden identificar quines parts d’un lloc web cal millorar i determinar si els seus esforços d’optimització donen els resultats esperats.
Les Core Web Vitals també són rellevants per a l’optimització per a motors de cerca (SEO). Google utilitza senyals d’experiència de pàgina en els seus sistemes de classificació, però unes bones puntuacions de Core Web Vitals no garanteixen un posicionament més alt. El contingut rellevant i molts altres factors continuen sent importants. Per tant, millorar aquestes mètriques s’ha de considerar part d’una estratègia més àmplia per construir un lloc web útil, accessible i fiable.
Quines són les tres mètriques de les Core Web Vitals?
Cada mètrica de les Core Web Vitals se centra en un aspecte concret del rendiment d’un lloc web. Entendre com funcionen facilita la identificació de problemes de rendiment i l’elecció de les tècniques d’optimització adequades.
Què és el Largest Contentful Paint (LCP)?
El Largest Contentful Paint (LCP) mesura quant de temps triga a aparèixer la imatge o el bloc de text més gran visible a la finestra inicial. Aquesta mètrica ajuda a estimar quan el contingut principal d’una pàgina es fa visible per a l’usuari.
Per exemple, imagina que un visitant obre un article d’un blog. El fons de la pàgina i el menú de navegació poden aparèixer gairebé immediatament, però el títol principal o la imatge destacada poden trigar diversos segons a carregar-se. En aquesta situació, el visitant pot tenir la sensació que la pàgina encara s’està carregant, tot i que alguns elements ja són visibles. Una bona puntuació d’LCP ha de ser de 2,5 segons o menys. Si el valor és d’entre 2,5 i 4 segons, la pàgina necessita millores. Un valor d’LCP superior a 4 segons es considera dolent.
Diversos factors poden afectar l’LCP, com ara els temps de resposta lents del servidor, les imatges grans, el CSS i el JavaScript que bloquegen la renderització i els retards a l’hora de descobrir el contingut principal.
Per millorar l’LCP, els propietaris de llocs web poden seguir els passos següents:
- Optimitzar les imatges: Redueix la mida dels fitxers d’imatge i utilitza formats moderns com WebP o AVIF quan sigui convenient.
- Millorar els temps de resposta del servidor: Utilitza recursos d’allotjament eficients, memòria cau i una xarxa de distribució de continguts (CDN) quan siguin adequats per al lloc web.
- Prioritzar el contingut principal: Assegura’t que el navegador pugui descobrir les imatges importants directament des del codi font HTML i prioritza’n la càrrega quan calgui.
- Reduir els recursos que bloquegen la renderització: Optimitza els fitxers CSS i JavaScript que impedeixen al navegador mostrar el contingut principal.
- Evitar la càrrega diferida de la imatge LCP: Si és probable que una imatge sigui l’element LCP, endarrerir-ne la càrrega pot fer que la pàgina sembli més lenta.
Aquestes tècniques poden reduir el temps que els usuaris passen esperant que aparegui el contingut principal. Tanmateix, la solució més eficaç depèn de la causa del retard, per la qual cosa és important mesurar la pàgina abans de fer canvis.
Què és l’Interaction to Next Paint (INP)?
L’Interaction to Next Paint (INP) mesura la capacitat de resposta que percep l’usuari quan interactua amb un lloc web. Avalua el retard entre una interacció de l’usuari, com ara fer clic en un botó o prémer una tecla, i la següent actualització visual que mostra el navegador.
Pensa en una botiga en línia on un visitant fa clic al botó Afegeix a la cistella. Si el navegador triga una estona perceptible a actualitzar la cistella, el visitant pot pensar que el botó no ha funcionat i tornar-hi a fer clic. Això pot generar confusió i fins i tot provocar accions duplicades.
L’INP ajuda a identificar aquest tipus de problemes mesurant la capacitat de resposta d’una pàgina durant tota la visita de l’usuari. A diferència del First Input Delay (FID), que només mesurava el retard abans que el navegador comencés a processar la primera interacció, l’INP té en compte l’experiència d’interacció global durant tota la vida de la pàgina. Una bona puntuació d’INP és de 200 mil·lisegons o menys. Els valors superiors a 200 mil·lisegons i fins a 500 mil·lisegons necessiten millores, mentre que els valors per sobre de 500 mil·lisegons es consideren dolents.
El JavaScript és una causa habitual d’un INP dolent, ja que el navegador pot haver d’executar scripts abans de poder respondre a l’acció de l’usuari i mostrar una actualització. Les tasques de llarga durada poden impedir que el navegador processi les interaccions amb rapidesa.
Per millorar l’INP, els desenvolupadors poden aplicar diverses tècniques:
- Reduir el JavaScript innecessari: Elimina el codi que no s’utilitza i evita carregar scripts que no calen per a la pàgina actual.
- Dividir les tasques llargues: Separa les tasques de JavaScript grans en tasques més petites perquè el navegador tingui més oportunitats de processar les interaccions de l’usuari.
- Optimitzar els gestors d’esdeveniments: Mantén les funcions relacionades amb les interaccions tan senzilles i eficients com sigui possible.
- Evitar actualitzacions innecessàries del DOM: Actualitzar massa elements alhora pot augmentar el temps de renderització i endarrerir la següent actualització visual.
- Reduir els scripts de tercers: Les eines d’analítica, els scripts publicitaris i els serveis incrustats poden consumir recursos de processament i afectar la capacitat de resposta.
Millorar l’INP requereix més que reduir la mida total dels fitxers JavaScript. Els desenvolupadors també han d’entendre quan s’executen els scripts i quanta feina ha de fer el navegador després d’una interacció.
Què és el Cumulative Layout Shift (CLS)?
El Cumulative Layout Shift (CLS) mesura l’estabilitat visual d’una pàgina web. Se centra en els canvis inesperats en la posició dels elements visibles mentre es mostra la pàgina.
Per exemple, imagina que un visitant està llegint un article i, de sobte, veu que el text es desplaça cap avall perquè ha aparegut un anunci a sobre. Si el visitant estava a punt de fer clic en un enllaç, el moviment inesperat podria fer que fes clic en un altre element. Aquests canvis de disseny poden fer que un lloc web sigui difícil d’utilitzar, sobretot en dispositius mòbils, on l’àrea visible és limitada. Una bona puntuació de CLS és de 0,1 o menys. Les puntuacions superiors a 0,1 i fins a 0,25 necessiten millores, mentre que les puntuacions per sobre de 0,25 es consideren dolentes.
Diversos problemes habituals poden provocar desplaçaments de disseny inesperats. Les imatges sense dimensions definides, els anuncis inserits dinàmicament, el contingut que es carrega tard i les fonts web que canvien l’aspecte del text poden afectar l’estabilitat visual.
Les tècniques següents poden ajudar a millorar el CLS:
- Definir les dimensions de les imatges: Especifica l’amplada i l’alçada de les imatges o utilitza relacions d’aspecte CSS per reservar l’espai necessari abans que es carregui una imatge.
- Reservar espai per als anuncis: Assigna prou espai als contenidors d’anuncis per evitar que el contingut del voltant es mogui quan apareguin.
- Evitar inserir contingut a sobre del contingut existent: Si s’han de mostrar elements nous, col·loca’ls on no desplacin inesperadament el contingut que els usuaris ja estan veient.
- Optimitzar la càrrega de les fonts: Utilitza estratègies de càrrega de fonts adequades i fonts alternatives per reduir els canvis inesperats en la disposició del text.
- Utilitzar animacions CSS adequades: Sempre que sigui possible, prioritza les animacions basades en propietats com transform i opacity, en lloc de propietats que provoquin canvis de disseny.
És important entendre que no tots els desplaçaments de disseny són perjudicials. Un canvi que es produeix directament en resposta a una interacció de l’usuari pot ser esperat. El CLS se centra en la inestabilitat visual inesperada i utilitza un mètode de puntuació basat en l’impacte i la distància dels desplaçaments de disseny.
Quins són els llindars recomanats de les Core Web Vitals?
Google proporciona llindars específics per ajudar els propietaris de llocs web a determinar si les seves pàgines ofereixen una bona experiència d’usuari. Aquests llindars divideixen el rendiment en tres categories: bo, necessita millores i dolent.
Aquests llindars ajuden els desenvolupadors a avaluar cada mètrica per separat. Tanmateix, una sola prova no és suficient per determinar si un lloc web ofereix una bona experiència de manera constant.
Google recomana avaluar les Core Web Vitals al percentil 75 de les visites a la pàgina, considerant per separat els resultats en mòbil i en ordinador. Això vol dir que almenys el 75% de les visites mesurades han d’assolir el llindar de «bo» per a cada mètrica.
Per exemple, suposem que un lloc web té un valor d’LCP de 2 segons al percentil 75. Això significa que el 75% de les visites mesurades tenen un LCP de 2 segons o menys, la qual cosa compleix el llindar recomanat.
Un lloc web ha d’aspirar a assolir els llindars de «bo» en les tres mètriques, en lloc de centrar-se només en la seva millor puntuació.
Quines són les eines per mesurar les Core Web Vitals?
Les Core Web Vitals es poden mesurar amb diverses eines proporcionades per Google. Aquestes eines ajuden els desenvolupadors a entendre el rendiment d’un lloc web i a identificar les àrees que cal millorar.
PageSpeed Insights
PageSpeed Insights és una de les eines més útils per comprovar les Core Web Vitals. Proporciona tant dades d’usuaris reals, quan n’hi ha de disponibles, com dades de laboratori recollides mitjançant una prova simulada. També ofereix suggeriments per millorar el rendiment de la pàgina.
Google Search Console
Google Search Console inclou un informe de Core Web Vitals que mostra quins grups de pàgines ofereixen una bona experiència d’usuari i quins necessiten millores. Utilitza dades reals per ajudar els propietaris de llocs web a identificar problemes de rendiment en diverses pàgines.
Chrome DevTools i Lighthouse
Chrome DevTools i Lighthouse ajuden els desenvolupadors a provar el rendiment de les pàgines en un entorn controlat. Poden identificar problemes relacionats amb l’execució de JavaScript, la càrrega d’imatges, els desplaçaments de disseny i altres factors que afecten les Core Web Vitals.
Quina diferència hi ha entre les dades de camp i les dades de laboratori?
Les Core Web Vitals es poden avaluar amb dos tipus de dades: dades de camp i dades de laboratori. Entendre’n la diferència ajuda els desenvolupadors a interpretar els resultats de les proves i a triar l’enfocament adequat per millorar el rendiment del lloc web.
Dades de camp
Les dades de camp es recullen d’usuaris reals mentre naveguen per un lloc web. Reflecteixen les condicions reals de navegació, incloent-hi diferents dispositius, connexions de xarxa i interaccions dels usuaris.
Aquestes dades són especialment útils per saber si un lloc web compleix els llindars de Core Web Vitals recomanats per Google en situacions reals.
Dades de laboratori
Les dades de laboratori es recullen en un entorn de proves controlat amb eines com Lighthouse. Ajuden els desenvolupadors a reproduir problemes de rendiment i a investigar-ne les possibles causes.
A diferència de les dades de camp, les dades de laboratori no representen totes les experiències reals dels usuaris. Per tant, un lloc web pot obtenir resultats diferents en les proves de laboratori i en les mesures d’usuaris reals.
Com millorar les Core Web Vitals
Millorar les Core Web Vitals requereix identificar els problemes que afecten la velocitat de càrrega, la interactivitat i l’estabilitat visual. La solució adequada depèn de quina mètrica té un rendiment dolent.
Millorar el Largest Contentful Paint (LCP)
Per millorar l’LCP, els desenvolupadors s’han de centrar a carregar l’element de contingut visible més gran tan ràpidament com sigui possible. Algunes millores habituals són optimitzar les imatges, triar un servei d’allotjament web fiable, reduir els temps de resposta del servidor, activar la memòria cau i evitar retards innecessaris en la càrrega dels recursos importants.
Millorar l’Interaction to Next Paint (INP)
L’INP es pot millorar reduint les tasques de JavaScript de llarga durada i minimitzant la feina innecessària al fil principal. Els desenvolupadors també han d’optimitzar els gestors d’esdeveniments i evitar que el navegador hagi de fer massa feina després que l’usuari faci clic, toqui la pantalla o escrigui.
Millorar el Cumulative Layout Shift (CLS)
Per reduir el CLS, els desenvolupadors han de reservar espai per a les imatges, els vídeos, els anuncis i altres elements abans que es carreguin. Evita inserir contingut nou a sobre del contingut existent de manera inesperada i utilitza dimensions coherents per als elements visuals sempre que sigui possible.
En resum
Les Core Web Vitals ajuden els desenvolupadors a entendre com perceben els usuaris un lloc web pel que fa al rendiment de càrrega, la interactivitat i l’estabilitat visual. Mesurant l’LCP, l’INP i el CLS, els propietaris de llocs web poden identificar problemes de rendiment i prioritzar les millores que fan que les seves pàgines siguin més fàcils d’utilitzar.
Un seguiment regular, les dades d’usuaris reals i una optimització específica poden ajudar els llocs web a mantenir bons resultats de Core Web Vitals al llarg del temps
Preguntes freqüents
1. Quina diferència hi ha entre les dades de camp i les dades de laboratori?
Les dades de camp provenen d’usuaris reals que visiten un lloc web, mentre que les dades de laboratori es recullen en un entorn de proves controlat. Les dades de camp reflecteixen experiències reals dels usuaris, mentre que les dades de laboratori ajuden els desenvolupadors a reproduir i diagnosticar problemes de rendiment.
2. Com puc millorar les puntuacions de les meves Core Web Vitals?
Pots millorar les Core Web Vitals optimitzant les imatges, reduint el JavaScript innecessari, millorant els temps de resposta del servidor, activant la memòria cau i evitant els desplaçaments de disseny inesperats.
