Scopri in che modo la nuova metrica INP influisce sull'esperienza dei siti creati utilizzando framework e librerie JavaScript.
Di recente, Chrome ha introdotto una nuova metrica sperimentale di adattabilità nel Report sull'esperienza utente di Chrome. Questa metrica, che ora conosciamo come Interaction to Next Paint (INP), misura l'adattabilità complessiva alle interazioni degli utenti sulla pagina. Oggi vogliamo condividere approfondimenti sulla posizione dei siti web creati utilizzando framework JavaScript moderni rispetto a questa metrica. Vogliamo spiegare perché l'INP è pertinente per i framework e in che modo Aurora e i framework stanno lavorando per ottimizzare la reattività.
Sfondo
Chrome utilizza il First Input Delay (FID) nell'ambito di Core Web Vitals (CWV) per misurare l'adattabilità al caricamento dei siti web. Il FID misura il tempo di attesa dalla prima interazione dell'utente al momento in cui il browser è in grado di elaborare i gestori degli eventi collegati all'interazione. Non è incluso il tempo necessario per elaborare i gestori degli eventi, elaborare le interazioni successive nella stessa pagina o disegnare il frame successivo dopo l'esecuzione dei callback degli eventi. Tuttavia, l'adattabilità è fondamentale per l'esperienza utente durante tutto il ciclo di vita della pagina, perché gli utenti trascorrono circa il 90% del tempo su una pagina dopo il caricamento.
INP misura il tempo necessario a una pagina web per rispondere alle interazioni dell'utente dal momento in cui l'utente avvia l'interazione fino al momento in cui viene visualizzato sullo schermo il frame successivo. Con l'INP, ci auguriamo di attivare una misura aggregata per la latenza percepita di tutte le interazioni nel ciclo di vita della pagina. Riteniamo che l'INP fornirà una stima più accurata del caricamento e della reattività in fase di esecuzione delle pagine web.
Poiché l'FID misura solo il ritardo di inserimento della prima interazione, è probabile che gli sviluppatori web non abbiano ottimizzato in modo proattivo le interazioni successive nell'ambito del processo di miglioramento del CWV. I siti, in particolare quelli con un elevato grado di interattività, dovranno quindi impegnarsi per ottenere un buon risultato in questa metrica.
Il ruolo dei framework
Poiché molti siti web si basano su JavaScript per fornire interattività, il punteggio INP sarebbe influenzato principalmente dalla quantità di JavaScript elaborata nel thread principale. I framework JavaScript sono una parte essenziale dello sviluppo web front-end moderno e forniscono agli sviluppatori astrazioni preziose per il routing, la gestione degli eventi e la suddivisione in compartimenti del codice JavaScript. Hanno quindi un ruolo centrale nell'ottimizzazione dell'adattabilità e dell'esperienza utente dei siti web che li utilizzano.
I framework potrebbero aver adottato misure per migliorare l'adattabilità migliorando in precedenza il FID per i siti web. Tuttavia, ora dovranno analizzare i dati delle metriche di reattività disponibili e cercare di colmare eventuali lacune identificate. In generale, le campagne INP tendono ad avere tassi di passaggio più bassi e la differenza nel processo di misurazione richiede un'ottimizzazione del codice aggiuntiva. La tabella seguente riassume il motivo.
Il team di Aurora di Chrome utilizza framework web open source per aiutare gli sviluppatori a migliorare diversi aspetti dell'esperienza utente, tra cui le metriche relative alle prestazioni e a Core Web Vitals. Con l'introduzione dell'INP, vogliamo prepararci al cambiamento delle metriche CWV per i siti web basati su framework. Abbiamo raccolto i dati in base alla metrica di adattabilità sperimentale nei report CrUX. Condivideremo approfondimenti e azioni per semplificare la transizione alla metrica INP per i siti web basati su framework.
Dati sperimentali delle metriche di adattabilità
Un valore INP inferiore o uguale a 200 millisecondi indica una buona reattività. I dati del report CrUX e il report sulla tecnologia CWV di giugno 2023 forniscono le seguenti informazioni sulla reattività per i framework JavaScript più diffusi.
La tabella mostra la percentuale di origini in ogni framework con un buon punteggio di reattività. I numeri sono incoraggianti, ma ci dicono che c'è molto spazio per miglioramenti.
In che modo JavaScript influisce sull'INP?
I valori INP sul campo sono ben correlati al tempo di blocco totale (TBT) osservato in laboratorio. Ciò potrebbe implicare che qualsiasi script che blocchi il thread principale per una lunga durata sia dannoso per l'INP. L'esecuzione di JavaScript pesante dopo qualsiasi interazione potrebbe bloccare il thread principale per un periodo prolungato e ritardare la risposta a quell'interazione. Ecco alcune delle cause più comuni che portano al blocco degli script:
JavaScript non ottimizzato:il codice ridondante o le strategie di suddivisione e caricamento del codice scadenti possono causare un aumento eccessivo del codice JavaScript e bloccare il thread principale per lunghi periodi. La suddivisione del codice, il caricamento progressivo e la suddivisione delle attività lunghe possono migliorare notevolmente i tempi di risposta.
Script di terze parti:gli script di terze parti, che a volte non sono necessari per elaborare un'interazione (ad esempio gli script degli annunci), possono bloccare il thread principale e causare ritardi non necessari. Assegnare la priorità agli script essenziali può contribuire a ridurre l'impatto negativo degli script di terze parti.
Più gestori eventi:più gestori eventi associati a ogni interazione, ognuno dei quali esegue uno script diverso, potrebbero interferire tra loro e causare lunghi ritardi. Alcune di queste attività potrebbero non essere essenziali e potrebbero essere pianificate su un web worker o quando il browser è inattivo.
Overhead del framework per la gestione degli eventi:i framework potrebbero avere funzionalità/sintassi aggiuntive per la gestione degli eventi. Ad esempio, Vue utilizza v-on per associare gli ascoltatori di eventi agli elementi, mentre Angular racchiude i gestori degli eventi utente. L'implementazione di queste funzionalità richiede codice del framework aggiuntivo oltre a JavaScript standard.
Idrazione:quando si utilizza un framework JavaScript, non è raro che un server generi il codice HTML iniziale di una pagina che deve essere integrata con gestori di eventi e stato dell'applicazione in modo che possa essere interattiva in un browser web. Questo processo è chiamato idratazione. Questo può essere un processo impegnativo durante il caricamento, a seconda del tempo necessario per il caricamento di JavaScript e per il completamento dell'idratazione. Inoltre, può dare l'impressione che le pagine siano interattive, anche se non lo sono. Spesso l'idratazione avviene automaticamente durante il caricamento della pagina o in modo lazy (ad esempio in base all'interazione dell'utente) e può influire sul tempo di elaborazione o sull'INP a causa della pianificazione delle attività. In librerie come React, puoi utilizzare
useTransitionin modo che parte del rendering di un componente sia nel frame successivo e gli eventuali effetti collaterali più costosi vengano lasciati ai frame futuri. In questo caso, gli aggiornamenti in una transizione che generano aggiornamenti più urgenti come i clic possono essere un pattern utile per l'INP.Precaricamento: il precaricamento aggressivo delle risorse necessarie per le navigazioni successive può migliorare il rendimento se eseguito correttamente. Tuttavia, se esegui il pre-caricamento e il rendering dei percorsi SPA in modo sincrono, potresti influire negativamente sull'INP poiché tutti questi tentativi di rendering costosi vengono completati in un unico frame. Confronta questo con il non eseguire il pre-caricamento del percorso e avviare invece il lavoro necessario (ad esempio
fetch()) e sbloccare la pittura. Ti consigliamo di verificare se l'approccio al pre-caricamento del tuo framework offre un'esperienza utente ottimale e in che modo (se del caso) ciò potrebbe influire sull'INP.
D'ora in poi, per ottenere un buon punteggio INP, gli sviluppatori dovranno concentrarsi sulla revisione del codice che viene eseguito dopo ogni interazione sulla pagina e ottimizzare le strategie di suddivisione in blocchi, reidratazione e caricamento, nonché le dimensioni di ogni aggiornamento di render() sia per gli script proprietari che per quelli di terze parti.
In che modo Aurora e i framework stanno affrontando i problemi relativi agli INP?
Aurora funziona con i framework incorporando le best practice per fornire soluzioni integrate ai problemi comuni. Abbiamo lavorato con Next.js, Nuxt.js, Gatsby e Angular su soluzioni che offrono impostazioni predefinite efficaci all'interno del framework per ottimizzare le prestazioni. Di seguito sono riportati i punti salienti del nostro lavoro in questo contesto:
React e Next.js: il componente Script di Next.js aiuta a risolvere i problemi causati dal caricamento inefficiente di script di terze parti. Il chunking granulare è stato introdotto in Next.js per consentire chunk di dimensioni più ridotte per il codice condiviso. In questo modo, puoi ridurre la quantità di codice comune inutilizzato scaricato su tutte le pagine. Collaboriamo anche con Next.js per rendere disponibili i dati INP nell'ambito del loro servizio Analytics.
Angular: Aurora collabora con il team di Angular per esplorare i miglioramenti del rendering lato server e dell'idratazione. Inoltre, prevediamo di esaminare i perfezionamenti nella gestione degli eventi e nel rilevamento delle modifiche per migliorare l'INP.
Vue e Nuxt.js: stiamo esplorando strade per la collaborazione, principalmente in relazione al caricamento e al rendering degli script.
I framework stanno pensando a come migliorare l'INP?
React e Next.js
La suddivisione in base al tempo di React.js, implementata tramite startTransition e Suspense, ti consente di attivare l'idratazione selettiva o progressiva. Ciò significa che l'idratazione non è un blocco sincrono. Viene eseguita in piccoli segmenti che possono essere interrotti in qualsiasi momento.
In questo modo dovresti migliorare l'INP e riuscire a rispondere più rapidamente alle sequenze di tasti, agli effetti di passaggio del mouse durante la transizione e ai clic. Inoltre, aiuta a mantenere le app React reattive anche per transizioni di grandi dimensioni come il completamento automatico.
Next.js ha implementato un nuovo framework di routing che utilizza startTransition per impostazione predefinita per le transizioni di route. In questo modo, i proprietari di siti Next.js possono adottare il slicing del tempo di React e migliorare la reattività delle transizioni di route.
Angular
Il team di Angular sta esplorando diverse idee che dovrebbero essere utili anche per l'INP:
- Senza zone: riduce le dimensioni del bundle iniziale e il codice necessario da caricare prima che un'app possa eseguire il rendering di qualsiasi elemento.
- Idratazione:idratazione in stile isola per limitare la quantità di app che deve essere risvegliata per l'interazione.
- Riduci il sovraccarico del CD: ad esempio, rendi il rilevamento delle modifiche meno costoso, trova modi per controllare meno l'app e sfrutta gli indicatori reattivi su cosa è cambiato.
- Suddivisione del codice più granulare:riduci le dimensioni del bundle iniziale.
- Migliore supporto per gli indicatori di caricamento: ad esempio durante il nuovo rendering SSR, la navigazione nel percorso e le operazioni di caricamento lento.
- Strumenti di profilazione:strumenti di sviluppo migliori per comprendere il costo delle interazioni, in particolare il costo del rilevamento delle modifiche per interazioni specifiche.
Grazie a questi miglioramenti, possiamo risolvere diversi problemi che causano una scarsa reattività e un'esperienza utente negativa, nonché migliorare le metriche CWV e la nuova metrica INP per i siti web basati su framework.
Conclusione
Prevediamo che il punteggio INP fornirà una bussola migliore per i siti web per migliorare la reattività e il rendimento in futuro. Nel 2023 miglioreremo la nostra guida esistente sull'INP per fornire suggerimenti più utili agli sviluppatori di framework. Ci auguriamo di raggiungere questo obiettivo:
- Creazione di canali per un facile accesso ai dati sul campo nell'INP per framework e sviluppatori web.
- Utilizza i framework per creare funzionalità che miglioreranno l'INP per impostazione predefinita.
Accogliamo con favore i feedback degli utenti del framework all'inizio del loro percorso di ottimizzazione dell'INP.