Cos'è il punteggio INP di Google e come migliorarlo in WordPress

Quando Google introduce un nuovo fattore di ranking come l'INP (Interaction to Next Paint), è facile sentirsi sopraffatti. Probabilmente ti starai chiedendo cosa significhi questo termine tecnico per il tuo sito WordPress e cosa devi fare ora.

Comprendiamo perfettamente. Con oltre un decennio di esperienza nell'ottimizzazione di siti WordPress, il nostro team ha immediatamente iniziato a testare per trovare i modi più efficaci per migliorare questo nuovo punteggio.

Dopo aver ricercato l'argomento, abbiamo tradotto tutto il gergo complesso in passaggi semplici e attuabili. Siamo entusiasti di condividere i metodi comprovati che ora utilizziamo nel nostro portafoglio di siti web.

In questa guida, ti spiegheremo esattamente cos'è l'INP e come puoi aumentare i tuoi punteggi, anche se non sei uno sviluppatore.

Ecco una rapida panoramica degli argomenti che tratteremo in questa guida:

1. Cosa sono le Core Web Vitals di Google?
2. Cos'è l'INP di Google?
3. Perché Google ha cambiato la metrica FID in INP?
4. Come misurare il punteggio INP di Google in WordPress
5. Come migliorare il punteggio INP di Google in WordPress
6. Come i proprietari di siti web possono ottimizzare i loro siti per l'INP
7. Come gli sviluppatori possono ottimizzare il loro codice per l'INP
8. Esempi di buone pratiche di codifica JavaScript per sviluppatori
9. Domande frequenti sull'INP di Google
10. Guide esperte per migliorare le prestazioni di WordPress

Cosa sono le Core Web Vitals di Google?

Le Core Web Vitals di Google sono metriche di performance del sito web che Google considera importanti per l'esperienza utente complessiva. Questi punteggi vitali web fanno parte del punteggio complessivo dell'esperienza sulla pagina di Google, che influenzerà il tuo posizionamento SEO.

Queste metriche sono utili perché, anche se il tuo sito web WordPress si carica velocemente, potrebbe non essere completamente funzionale per gli utenti. Anche se una pagina è stata caricata, un visitatore potrebbe non essere in grado di fare ciò che vuole o accedere alle informazioni di cui ha bisogno.

I Core Web Vitals sono progettati per aiutarti in questo. Ti permettono di misurare quanto velocemente il tuo sito web si carica, diventa visibile e pronto per l'uso da parte dei tuoi visitatori.

In passato, Google utilizzava tre test di qualità:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Puoi saperne di più su questi test nella nostra guida definitiva su come ottimizzare i Core Web Vitals per WordPress.

Tuttavia, Google ha sostituito il FID con un nuovo test chiamato INP (Interaction to Next Paint) nel marzo 2024. Gli altri due test continuano ad essere utilizzati.

Diamo un'occhiata a cos'è l'INP e perché Google è passato ad esso.

Cos'è l'INP di Google?

INP sta per 'Interaction to Next Paint'. È una nuova metrica Core Web Vital di Google che misura le interazioni dell'utente che causano ritardi sul tuo sito web.

Il test INP misura quanto tempo intercorre tra un utente che interagisce con il tuo sito web, come fare clic su qualcosa, e l'aggiornamento visivo del tuo contenuto in risposta. Questo aggiornamento visivo è chiamato 'next paint'.

Ad esempio, un utente potrebbe inviare un modulo di contatto sul tuo sito, fare clic su un pulsante o selezionare un'immagine che si apre in una lightbox. Il test INP misurerà il tempo impiegato tra l'esecuzione di queste interazioni da parte dell'utente e la visualizzazione effettiva dei contenuti aggiornati sul tuo sito web.

Il test di Google quindi genera un singolo punteggio INP basato sulla durata della maggior parte delle interazioni dell'utente sul tuo sito web. Il punteggio sarà 'Buono', 'Necessita miglioramenti' o 'Scarso', a seconda di quanto tempo impiega il tuo sito web per aggiornarsi visivamente.

