Analisi delle prestazioni con Core Web Vitals

Le Core Web Vitals sono un insieme di metriche introdotte da Google per misurare l’esperienza utente di un sito web. Queste metriche sono diventate un importante fattore di ranking per il SEO, rendendo essenziale per i webmaster e gli specialisti SEO comprendere e ottimizzare questi indicatori. In questo capitolo, esploreremo in dettaglio le Core Web Vitals, come analizzarle e come migliorare le prestazioni del vostro sito web.

Cosa sono le Core Web Vitals?

Le Core Web Vitals sono tre metriche specifiche che misurano la velocità di caricamento, l’interattività e la stabilità visiva di una pagina web:

1. Largest Contentful Paint (LCP)
2. Interaction to Next Paint (INP)
3. Cumulative Layout Shift (CLS)

Vediamo ciascuna di queste metriche in dettaglio.

1. Largest Contentful Paint (LCP)

LCP misura il tempo di caricamento del contenuto principale di una pagina. In pratica, indica quanto tempo ci vuole per caricare l’elemento più grande visibile nella viewport iniziale.

Valori di riferimento:

• Buono: meno di 2,5 secondi
• Necessita miglioramento: tra 2,5 e 4 secondi
• Scarso: più di 4 secondi

Come migliorare l’LCP:

• Ottimizzare le immagini (compressione, dimensionamento corretto)
• Implementare il lazy loading per le immagini fuori dalla viewport
• Migliorare il server response time
• Utilizzare un Content Delivery Network (CDN)

Esempio di codice per implementare il lazy loading:

<img src="placeholder.jpg" data-src="image.jpg" class="lazy" alt="Descrizione immagine">

<script>
document.addEventListener("DOMContentLoaded", function() {
  var 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);
    });
  }
});
</script>

2. Interaction to Next Paint (INP)

INP misura la reattività di una pagina alle interazioni dell’utente. Valuta il tempo che intercorre tra l’interazione dell’utente (come un clic) e il momento in cui il browser è in grado di rispondere a tale interazione.

Valori di riferimento:

• Buono: meno di 200 millisecondi
• Necessita miglioramento: tra 200 e 500 millisecondi
• Scarso: più di 500 millisecondi

Come migliorare l’INP:

• Ottimizzare il JavaScript (minimizzare, comprimere)
• Ridurre il lavoro sul thread principale
• Implementare il code splitting
• Utilizzare Web Workers per operazioni intensive

Esempio di utilizzo di Web Workers:

// main.js
const worker = new Worker('worker.js');

worker.postMessage({data: 'Dati da elaborare'});

worker.onmessage = function(event) {
  console.log('Risultato dal worker:', event.data);
};

// worker.js
self.onmessage = function(event) {
  // Esegui operazioni intensive qui
  const result = heavyComputation(event.data);
  self.postMessage(result);
};

function heavyComputation(data) {
  // Simulazione di un'operazione intensiva
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }
  return result;
}

3. Cumulative Layout Shift (CLS)

CLS misura la stabilità visiva di una pagina, quantificando quanto gli elementi della pagina si spostano durante il caricamento.

Valori di riferimento:

• Buono: meno di 0,1
• Necessita miglioramento: tra 0,1 e 0,25
• Scarso: più di 0,25

Come migliorare il CLS:

• Specificare le dimensioni per immagini e video
• Evitare di inserire contenuti sopra contenuti esistenti
• Utilizzare trasformazioni CSS per le animazioni
• Prevedere spazio per gli annunci

Esempio di come specificare le dimensioni delle immagini:

<img src="image.jpg" width="640" height="360" alt="Descrizione immagine">

Come misurare le Core Web Vitals

Esistono diversi strumenti per misurare le Core Web Vitals:

1. Google Search Console: Fornisce un report dettagliato sulle Core Web Vitals del vostro sito.
2. PageSpeed Insights: Offre un’analisi approfondita delle prestazioni di una singola pagina, incluse le Core Web Vitals.
3. Lighthouse: Uno strumento di audit integrato nei browser Chrome e Edge, che fornisce un’analisi completa delle prestazioni.
4. Chrome User Experience Report: Fornisce dati reali sulle prestazioni degli utenti Chrome.
5. Web Vitals Extension: Un’estensione per Chrome che mostra le Core Web Vitals in tempo reale mentre navigate.

Esempio di utilizzo di Lighthouse da riga di comando:

npm install -g lighthouse
lighthouse https://www.example.com --only-categories=performance --view

Questo comando eseguirà un audit di Lighthouse sulla pagina specificata, concentrandosi solo sulle prestazioni, e aprirà automaticamente il report nel browser.

Analisi approfondita delle Core Web Vitals

Per un’analisi più dettagliata, è utile combinare i dati di diversi strumenti e considerare metriche aggiuntive.

Analisi del LCP

Oltre al tempo di caricamento, considerate:

• Quale elemento sta causando l’LCP
• Se l’elemento LCP è diverso su dispositivi mobili e desktop

Script Python per analizzare l’elemento LCP utilizzando Selenium:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()
driver.get("https://www.example.com")

