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 relativa alla reattività nel report Report sull'esperienza utente di Chrome. Questa metrica, che ora chiamiamo Interaction to Next Paint (INP), misura la reattività generale alle interazioni degli utenti sulla pagina. Oggi vogliamo condividere informazioni sulla posizione dei siti web creati con framework JavaScript moderni in relazione a questa metrica. Vogliamo discutere del motivo per cui INP è importante per i framework e di come Aurora e i framework stiano lavorando per ottimizzare la reattività.
Sfondo
Chrome utilizza First Input Delay (FID) nell'ambito di Core Web Vitals (CWV) per misurare la reattività del caricamento dei siti web. La metrica FID misura il tempo di attesa dalla prima interazione dell'utente al momento in cui il browser è in grado di elaborare i gestori di eventi collegati all'interazione. Non include il tempo necessario per elaborare i gestori di eventi, elaborare le interazioni successive sulla stessa pagina o visualizzare il frame successivo dopo l'esecuzione dei callback di eventi. Tuttavia, la reattività è fondamentale per l'esperienza utente in tutto il ciclo di vita della pagina, in quanto gli utenti trascorrono circa il 90% del tempo su una pagina dopo il caricamento.
INP misura il tempo impiegato da una pagina web per rispondere alle interazioni dell'utente dal momento in cui l'utente inizia l'interazione fino al momento in cui sullo schermo viene visualizzato il frame successivo. Con INP, speriamo di consentire una misurazione aggregata per la latenza percepita di tutte le interazioni durante il ciclo di vita della pagina. Riteniamo che INP fornirà una stima più accurata delle pagine web la reattività di carico e runtime.
Poiché la metrica FID misura solo il ritardo di input della prima interazione, è probabile che gli sviluppatori web non abbiano ottimizzato in modo proattivo le interazioni successive nell'ambito del processo di miglioramento di CWV. I siti, in particolare quelli con un elevato grado di interattività, dovrebbero quindi iniziare a lavorare sodo per ottenere buoni risultati con questa metrica.
Il ruolo dei framework
Poiché molti siti web si basano su JavaScript per fornire interattività, il punteggio INP viene influenzato principalmente dalla quantità di codice JavaScript elaborato nel thread principale. I framework JavaScript sono una parte essenziale del moderno sviluppo web front-end e forniscono agli sviluppatori preziose astrazioni per il routing, la gestione degli eventi e la compartimentazione del codice JavaScript. Hanno quindi un ruolo centrale nell'ottimizzazione della reattività e dell'esperienza utente dei siti web che li utilizzano.
I framework potrebbero aver adottato misure per migliorare la reattività migliorando in precedenza il FID per i siti web. Tuttavia, ora dovrebbero analizzare i dati disponibili sulle metriche di reattività e lavorare per colmare le eventuali lacune identificate. In generale, l'INP tende ad avere tassi di superamento più bassi e la differenza nel processo di misurazione richiede un'ulteriore ottimizzazione del codice. La seguente tabella riassume i motivi.
Il team di Aurora in Chrome collabora con framework web open source per aiutare gli sviluppatori a migliorare diversi aspetti dell'esperienza utente, tra cui le prestazioni e le metriche CWV. Con l'introduzione di INP, vogliamo essere preparati al cambiamento delle metriche CWV per i siti web basati su framework. Abbiamo raccolto dati in base alla metrica sperimentale relativa alla reattività nei report CrUX. Condivideremo approfondimenti e azioni per facilitare la transizione alla metrica INP per i siti web basati su framework.
Dati delle metriche sulla reattività sperimentale
Un 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 su ogni framework con un buon punteggio di reattività. Le cifre sono incoraggianti, ma ci fanno capire che c'è molto margine di miglioramento.
In che modo JavaScript influisce su INP?
I valori INP sul campo sono ben correlati al tempo di blocco totale (TBT) osservato nel lab. Ciò potrebbe sottintendere che qualsiasi script che blocca il thread principale per una lunga durata non sia efficace per INP. L'esecuzione intensiva di JavaScript dopo un'interazione potrebbe bloccare il thread principale per un periodo prolungato e ritardare la risposta a quell'interazione. Di seguito sono riportate alcune delle cause più comuni che portano al blocco degli script:
JavaScript non ottimizzato:codice ridondante o strategie di suddivisione e caricamento del codice non adeguate possono causare un gonfiamento del codice JavaScript e bloccare il thread principale per lunghi periodi. La suddivisione del codice, il caricamento progressivo e la suddivisione di 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. Dare la priorità agli script essenziali può contribuire a ridurre l'impatto negativo degli script di terze parti.
Più gestori di eventi: più gestori di eventi associati a ogni interazione, ognuno che esegue uno script diverso, potrebbero interferire tra loro e causare ritardi prolungati. Alcune di queste attività potrebbero non essere essenziali e potrebbero essere pianificate su un worker web o quando il browser è inattivo.
Overhead del framework per la gestione degli eventi: i framework possono avere funzionalità/sintassi aggiuntive per la gestione degli eventi. Ad esempio, Vue utilizza v-on per collegare listener di eventi agli elementi, mentre Angular aggrega i gestori di eventi utente. L'implementazione di queste funzionalità richiede un codice framework aggiuntivo rispetto a JavaScript Vanilla.
Idratazione: quando si utilizza un framework JavaScript, non è raro che un server generi il codice HTML iniziale per una pagina che deve essere aumentata con gestori di eventi e lo 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 del completamento dell'idratazione. Inoltre, può portare a pagine che sembrano interattive. Spesso l'idratazione avviene automaticamente durante il caricamento della pagina o in modo lento (ad esempio in seguito all'interazione dell'utente) e può influire sull'INP o sui tempi di elaborazione a causa della pianificazione delle attività. Nelle librerie come React, puoi sfruttare
useTransitionin modo che il rendering di una parte di un componente sia nel frame successivo e gli eventuali effetti collaterali più costosi vengono lasciati ai frame futuri. Per questo motivo, gli aggiornamenti in una transizione che danno luogo ad aggiornamenti più urgenti, come i clic, possono essere un comportamento positivo per INP.Precaricamento: il precaricamento aggressivo delle risorse necessarie per le navigazioni successive può essere efficace se eseguito correttamente. Tuttavia, se effettui il precaricamento e il rendering delle route SPA in modo sincrono, potresti avere un impatto negativo su INP, dato che questo costoso rendering tenta di essere completato in un singolo frame. Diversamente dal fatto che non è stato eseguito il precaricamento del percorso, viene invece avviato il lavoro necessario (ad esempio,
fetch()) e si sblocca la vernice. Ti consigliamo di verificare nuovamente se l'approccio del tuo framework al precaricamento fornisce l'esperienza utente ottimale e se questo potrebbe influire su INP.
D'ora in poi, per 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 chunking, reidratazione e caricamento, nonché le dimensioni di ogni aggiornamento di render() per gli script proprietari e di terze parti.
In che modo Aurora e i quadri di riferimento affrontano i problemi relativi all'INP?
Aurora lavora con dei framework incorporando best practice per fornire soluzioni integrate a problemi comuni. Abbiamo collaborato con Next.js, Nuxt.js, Gatsby e Angular su soluzioni che offrono forti valori predefiniti 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 Next.js consente di risolvere i problemi causati da un caricamento inefficiente degli script di terze parti. Il chunking granulare è stato introdotto in Next.js per consentire l'utilizzo di blocchi di dimensioni più piccole per il codice condiviso. Ciò consente di ridurre la quantità di codice comune inutilizzato che viene scaricato su tutte le pagine. Inoltre, stiamo collaborando con Next.js per rendere disponibili i dati INP nell'ambito del servizio Analytics.
Angular: Aurora sta collaborando con il team Angular per esplorare i miglioramenti relativi al rendering lato server e all'idratazione. Prevediamo inoltre di esaminare perfezionamenti nella gestione degli eventi e nel rilevamento delle modifiche per migliorare INP.
Vue e Nuxt.js: stiamo esplorando nuove opportunità di collaborazione, principalmente per quanto riguarda il caricamento e il rendering degli script.
Come pensano i framework di riferimento per migliorare INP?
React e Next.js
Il time slicing di React.js, implementato tramite startTransition e Suspense, ti consente di attivare l'idratazione selettiva o progressiva. Ciò significa che l'idratazione non è un blocco sincrono. Viene fatto in piccole sezioni che possono essere interrotte in qualsiasi momento.
Questo dovrebbe contribuire a migliorare INP e consentirti di rispondere più rapidamente alle sequenze di tasti, agli effetti del passaggio del mouse durante la transizione e ai clic. Inoltre, contribuisce a mantenere reattive le app React anche in caso di 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 delle route. Ciò consente ai proprietari di siti Next.js di adottare la suddivisione del tempo di React e di migliorare la reattività delle transizioni dei percorsi.
Angular
Il team di Angular sta esaminando diverse idee che dovrebbero essere utili anche per INP:
- Senza zona: riduce le dimensioni iniziali del bundle e il codice richiesto che deve essere caricato prima che un'app possa eseguire il rendering di qualsiasi cosa.
- Idratazione:idratazione a livello di isola per limitare la quantità di contenuti che l'app deve essere riattivata per l'interazione.
- Riduci l'overhead of CD: ad esempio, rendi meno costoso il rilevamento delle modifiche, trova modi per controllare meno risorse dell'app e sfrutta gli indicatori reattivi sulle modifiche apportate.
- Suddivisione del codice più granulare: rimpicciolisci il bundle iniziale.
- Supporto migliore per gli indicatori di caricamento: ad esempio, durante il nuovo rendering SSR, durante la navigazione del percorso e in operazioni di caricamento lento.
- Strumenti di profilazione: migliori strumenti di sviluppo per comprendere i costi di interazione, in particolare quelli relativi al rilevamento delle variazioni per interazioni specifiche.
Grazie a questi miglioramenti, siamo in grado di risolvere diversi problemi che portano a una scarsa reattività ed esperienza utente, nonché di migliorare le metriche CWV e la nuova metrica INP per i siti web basati su framework.
Conclusione
Ci aspettiamo che il punteggio INP fornisca una visuale migliore per i siti web per migliorare la reattività e il rendimento in futuro. Utilizzeremo la nostra guida INP esistente per fornire suggerimenti più strategici agli sviluppatori di framework nel 2023. Ci auguriamo di raggiungere questo obiettivo tramite:
- Creazione di canali per un facile accesso ai dati sul campo su INP per framework e sviluppatori web.
- Utilizza i framework per creare funzionalità che miglioreranno INP per impostazione predefinita.
Siamo felici di ricevere feedback dagli utenti del framework all'inizio del loro percorso di ottimizzazione INP.