Perché Google ha cambiato la metrica FID in INP?

Il vecchio test FID misurava la rapidità con cui il tuo sito web rispondeva al primo input dell'utente dopo il caricamento della pagina, come un clic del mouse o la pressione di un tasto. Lo fa misurando il tempo tra il primo input dell'utente e quando il tuo sito web inizia ad agire su tale input.

In altre parole, misurava quanto fosse reattivo il tuo sito web al momento del caricamento e la prima impressione che dava agli utenti reali.

Tuttavia, questa metrica non era utile come avrebbe potuto essere. Il test FID presentava due limitazioni:

1. Misurava solo la prima interazione dell'utente, non tutte.
2. Misurava solo fino all'inizio dell'elaborazione dell'interazione da parte del sito web, non quando l'utente poteva effettivamente vedere il feedback visivo sullo schermo.

Quindi Google ha modificato il test per fornire un quadro più completo della reattività complessiva di una pagina web. INP misurerà l'intero tempo che l'utente trascorre lì fino a quando non abbandona la pagina.

Come misurare il punteggio INP di Google in WordPress

Il modo più semplice per testare il tuo punteggio Google Core Web Vitals è utilizzare lo strumento PageSpeed Insights. Inserisci semplicemente l'URL che desideri testare e fai clic sul pulsante 'Analizza'.

Lo strumento analizzerà la pagina web per alcuni secondi e quindi ti mostrerà i risultati del test.

Ora, insieme ad altri Google Core Web Vitals, vedrai anche il punteggio Interaction to Next Paint (INP) della pagina.

Ci saranno punteggi diversi per gli utenti di dispositivi mobili e desktop.

Nello screenshot sopra, puoi vedere il punteggio INP per gli utenti desktop che visualizzano questa pagina web su WPBeginner è di 47 ms. Il punto verde significa che questo è un buon punteggio.

Una volta che puoi vedere il punteggio per il tuo sito, probabilmente ti starai chiedendo come si confronta con altri siti web e se necessita di miglioramenti.

Google ha fornito alcune linee guida per interpretare il tuo punteggio INP:

• Più veloce di 200 millisecondi – buona reattività
• 200-500 millisecondi – necessita di miglioramenti
• Più lento di 500 millisecondi – scarsa reattività

Assicurati di controllare il tuo punteggio sia per gli utenti di dispositivi mobili che desktop e punta a una buona reattività.

Puoi quindi migliorare il tuo punteggio INP seguendo le linee guida nelle sezioni seguenti.

Studio di caso: Trovare interazioni lente sui siti web di Awesome Motive

Ma prima, potrebbe essere utile esaminare uno studio di caso. Abbiamo iniziato a misurare i punteggi INP sui nostri siti di marca, tra cui All in One SEO, MonsterInsights e WPForms.

Quando il nostro team ha controllato i punteggi INP del nostro sito web, i risultati iniziali hanno mostrato che le nostre pagine più popolari necessitavano di miglioramenti.

Utilizzando la dashboard di Chrome User Experience (CrUX), abbiamo potuto constatare che:

• L'80% delle nostre sessioni è stato valutato 'buono'
• Il 12% delle nostre sessioni è stato valutato 'necessita miglioramento'
• L'8% delle nostre sessioni è stato valutato 'scarso'

Un report PageSpeed Insights ci fornisce un punteggio INP complessivo, ma non ci dice quali pulsanti specifici o campi modulo causano il ritardo per gli utenti reali. Per scoprirlo, dobbiamo approfondire utilizzando altri strumenti che analizzano i dati delle sessioni dei visitatori effettivi.

Ciò significa che, successivamente, dovremo eseguire i nostri test per trovare interazioni lente nelle pagine con punteggi INP inferiori. Questo è un compito dettagliato e avanzato che è meglio eseguire da uno sviluppatore.

