Core Web Vitals: Guia de Rendiment i SEO - Ighenatt Blog

Google fa servir les Core Web Vitals com a senyal de rànquing des del 2021. No és la novetat que era llavors, però continua sent un dels factors més ignorats en auditats de llocs reals. El patró que veiem sovint: l’equip tècnic ha optimitzat el servidor, però ningú ha comprovat les dades de camp a Google Search Console. Les dades de laboratori eren perfectes. Les dades reals, no.

LCP, CLS i INP mesuren coses molt concretes: càrrega, estabilitat visual i resposta a interaccions. Entendre exactament què avalua cadascuna és el punt de partida per saber on és el problema real del teu lloc.

Què són les Core Web Vitals: Mètriques Essencials

Les Core Web Vitals són un conjunt de mètriques específiques que Google utilitza per mesurar l’experiència de l’usuari en un lloc web:

Largest Contentful Paint (LCP) - Càrrega

El LCP mesura el temps que tarda a carregar-se el contingut principal visible d’una pàgina. Per proporcionar una bona experiència d’usuari, el LCP ha d’ocórrer dins dels primers 2,5 segons des que la pàgina comença a carregar-se.

<!-- Exemple d'optimització d'imatge per millorar el LCP -->
<img src="imatge-optimitzada.webp" alt="Descripció" loading="eager" fetchpriority="high">

Interaction to Next Paint (INP) - Interactivitat

L’INP mesura la latència de totes les interaccions de l’usuari durant tota la visita a la pàgina, avaluant la capacitat de resposta general del lloc web. Un bon INP hauria de ser de 200 mil·lisegons o menys, mentre que valors entre 200-500ms necessiten millora i més de 500ms es consideren deficients.

Nota: Google va substituir oficialment la mètrica FID per INP al març del 2024, ja que INP proporciona una mesura més completa de la capacitat de resposta durant tota l’experiència de l’usuari.

Cumulative Layout Shift (CLS) - Estabilitat Visual

El CLS mesura la suma de tots els canvis inesperats en el disseny que es produeixen durant la càrrega d’una pàgina. Una bona puntuació de CLS és de 0,1 o menys.

/* Reservar espai per a imatges i anuncis per evitar canvis de disseny */
.contenidor-imatge {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

Impacte en el Posicionament i Eines de Mesura

Efectes directes en el rànquing:

Des del maig del 2021, Google ha incorporat oficialment aquestes mètriques com a senyals de classificació:

1. Major visibilitat en cerques mòbils: Les pàgines que compleixen els llindars recomanats tenen més probabilitats d’aparèixer als primers resultats, especialment en cerques des de dispositius mòbils.

2. Insígnia de “Pàgina Ràpida”: Google experimenta amb etiquetes visuals als resultats de cerca per indicar llocs que ofereixen una experiència molt bona.

3. Avantatge competitiu: En nínxols competitius, oferir una millor experiència d’usuari pot ser el factor diferenciador entre el teu lloc i el de la competència.

Eines de mesura principals:

Google PageSpeed Insights proporciona dades de rendiment tant de laboratori com de camp, oferint una visió completa del rendiment del teu lloc web. A més, ofereix recomanacions específiques per millorar cada mètrica.

Lighthouse integrat a les eines per a desenvolupadors de Chrome, ofereix auditories detallades de rendiment, accessibilitat, bones pràctiques i optimització web.

Chrome User Experience Report (CrUX) proporciona dades de rendiment reals basades en com els usuaris reals experimenten el teu lloc web.

Estratègies d’Optimització per a Core Web Vitals

Millora del LCP:

1. Optimitza les teves imatges: Utilitza formats moderns com WebP o AVIF, comprimeix les teves imatges i considera implementar imatges responsive.

2. Implementa tècniques de càrrega diferida (lazy loading): Carrega primer el contingut crític i ajorna la càrrega d’elements menys importants.

3. Optimitza el servidor: Redueix el temps de resposta del servidor mitjançant l’ús de CDNs, memòria cau i servidors ràpids.

// Exemple d'implementació de lazy loading
document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

Optimització de l’INP:

1. Minimitza el JavaScript: Redueix la mida dels teus fitxers JS, elimina codi innecessari i considera la divisió de codi (code splitting).

2. Usa Web Workers: Mou el processament intensiu fora del fil principal per mantenir la interfície d’usuari responsive.

3. Optimitza l’ordre de càrrega: Assegura’t que els scripts crítics es carreguen primer.

Optimització del CLS:

1. Especifica dimensions per a contingut multimèdia: Sempre inclou atributs d’amplada i alçada per a imatges i vídeos.

2. Reserva espai per a anuncis: Defineix un contenidor de mida fixa per als elements publicitaris.

3. Pre-carrega tipografies personalitzades: Utilitza preload per carregar les tipografies abans que es necessitin, evitant canvis en el text.

Cas d’Estudi i Resultats Esperats

Un client de comerç electrònic experimentava problemes significatius amb les seves Core Web Vitals. Després d’implementar una sèrie d’optimitzacions:

• Reducció del LCP de 4,2s a 1,8s
• Millora del CLS de 0,25 a 0,05
• Disminució de l’INP de 350ms a 180ms

Aquests canvis van resultar en:

• 22% d’augment en el trànsit orgànic
• 17% de millora en la taxa de conversió
• 15% de reducció en la taxa de rebot

Aquestes mètriques d’experiència d’usuari no són només indicadors tècnics; marquen un canvi en com Google avalua la qualitat dels llocs web, posant l’experiència de l’usuari al centre de l’equació de classificació. Executa PageSpeed Insights a les deu pàgines amb més trànsit ara mateix. Si alguna dona un LCP per sobre de 2,5 segons o un CLS superior a 0,1, tens un problema concret a resoldre. Digues-nos què has trobat i t’indiquem per on començar.