Scopri in che modo la nuova metrica INP influisce sull'esperienza dei siti creati utilizzando librerie e framework JavaScript.
Chrome ha recentemente introdotto una nuova metrica di reattività sperimentale nel report Report sull'esperienza utente di Chrome. Questa metrica, che ora chiamiamo Interaction to Next Paint (INP), misura l'adattabilità complessiva alle interazioni degli utenti sulla pagina. Oggi vogliamo condividere informazioni sulla posizione dei siti web creati utilizzando framework JavaScript moderni in relazione a questa metrica. Vogliamo discutere del motivo per cui INP è pertinente per i framework e di come Aurora e i framework stanno lavorando per ottimizzare la reattività.
Contesto
Chrome utilizza First Input Delay (FID) nell'ambito di Core Web Vitals (CWV) per misurare la reattività di caricamento dei siti web. 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 connessi all'interazione. Non include il tempo per elaborare i gestori di eventi, elaborare le interazioni successive sulla stessa pagina o di colorare il frame successivo dopo l'esecuzione dei callback dell'evento. Tuttavia, l'adattabilità è fondamentale per l'esperienza utente durante tutto il ciclo di vita di una pagina perché gli utenti trascorrono circa il 90% del tempo su una pagina dopo che è stata caricata.
INP misura il tempo impiegato da una pagina web per rispondere alle interazioni degli utenti dal momento in cui l'utente inizia l'interazione fino al momento in cui il frame successivo viene visualizzato sullo schermo. Con INP, speriamo di abilitare una misura aggregata per la latenza percepita di tutte le interazioni nel ciclo di vita della pagina. Riteniamo che INP possa fornire una stima più accurata del carico e della reattività in fase di runtime delle pagine web.
Poiché FID misura solo il ritardo di input della prima interazione, è probabile che gli sviluppatori web non abbiano ottimizzato proattivamente le interazioni successive nell'ambito del processo di miglioramento del CWV. I siti, soprattutto quelli con un elevato grado di interattività, dovrebbero iniziare a lavorare sodo per ottenere un buon risultato con questa metrica.
Il ruolo dei framework
Poiché molti siti web si affidano a JavaScript per fornire interattività, il punteggio INP sarà principalmente influenzato dalla quantità di JavaScript elaborato nel thread principale. I framework JavaScript sono una parte essenziale dello sviluppo web front-end moderno 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 una migliore reattività migliorando in anticipo il FID per i siti web. Tuttavia, ora dovrebbero analizzare i dati disponibili delle metriche di reattività e lavorare per colmare eventuali lacune identificate. In generale, gli INP tende ad avere percentuali di superamento più basse e la differenza nel processo di misurazione richiede un'ulteriore ottimizzazione del codice. La seguente tabella riassume il motivo.
Il team di Aurora in Chrome collabora con framework web open source per aiutare gli sviluppatori a migliorare diversi aspetti dell'esperienza utente, incluse le metriche sul rendimento e sul CWV. Con l'introduzione di INP, vogliamo essere preparati al cambiamento delle metriche CWV per i siti web basati su framework. Abbiamo raccolto dati basati sulla metrica sperimentale sulla reattività nei report CrUX. Condivideremo approfondimenti e attività per facilitare la transizione alla metrica INP per i siti web basati su framework.
Dati della metrica sperimentale sulla reattività
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 indicano che c'è molto margine di miglioramento.
In che modo JavaScript influisce sull'INP?
I valori INP nel campo sono correlati bene al tempo di blocco totale (TBT) osservato nel lab. Ciò potrebbe significare che qualsiasi script che blocca il thread principale per un lungo periodo di tempo sarebbe dannoso per INP. L'esecuzione di JavaScript 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 causano il blocco degli script:
JavaScript non ottimizzato: codice ridondante o strategie di caricamento e suddivisione del codice scadenti possono causare il gonfiore di JavaScript e il blocco del 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, script di annunci), possono bloccare il thread principale e causare inutili ritardi. 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 dei quali esegue uno script diverso, potrebbero interferire tra loro e sommarsi causando lunghi ritardi. Alcune di queste attività potrebbero non essere essenziali e potrebbero essere pianificate per un web worker o quando il browser è inattivo.
Overhead del framework per la gestione degli eventi:i framework potrebbero includere funzionalità/sintassi aggiuntivi per la gestione degli eventi. Ad esempio, Vue utilizza v-on per collegare i listener di eventi agli elementi, mentre Angular aggrega i gestori di eventi utente. L'implementazione di queste caratteristiche richiede un codice framework aggiuntivo rispetto a JavaScript vanilla.
Idratazione: quando utilizzi un framework JavaScript, non è raro che un server generi il codice HTML iniziale di una pagina, che deve poi essere ampliato con gestori di eventi e stato dell'applicazione per poter essere interattivo in un browser web. Questo processo è chiamato idratazione. Questo può essere un processo pesante durante il caricamento, a seconda del tempo necessario a JavaScript per il caricamento e per il completamento dell'idratazione. Inoltre, può indirizzare a pagine che sembrano interattive quando non lo sono. Spesso l'idratazione si verifica automaticamente durante il caricamento della pagina o in modo pigro (ad esempio, a seguito dell'interazione dell'utente) e può influire sull'INP o sul tempo di elaborazione dovuto alla pianificazione delle attività. In librerie come React, puoi sfruttare
useTransitionin modo che il rendering di una parte del componente sia nel frame successivo e gli eventuali effetti collaterali più costosi vengano lasciati ai frame futuri. Di conseguenza, gli aggiornamenti in una transizione che generano aggiornamenti più urgenti come i clic possono essere un modello che può essere positivo per INP.Precaricamento: il precaricamento aggressivo delle risorse necessarie per le navigazioni successive può essere una soluzione efficace per le prestazioni. Se, tuttavia, esegui il precaricamento e il rendering delle route SPA in modo sincrono, puoi avere un impatto negativo su INP, in quanto tutti questi costosi tentativi di rendering vengono completati in un singolo frame. Invece, puoi evitare di precaricare il percorso, iniziare il lavoro necessario (ad esempio
fetch()) e sbloccare il colore. Ti consigliamo di ricontrollare se l'approccio del tuo framework al precaricamento sia in grado di garantire un'esperienza utente ottimale e in che modo questo potrebbe influire (se non del tutto) 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, reidratazione e caricamento, nonché le dimensioni di ogni aggiornamento di rendering() per gli script proprietari e di terze parti.
In che modo Aurora e framework affrontano i problemi INP?
Aurora funziona con i framework incorporando best practice per fornire soluzioni integrate a problemi comuni. Abbiamo collaborato con Next.js, Nuxt.js, Gatsby e Angular alla realizzazione di soluzioni che offrano 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 Next.js consente di risolvere i problemi causati dal caricamento inefficiente di script di terze parti. Il chunking granulare è stato introdotto in Next.js per consentire l'utilizzo di blocchi di dimensioni minori per il codice condiviso. Ciò consente di ridurre la quantità di codice comune inutilizzato che viene scaricato da tutte le pagine. Stiamo inoltre collaborando con Next.js per rendere disponibili i dati INP nell'ambito del servizio Analytics.
Angular: Aurora collabora con il team di Angular per esplorare i miglioramenti del rendering e dell'idratazione lato server. Intendiamo inoltre valutare perfezionamenti nella gestione degli eventi e nel rilevamento delle modifiche per migliorare l'INP.
Vue e Nuxt.js: stiamo esplorando opportunità di collaborazione, principalmente in relazione al caricamento e al rendering degli script.
In che modo i framework pensano di migliorare l'INP?
React e Next.js
Il time slicing di React.js, implementato tramite startTransition e Suspense, ti consente di attivare un'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.
Ciò dovrebbe contribuire a migliorare l'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 per le 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. In questo modo i proprietari dei siti Next.js possono adottare la suddivisione del tempo React e migliorare la reattività delle transizioni di percorso.
Angular
Il team di Angular sta valutando diverse idee che potrebbero 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.
- Idratazione: idratazione a forma di isola per limitare la quantità di app che deve essere attivata per l'interazione.
- Riduci l'overhead associato alla tecnologia CD: ad esempio, rendi meno costoso il rilevamento delle modifiche, trova modi per controllare meno elementi dell'app e sfrutta indicatori reattivi relativi ai cambiamenti.
- Suddivisione del codice più granulare: riduci le dimensioni del bundle iniziale.
- Supporto migliore per gli indicatori di caricamento: ad esempio, durante il re-rendering SSR, la navigazione dei percorsi e le operazioni di caricamento lento.
- Strumenti di profilazione: migliori strumenti di sviluppo per comprendere i costi delle interazioni, in particolare riguardo ai costi di rilevamento dei cambiamenti per interazioni specifiche.
Grazie a questi miglioramenti, siamo in grado di risolvere diversi problemi che portano a una scarsa reattività e a un'esperienza utente scadente e a migliorare le metriche CWV e la nuova metrica INP per i siti web basati su framework.
Conclusione
Ci aspettiamo che il punteggio INP offra ai siti web un quadro più preciso, allo scopo di migliorare la reattività e le prestazioni in futuro. Nel 2023, utilizzeremo come riferimento la nostra guida INP esistente per fornire suggerimenti più strategici agli sviluppatori di framework. Ci auguriamo di raggiungere questo obiettivo:
- Creazione di canali per un facile accesso ai dati sul campo su INP per framework e sviluppatori web.
- Lavorare con i framework per creare funzionalità che miglioreranno l'INP per impostazione predefinita.
Siamo felici di ricevere feedback degli utenti del framework mentre iniziano il loro percorso di ottimizzazione INP.