Viene fatto andando su ogni pagina che necessita di miglioramenti e quindi testando ogni interazione con clic, tocchi e pressioni di tasti effettivi. Questi devono essere cronometrati e valutati utilizzando strumenti.

Il Chrome Developers Blog elenca una serie di strumenti che possono essere utilizzati per il testing, come l'estensione Chrome Web Vitals e la nuova modalità timespan nel pannello Lighthouse in DevTools. Puoi anche consultare l'articolo di Google su come eseguire il debug utilizzando l'estensione Web Vitals.

È importante notare che le sessioni con valutazioni inferiori si sono svolte molto probabilmente su dispositivi o connessioni più lenti. Ciò significa che durante il test, si consiglia di limitare la velocità del browser, altrimenti potresti non notare le interazioni lente.

Puoi farlo utilizzando la funzionalità Inspect Element di Chrome andando su Visualizza » Sviluppatore » Ispeziona elementi. Puoi passare alla scheda 'Rete' e selezionare un'opzione di limitazione dal menu a discesa.

È importante testare su una connessione più lenta perché molti dei tuoi utenti potrebbero essere su dispositivi mobili o avere una connessione Internet non perfetta. Un problema invisibile sul tuo veloce computer d'ufficio potrebbe essere una fonte di frustrazione per loro.

Una volta trovati i punteggi INP per le tue pagine, puoi utilizzare i suggerimenti nella sezione successiva di questo tutorial per migliorarli.

Come migliorare il punteggio INP di Google in WordPress

La maggior parte del lavoro di ottimizzazione del punteggio INP dovrà essere svolta dagli sviluppatori. Ciò include gli autori del tema e dei plugin che utilizzi sul tuo sito web, oltre agli sviluppatori di qualsiasi JavaScript personalizzato che stai eseguendo.

Questo perché il punteggio INP è principalmente correlato al tempo necessario per eseguire le interazioni JavaScript sul tuo sito web.

Ad esempio, quando un utente fa clic su un pulsante, viene eseguito del codice JavaScript per eseguire la funzione prevista dal clic sul pulsante. Questo codice viene scaricato sul computer dell'utente ed eseguito nel suo browser web.

Per ottimizzare il tuo punteggio INP, è necessario ridurre i ritardi che si verificano durante le interazioni utente JavaScript. Ci sono tre componenti per questo ritardo:

1. Ritardo di input, che si verifica quando il tuo sito web è in attesa di attività in background in quella pagina che impediscono l'esecuzione dell'handler di eventi.
2. Tempo di elaborazione, che è il tempo necessario per eseguire gli gestori di eventi in JavaScript.
3. Ritardo di presentazione, che è il tempo necessario per ricalcolare la pagina e visualizzare il contenuto della pagina sullo schermo.

In qualità di proprietario di un sito web, ci sono passaggi che puoi intraprendere per migliorare il primo e il terzo ritardo. Ti mostreremo come nella prossima sezione.

Tuttavia, per apportare miglioramenti reali al tuo punteggio INP, dovrai migliorare il secondo ritardo, che è il tempo di elaborazione del codice stesso. Non è qualcosa che puoi fare da solo.

Gli sviluppatori del tuo tema WordPress, dei plugin e del JavaScript personalizzato potrebbero dover ottimizzare il loro codice per fornire un feedback immediato ai tuoi utenti. La buona notizia è che probabilmente ci stanno già lavorando per rispettare la scadenza di marzo 2024.

Offriamo alcuni suggerimenti specifici per gli sviluppatori con esempi più avanti in questo articolo.

Come i proprietari di siti web possono ottimizzare i loro siti per l'INP

Sebbene l'impatto più significativo sul punteggio INP del tuo sito web deriverà dagli sviluppatori che ottimizzano il loro codice, ci sono alcune cose che i proprietari di siti web possono fare.

In particolare, puoi assicurarti che i clic del mouse e le pressioni dei tasti dei tuoi utenti vengano riconosciuti il prima possibile ottimizzando i processi in background sul tuo sito. Inoltre, puoi assicurarti che la risposta al loro input venga visualizzata sullo schermo il più rapidamente possibile.