# Attendere che l'elemento LCP sia caricato
lcp_element = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.CSS_SELECTOR, ".lcp-element"))
)

print(f"Elemento LCP: {lcp_element.tag_name}")
print(f"Dimensioni: {lcp_element.size}")
print(f"Posizione: {lcp_element.location}")

driver.quit()

Analisi dell’INP

Per l’INP, è importante:

• Identificare quali interazioni stanno causando ritardi
• Analizzare il codice JavaScript associato a queste interazioni

Esempio di come monitorare le interazioni utilizzando Performance Observer:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.interactionId) {
      console.log('Interaction:', entry.name);
      console.log('Duration:', entry.duration);
      console.log('Start time:', entry.startTime);
    }
  }
});

observer.observe({ type: 'event', buffered: true });

Analisi del CLS

Per il CLS, concentrate l’attenzione su:

• Identificare quali elementi stanno causando lo shift
• Analizzare quando avvengono questi shift durante il caricamento della pagina

Script JavaScript per monitorare il CLS in tempo reale:

let cumulativeLayoutShift = 0;

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cumulativeLayoutShift += entry.value;
      console.log('CLS:', cumulativeLayoutShift);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Ottimizzazione delle Core Web Vitals

Una volta identificati i problemi, ecco alcune strategie di ottimizzazione avanzate:

Ottimizzazione del LCP

1. Implementare il preload per risorse critiche:

<link rel="preload" href="critical-image.jpg" as="image">

2. Utilizzare il server push HTTP/2 per risorse critiche:

<FilesMatch "\.(js|css|jpg|png)$">
    Header add Link "</assets/critical.css>; rel=preload; as=style"
</FilesMatch>

3. Implementare il rendering lato server per contenuti critici:

// Esempio con Next.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  return { props: { data } }
}

Ottimizzazione dell’INP

1. Debounce e throttle per eventi ad alta frequenza:

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

window.addEventListener('resize', debounce(() => {
  // Codice da eseguire al ridimensionamento
}, 250));

2. Utilizzare requestAnimationFrame per animazioni fluide:

function animate() {
  // Codice di animazione
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

3. Implementare la virtualizzazione per lunghe liste:

import { FixedSizeList as List } from 'react-window';

function Row({ index, style }) {
  return <div style={style}>Row {index}</div>;
}

function Example() {
  return (
    <List
      height={150}
      itemCount={1000}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
}

Ottimizzazione del CLS

1. Riservare spazio per elementi caricati dinamicamente:

.ad-slot {
  min-height: 250px;
  min-width: 300px;
}

2. Utilizzare font-display: optional per i web font:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
  font-display: optional;
}

3. Implementare placeholder per immagini:

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E"
     data-src="actual-image.jpg"
     class="lazy"
     alt="Descrizione immagine">

Monitoraggio continuo e miglioramento

L’ottimizzazione delle Core Web Vitals non è un’attività una tantum, ma un processo continuo. Ecco come implementare un sistema di monitoraggio efficace:

1. Implementare il Real User Monitoring (RUM):

// Esempio di implementazione RUM con web-vitals
import {getLCP, getFID, getCLS} from 'web-vitals';

function sendToAnalytics({name, delta, id}) {
  // Codice per inviare i dati al vostro sistema di analytics
  console.log(name, delta, id);
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

2. Creare un dashboard personalizzato:
   Utilizzate strumenti come Google Data Studio per creare un dashboard che combini dati da Google Search Console, Google Analytics e il vostro sistema RUM.
3. Impostare alert automatici:
   Configurate alert che vi notifichino quando le metriche superano determinate soglie.
4. Implementare test A/B per le ottimizzazioni:
   Utilizzate strumenti come Google Optimize per testare l’impatto delle vostre ottimizzazioni sulle Core Web Vitals.
5. Integrare il monitoraggio delle Core Web Vitals nel vostro processo CI/CD:

# Esempio di step in un file .gitlab-ci.yml
performance_test:
  stage: test
  script:
    - npm install -g lighthouse
    - lighthouse https://www.example.com --only-categories=performance --output=json --output-path=./report.json
    - node ./scripts/parse-lighthouse-results.js
  artifacts:
    paths:
      - ./report.json

Conclusione

L’analisi e l’ottimizzazione delle Core Web Vitals sono fondamentali per offrire un’esperienza utente di alta qualità e migliorare il posizionamento nei motori di ricerca. Ricordate che ogni sito è unico e potrebbe richiedere approcci diversi. Sperimentate, monitorate costantemente e iterate sulle vostre ottimizzazioni per ottenere i migliori risultati.

L’obiettivo finale non è solo migliorare i numeri, ma creare un’esperienza web veloce, reattiva e stabile che soddisfi le esigenze dei vostri utenti. Con un approccio sistematico all’analisi e all’ottimizzazione delle Core Web Vitals, potrete migliorare significativamente le prestazioni del vostro sito web, aumentare la soddisfazione degli utenti e potenzialmente migliorare il vostro posizionamento nei risultati di ricerca.