INP: tutto quello che c’è da sapere sul nuovo Core Web Vital di Google

In questi giorni l‘Interaction to Next Paint (INP) è diventato ufficialmente il nuovo Core Web Vital, sostituendo il First Input Delay (FID).

FID verrà eliminato immediatamente da Google Search Console, mentre PageSpeed Insights e CrUX continueranno a mostrare il valore di FID ancora per i prossimi 6 mesi.

Cos’è INP

Innanzitutto, INP misura la reattività della pagina.

Nello specifico, misura il tempo che trascorre dall’interazione dell’utente con la pagina all’ottenimento di un feedback visivo.

INP si focalizza sul valore peggiore registrato tra tutte le interazioni, e rende ancor più importante quindi che l’utente riceva un feedback visivo immediato.

INP registra il valore peggiore (quello più grande) registrato tra tutte le interazioni. Tradotto: se passa troppo tempo tra quando l’utente clicca, tappa o preme un tasto e quando accade qualcosa di visibile a video, INP farà schifo.

5 cose importanti da sapere su INP

1. Rappresenta il 98° percentile (invece del 75°). Questo significa che è sufficiente che il 3% degli utenti abbia un’esperienza negativa per influenzarne negativamente il punteggio.
   
2. Viene calcolato alla fine dell’interazione dell’utente con la pagina.
   
3. Non è influenzato dallo scroll, poiché lo scroll non è considerato un’interazione.
   
4. Può essere influenzato da <iframe> inseriti nella pagina, quindi è importante monitorare elementi come widget di chatmembed video.
   
5. È impattato dal carico di lavoro del main thread, il processo del browser che gestisce JavaScript, interazioni utente, e rendering dei contenuti.
   

Come ottimizzare INP sul tuo sito web

INP è impattato dal carico di lavoro del main thread. Il main thread non può effettuare queste operazioni contemporaneamente, per questo motivo mentre ne fa una le altre operazioni vengono accodate.

Se il tuo sito è fatto con un page builder, occhio! La situazione potrebbe non essere delle migliori.

Anche se usi i plugin “tarocca-pagespeed” (per intenderci quelli che disattivano i javascript finché l’utente non interagisce) la situazione potrebbe essere delicata.

Ecco alcune strategie utili per ottimizzare INP sul tuo sito:

⚡Riduci il javascript utilizzato: elimina il javascript non necessario, concentrandoti su riduzione e differimento del codice bloccante.

⚡Ottimizza il DOM: riduci le dimensioni del DOM e utilizza content-visibility per alleggerire il lavoro di rendering (testato su Chrome, supportato anche da Firefox

⚡Fornisci rapidamente un feedback visivo: aggiorna rapidamente l’UI per rispondere prontamente alle interazioni dell’utente.

⚡Riscrivi il javascript per ridurne l’impatto: il js deve essere “spezzatato” affinchè possa essere eseguito in meno di 50ms

Naturalmente l’applicazione pratica di queste strategie dipende da caso a caso e non esiste una soluzione “one size fit all”.

Prima di salutarti ti lascio qui un breve video di approfondimento tratto dal mio intervento sul palco del WordCamp Verona, che contiene tutto ciò che c’è da sapere su INP.

******************

Le tue metriche Core Web Vitals hanno preso una batosta con l’arrivo di INP? Non attendere!

Contattaci oggi stesso per un’analisi personalizzata delle performance tecniche del tuo sito web. Ottimizzare i Core Web Vitals significa migliorare l’esperienza dei tuoi utenti, incrementare il tuo ranking su Google e di conseguenza far crescere conversioni e fatturato.