Sebbene questi passaggi potrebbero non riscrivere direttamente il codice che causa un'interazione lenta, migliorano la salute generale del tuo sito. Un sito più veloce e snello offre al browser più risorse per gestire rapidamente le interazioni degli utenti, il che può sicuramente aiutare il tuo punteggio INP.

Ecco alcuni passaggi che puoi intraprendere per raggiungere questo obiettivo.

1. Assicurati di utilizzare l'ultima versione di WordPress

La prima cosa che dovresti fare è assicurarti di utilizzare l'ultima versione di WordPress.

Questo perché le versioni 6.2 e 6.3 di WordPress hanno introdotto significativi miglioramenti delle prestazioni. Questi miglioreranno le prestazioni del tuo sito web sul lato server e sul lato client, il che migliorerà il tuo punteggio INP.

Per istruzioni dettagliate, puoi consultare la nostra guida su come aggiornare WordPress in sicurezza.

2. Ottimizza i processi in background in WordPress

I processi in background sono attività pianificate in WordPress che vengono eseguite in background. Potrebbero includere il controllo degli aggiornamenti di WordPress, la pubblicazione di post pianificati e il backup del tuo sito web.

Se il tuo sito web è troppo impegnato nell'esecuzione di queste attività in background, potrebbe non rendersi conto immediatamente che l'utente ha fatto clic con il mouse o premuto un tasto, con conseguente punteggio INP scarso.

Potresti essere in grado di configurare i tuoi script in background e i plugin per ridurre la quantità di lavoro che svolgono, esercitando meno pressione sul tuo sito web. Altrimenti, potresti essere in grado di eseguirli solo quando sono necessari invece di lasciarli in esecuzione in background.

Per istruzioni dettagliate, puoi consultare la sezione Ottimizza i processi in background della nostra guida definitiva su come aumentare la velocità e le prestazioni di WordPress.

3. Controlla le raccomandazioni sulle prestazioni di PageSpeed Insights

Dopo aver eseguito il test PageSpeed Insights sul tuo sito web, puoi scorrere verso il basso fino alla sezione Prestazioni dei risultati del test.

Qui troverai alcune opportunità per migliorare le prestazioni del tuo sito insieme al tempo stimato di risparmio se segui i consigli.

Ad esempio, potresti vedere raccomandazioni per eliminare le risorse che bloccano il rendering. Puoi farlo seguendo la nostra guida su come correggere JavaScript e CSS che bloccano il rendering in WordPress.

Potresti anche vedere una raccomandazione per ridurre JavaScript inutilizzato. Troverai un'impostazione per farlo in molti dei migliori plugin di caching per WordPress, come WP Rocket.

4. Minifica JavaScript in WordPress

JavaScript deve essere scaricato sul computer dell'utente prima di poter essere eseguito. Rendendo i tuoi file JavaScript il più piccoli possibile, puoi ottenere alcuni piccoli miglioramenti nelle prestazioni.

La minificazione del tuo JavaScript rende i file più piccoli rimuovendo spazi bianchi, righe e caratteri non necessari dal codice sorgente.

Questo non avrà un effetto drastico sulle tue prestazioni, ma se stai cercando di risparmiare qualche millisecondo in più sul tuo punteggio INP, potresti trovarlo utile.

Per saperne di più, puoi consultare la nostra guida su come minificare file CSS e JavaScript in WordPress.

Come gli sviluppatori possono ottimizzare il loro codice per l'INP

Se sei uno sviluppatore, i maggiori guadagni nel punteggio INP deriveranno dall'ottimizzazione del tuo codice. Ecco alcune cose che puoi fare.

1. Riconosci visivamente l'input dell'utente immediatamente

Ecco l'unica cosa che farà la differenza maggiore nell'ottimizzazione del punteggio INP del tuo codice: devi fornire un feedback visivo immediato a tutti gli input dell'utente.

