Ottimizzare l’Interaction to Next Paint per i Core Web Vitals

Nel marzo 2024, l’Interaction to Next Paint (INP) è diventato parte dei Core Web Vitals di Google, un insieme di metriche che valutano l’esperienza utente delle pagine web. Sebbene framework moderni come Next.js siano ottimizzati per buoni punteggi INP di base, è fondamentale capire che le azioni all’interno dell’applicazione influenzano profondamente i risultati. Molti pattern UX ragionevoli spingono i browser al limite delle linee guida INP.

Un esempio di perfetto INP è un gestore di eventi clic vuoto { } } > Click me. Sebbene non ci sia alcuna modifica nel DOM, è irrilevante per la metrica. Inoltre, inserire sleep(100) nel codice consente al browser di dipingere prima di bloccare il main thread, ottenendo comunque un INP perfetto. Comprendere queste dinamiche è vitale per l’ottimizzazione dell’INP.