L'interazione con Next Paint è ora una metrica stabile di Core Web Vital che sostituisce First Input Delay.
Il momento è arrivato! Dopo anni di lavoro, siamo finalmente pronti a rendere Interaction to Next Paint (INP) una metrica stabile di Core Web Vital. Ciò rappresenta un importante passo avanti nel modo in cui misuriamo la reattività all'interazione, colmando molte delle carenze del First Input Delay (FID).
In questo post, faremo un breve riepilogo di cosa esattamente cambierà oggi, imposteremo una tempistica più specifica per il ritiro e la rimozione dei dati FID dagli strumenti di Chrome e condivideremo alcune risorse per aiutarti a trovare e risolvere i problemi relativi a INP.
Che cosa cambia oggi
Per quanto riguarda Chrome, tutti i nostri strumenti Core Web Vitals ora rifletteranno lo stato stabile di INP, ove applicabile. Ad esempio, strumenti come PageSpeed Insights, dashboard di CrUX e estensione Web Vitals mostreranno in modo più evidente INP nel trio di metriche Core Web Vitals. In particolare, in PageSpeed Insights, la logica di valutazione Core Web Vitals valuterà le prestazioni INP anziché FID. Per scoprire di più sulle modifiche corrispondenti a Search Console, consulta il post del blog del team per la Ricerca.
Inoltre, a partire da oggi alcuni strumenti potrebbero mostrare un avviso di deprecazione per la metrica FID come avviso del fatto che la metrica non è più un Segnale web essenziale e verrà rimossa. La seguente sezione relativa alle tempistiche di ritiro della FID illustra le date da conoscere per garantire la tua transizione completa da FID.
Tempi di ritiro FID
Ora che INP ha sostituito la metrica FID come metrica di Core Web Vitals, Chrome sta ufficialmente ritirando il supporto per FID. Ciò significa che gli strumenti di Chrome non garantiranno più la disponibilità di FID e che gli sviluppatori avranno tempo fino al 9 settembre 2024 per passare a INP.
Ciò è particolarmente importante per i consumatori delle API Chrome User Experience Report (CrUX) o PageSpeed Insights. Le applicazioni che elaborano i dati FID da una di queste API devono essere trasferite a INP entro il 9 settembre per evitare malfunzionamenti o interruzioni del servizio. Precisiamo che si tratterà di un cambiamento che provoca un errore nelle versioni più recenti delle API e non ci saranno variazioni nei numeri delle versioni principali.
Risorse per ottimizzare INP
Che tu stia guardando INP per la prima volta o sia un esperto della reattività, la raccolta di risorse per l'ottimizzazione INP è un ottimo punto di partenza per trovare ciò che stai cercando. Questa raccolta di documenti evergreen copre tutti gli aspetti, dalla definizione della metrica stessa, alle tecniche per misurarla localmente e con utenti reali, ai consigli pratici per ottimizzare una varietà di casi d'uso e a un elenco di case study reali che mostrano le linee guida in azione.
Con questi documenti, puoi seguire un flusso di lavoro generale per trovare e risolvere i problemi INP sul tuo sito:
Acquisisci familiarità con il modo in cui INP misura la reattività alle interazioni degli utenti nei documenti INP canonici.
Analizza i dati di utenti reali per valutare il rendimento INP del tuo sito. Per essere considerata buona, almeno il 75% delle esperienze INP deve rispondere all'input dell'utente in meno di 200 millisecondi. Se il tuo sito ha già un buon INP, non affaticarti!
Collega il tuo URL a PageSpeed Insights o consulta il report Core Web Vitals su Search Console, se il tuo sito web è incluso nel set di dati CrUX.
Rivolgiti al tuo fornitore di analisi per verificare se supporta il monitoraggio INP.
Implementa la tua soluzione INP utilizzando web-vitals.js.
Se necessario, configura il sito per raccogliere informazioni diagnostiche relative alle esperienze utente. Si tratta di metadati importanti, come l'elemento della pagina con cui l'utente ha interagito e il motivo per cui è stato lento, nonché altri dati utili. Complessivamente, queste informazioni ti aiuteranno a comprendere le maggiori opportunità di miglioramento.
Riproduci le interazioni lente in locale con Chrome DevTools. In questo modo potrai capire esattamente cosa sta succedendo dietro le quinte e qual è il codice in questione.
Ottimizza il codice in modo da svolgere il minor lavoro possibile durante la gestione di un'interazione utente:
Misura le modifiche a livello locale e monitora le esperienze degli utenti reali per assicurarti che il tuo rendimento INP sia (e rimanga) veloce.
Spero che queste indicazioni ti aiutino a ottimizzare INP. In caso di problemi, puoi sempre ricevere assistenza pubblicando una domanda codificata con interaction-to-next-paint su Stack Overflow.
Il lancio di INP come Core Web Vital è da tempo. Ripensando al nostro primo post su come creare una metrica di reattività migliore nel 2021. Da allora, abbiamo preso in considerazione tutti gli straordinari feedback della community e abbiamo sviluppato una metrica che crediamo fermamente aiuterà gli sviluppatori a migliorare un'area di esperienze utente svantaggiata, portando in ultima analisi un web migliore. Grazie a tutti per l'aiuto nel dare forma a questa metrica e per tutto il lavoro compiuto per migliorare lo stato di reattività.