L'utente dovrebbe vedere subito che il suo input è stato riconosciuto e che ci stai agendo sopra. Questo farà sì che il tuo codice sembri più reattivo all'utente e si tradurrà in un ottimo punteggio INP.

Ecco alcuni esempi:

• Se un utente fa clic su un elemento, dovresti mostrare qualcosa che indichi che l'elemento è stato cliccato.
• Se un utente invia un modulo, devi immediatamente mostrare qualcosa per riconoscerlo, come un messaggio o uno spinner.
• Se un utente fa clic su un'immagine per aprirla in una lightbox, non aspettare semplicemente che l'immagine venga caricata. Invece, dovresti mostrare immediatamente un'immagine dimostrativa o uno spinner. Quindi, quando l'immagine viene caricata, puoi visualizzarla nella lightbox.

Più di ogni altra cosa, questo migliorerà il tuo punteggio INP, specialmente se devi eseguire elaborazioni JavaScript intensive in risposta all'input dell'utente.

Assicurati solo di aggiornare l'interfaccia utente prima di iniziare l'attività.

Dopodiché, puoi pianificare l'esecuzione del lavoro pesante leggermente più tardi utilizzando una callback setTimeout. Questo dà al browser un momento per aggiornare lo schermo prima che si occupi del compito intensivo.

Una volta che avrai capito bene questo, ci sono alcune altre cose che puoi fare per ottimizzare il tuo codice.

2. Ottimizza dove il browser trascorre la maggior parte del suo tempo

La cosa successiva che dovresti fare è indagare dove il browser trascorre la maggior parte del suo tempo e quindi ottimizzare quelle parti.

In Google Chrome, quando navighi su Visualizza » Sviluppatore » Strumenti per sviluppatori » Prestazioni, è possibile ispezionare le funzioni JavaScript e gli handler di eventi che bloccano il prossimo rendering.

Con queste informazioni, puoi vedere cosa può essere ottimizzato per ridurre il tempo fino al prossimo rendering dopo l'interazione dell'utente.

3. Riduci i tuoi layout

A volte, molta attività della CPU consiste nel lavoro di layout.

Quando ciò accade, dovresti verificare se il tuo codice sta causando al browser il ricalcolo ripetuto del layout della pagina. Questo viene spesso chiamato ‘layout thrashing’ e forniamo un esempio su come evitarlo più avanti in questa guida.

4. Mostra prima i contenuti sopra la piega

Se il rendering dei contenuti della pagina è lento, il tuo punteggio INP potrebbe risentirne.

Puoi considerare di mostrare prima solo i contenuti importanti ‘sopra la piega’ per visualizzare il frame successivo più rapidamente.

Esempi di buone pratiche di codifica JavaScript per sviluppatori

Potrebbe essere utile mostrarti alcuni esempi di come un codice scadente possa portare a un punteggio INP basso.

Abbiamo messo insieme un progetto di esempio su CodePen con cui puoi sperimentare. Puoi esaminare il nostro codice di esempio, leggere le nostre brevi spiegazioni e vedere la differenza che fa cliccando sui pulsanti.

Ecco un'animazione da quel progetto CodePen. Puoi vedere che il codice di esempio non ottimizzato si traduce in un punteggio INP basso di 965 millisecondi. La pressione del pulsante sembrerà lenta agli utenti.

Al contrario, il codice ottimizzato aggiorna il testo del pulsante immediatamente, ottenendo il miglior punteggio INP possibile.

Continua a leggere per vedere quattro esempi di come puoi migliorare il tuo codice per ottimizzare il punteggio INP.

Esempio 1: Aggiorna lo schermo prima di eseguire un'attività CPU intensiva

Le attività CPU intensive richiedono tempo e questo può portare a punteggi INP bassi a meno che tu non scriva un buon codice. In questo caso, è meglio aggiornare lo schermo prima di eseguire tale attività.

Ecco un esempio scadente in cui l'interfaccia utente viene aggiornata dopo un'attività CPU intensiva. Ciò si traduce in un INP elevato:

// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});

In questo esempio migliorato, l'interfaccia utente viene aggiornata immediatamente quando si fa clic sul pulsante.

Successivamente, l'attività CPU intensiva viene spostata in una callback setTimeout:

// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';

  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});

Ciò consente al browser di aggiornare lo schermo prima di avviare l'attività lenta, ottenendo un buon punteggio INP.

Esempio 2: Pianifica l'elaborazione non urgente

Dovresti anche assicurarti di non eseguire lavori non urgenti o non essenziali in uno script immediatamente, poiché ciò potrebbe ritardare la risposta che l'utente si aspetta.

Dovresti iniziare aggiornando immediatamente la pagina per riconoscere l'input dell'utente. Successivamente, puoi utilizzare requestIdleCallback per pianificare il resto dello script quando c'è tempo libero alla fine di un frame o quando l'utente è inattivo.

Ecco un esempio:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});

Questo farà sì che la pagina web sembri più reattiva all'utente e otterrai un punteggio INP migliore.

Esempio 3: Pianifica l'esecuzione di una funzione prima del prossimo paint

Puoi anche usarerequestAnimationFrame per pianificare l'esecuzione di una funzione prima del prossimo repaint:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});

Questo può essere utile per animazioni o aggiornamenti visivi in risposta alle interazioni dell'utente.

Ancora una volta, dovresti fornire un feedback all'utente riconoscendo immediatamente il suo input.

Esempio 4: Evitare il layout thrashing

Il layout thrashing si verifica quando leggi e scrivi ripetutamente nel DOM (Document Object Model), causando al browser di ricalcolare il layout più volte.

Ecco un esempio di layout thrashing:

// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});

Questo può essere evitato raggruppando le tue letture e scritture.

Questo è un esempio migliore:

// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});

Domande frequenti sull'INP di Google

Comprendiamo che un argomento tecnico come l'INP possa sollevare molte domande. Per aiutarti, abbiamo risposto ad alcune delle domande più comuni che riceviamo dai nostri lettori.

Cos'è l'Interaction to Next Paint (INP) di Google?

L'Interaction to Next Paint (INP) è una metrica di Google Core Web Vital che misura la reattività complessiva di un sito web alle interazioni dell'utente. Calcola il tempo dall'inizio di un clic, tocco o digitazione dell'utente su una pagina fino alla successiva visualizzazione di un aggiornamento sullo schermo.

Questo offre una visione più ampia dell'esperienza utente rispetto alla precedente metrica FID.

Perché Google ha sostituito il First Input Delay (FID) con l'INP?

Google ha sostituito il FID con l'INP perché fornisce una misura più completa della reattività di una pagina. Il FID misurava solo il ritardo della prima interazione.

Al contrario, l'INP valuta la latenza di tutte le interazioni dell'utente durante una visita, offrendo un quadro più completo dell'esperienza dell'utente.

Cos'è un buon punteggio INP?

Secondo le linee guida di Google, un buon punteggio INP è di 200 millisecondi o meno. Un punteggio compreso tra 200 e 500 millisecondi 'necessita di miglioramenti', e qualsiasi valore superiore a 500 millisecondi è considerato 'scarsa reattività'.

Come posso migliorare il mio punteggio INP in WordPress?

Migliorare il tuo punteggio INP in WordPress comporta diversi passaggi. I proprietari di siti web possono ottimizzare i processi in background, ridurre al minimo JavaScript e assicurarsi che il loro sito sia aggiornato.

Gli sviluppatori possono avere un impatto significativo ottimizzando il codice per fornire un feedback visivo immediato alle azioni dell'utente, come la visualizzazione di un indicatore di caricamento, e differendo i compiti più pesanti.

Guide esperte per migliorare le prestazioni di WordPress

Speriamo che questo tutorial ti abbia aiutato a imparare come migliorare il tuo punteggio INP di Google in WordPress. Potresti anche voler consultare altri articoli relativi al miglioramento delle prestazioni di WordPress:

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.