Novità di Aurora

Kara Erickson
Kara Erickson
X

L'iniziativa Aurora di Chrome è il frutto di una collaborazione tra Chrome e framework e strumenti JavaScript open source per migliorare l'esperienza utente sul web. Se Aurora non ha esperienza con te, dai un'occhiata al nostro post introduttivo per saperne di più sulla nostra missione e metodologia.

Dato che non abbiamo pubblicato una roadmap dal 2021, vorremmo condividere ciò che abbiamo fatto e alcuni interessanti progetti che abbiamo in serbo per il 2023.

Punti salienti dei progetti recenti

Negli ultimi anni abbiamo collaborato con framework come Next.js, Angular e Nuxt per ottimizzare Core Web Vitals. Ecco alcuni punti salienti dal nostro ultimo aggiornamento.

Immagini

Le immagini sono spesso causa di problemi di prestazioni. Di seguito sono riportati alcuni metodi che abbiamo adottato con gli stakeholder del framework per garantire che le best practice siano disponibili immediatamente, in modo che gli sviluppatori forniscano immagini in modo ottimale per impostazione predefinita quando usano i framework con cui collaboriamo.

Istruzione Angular sull'immagine

Abbiamo pubblicato una direttiva sull'immagine stabile per il framework Angular, disponibile in Angular 15 e sottoposto a backporting in particolare nelle versioni 13.4 e 14.3. Questa istruzione attiva il caricamento lento nativo per impostazione predefinita, aggiunge suggerimenti fetchpriority alle immagini prioritarie e genera automaticamente attributi srcset appropriati per le immagini adattabili.

L'impatto: i test di laboratorio di Lighthouse sono stati eseguiti nell'ambiente QA di Land's End prima e dopo l'utilizzo della direttiva sulle immagini. Su computer, la metrica Largest Contentful Paint (LCP) mediana è diminuita da 12,0 a 3,0 secondi, un miglioramento del 75% della metrica LCP.

Confronto tra la sequenza: il sito web uno con tag immagine nativi rispetto al sito web due con la direttiva Angular image.

Scopri di più sull'istruzione nel nostro post del blog Ottimizzazione delle immagini con l'istruzione Angular.

Rinnovato next/image

Abbiamo inoltre collaborato con il team Next.js per aggiornare il componente immagine in modo da utilizzare nuove funzionalità del browser come il caricamento lento nativo e l'attributo HTML fetchpriority. La nuova versione è disponibile per impostazione predefinita da Next 13.

L'impatto : il nostro partner Leboncoin è riuscito a migliorare l'LCP di alcune pagine fino al 60% passando alla nuova versione di next/image.

Caratteri web

L'ottimizzazione dei caratteri web può essere difficile da ottenere, poiché non è necessario ridurre le dimensioni di trasferimento delle risorse dei caratteri. I caratteri web possono anche contribuire in modo significativo alla metrica Cumulative Layout Shift (CLS) di una pagina; inoltre, ridurre al minimo le variazioni del layout dovute allo scambio di caratteri richiede un notevole impegno. Fortunatamente, abbiamo collaborato con i framework per rendere questa attività ancora più semplice per gli sviluppatori web.

Strumenti per migliorare i caratteri di riserva di Next.js, Nuxt e Vite

In Next 13 abbiamo aggiunto una funzionalità che regola le dimensioni del carattere di riserva di una pagina per allinearsi meglio al carattere web quando viene caricato. In questo modo viene ridotto il CLS relativo ai caratteri. Abbiamo condiviso la nostra metodologia con il team Nuxt ed è diventata l'ispirazione per il modulo nuxtjs/fontaine e il plug-in Vite fontaine, che utilizzano entrambi lo stesso algoritmo di base.

L'impatto: il nostro partner Vox Media è riuscito a ridurre il CLS su The Verge a 0 in produzione su alcune pagine utilizzando questa funzionalità.

Consulta i nostri post del blog per saperne di più sulla generazione di caratteri di riserva migliori e sugli strumenti del framework di riserva dei caratteri.

Modulo nuxtjs/google-fonts

Abbiamo collaborato con il team di Nuxt per rilasciare un modulo al fine di ottimizzare le prestazioni di Google Font. Il modulo scarica e ospita automaticamente i caratteri Google per evitare un ulteriore round trip del server e supporta anche le opzioni di caratteri incorporati.

Script di terze parti

JavaScript di terze parti è una potenziale fonte di problemi di prestazioni e potrebbe influire su metriche come Interaction to Next Paint (INP), poiché il lavoro pianificato da questi script può ritardare l'esecuzione delle interazioni degli utenti.

Componente next/script per gli script di terze parti

Abbiamo creato un componente script per Next 12+ che per impostazione predefinita carica gli script dopo l'idratazione per evitare il blocco del percorso critico durante il caricamento. Presenta inoltre una modalità web worker che integra Partytown per spostare completamente gli script fuori dal thread principale.

L'impatto: nei test di laboratorio con Lighthouse, CareerKarma ha registrato una riduzione del 24% dell'LCP utilizzando next/script component con la modalità worker attivata.

Confronto tra rullino che mostra l'improvvisazione in LCP

Scopri di più nel nostro post del blog Ottimizzare il caricamento degli script di terze parti in Next.js.

Varie

Le nostre partnership con gli sviluppatori di framework non hanno come obiettivo il miglioramento dei Segnali web essenziali. Stiamo anche lavorando per sfruttare maggiormente le novità e consentire agli sviluppatori di iniziare ancora più facilmente a utilizzare le funzionalità all'avanguardia della piattaforma web.

polyfill delle query del container

Abbiamo aggiornato il polyfill delle query del contenitore per supportare un insieme più ampio di funzionalità CSS e ne abbiamo migliorato le prestazioni in vista della release 1.0.

Scopri di più nel nostro post del blog Inside the Container Query Polyfill.

Quali sono i prossimi passaggi per Aurora?

Nel periodo 2023-2024, abbiamo in programma una serie di progetti interessanti per ottimizzare i Segnali web essenziali per gli sviluppatori di framework.

Nel prossimo anno, ci concentreremo su quanto segue:

  • Componenti wrapper di terze parti per Next.js e Nuxt: i componenti wrapper possono facilitare il caricamento delle librerie 3P popolari in modo ottimale per LCP e INP. Rilascia un tag del componente nel DOM per caricare il tuo tag di terze parti invece di un tag script e il framework selezionerà la strategia di caricamento migliore. Per maggiori dettagli, vedi RFC.

  • Esperienza di sviluppo di SSR e idratazione angolari: abbiamo lavorato a stretto contatto con il team di Angular al progetto di SSR e idratazione. Il nostro obiettivo è stato aggiornare l'esperienza degli sviluppatori nell'utilizzo di SSR, consentendo a un maggior numero di applicazioni di sfruttare i vantaggi della metrica LCP. Continua a seguirci per una RFC ufficiale sulle funzionalità di manipolazione del DOM SSR.

  • Direttiva sull'immagine angolare e funzionalità di nuxt/image: abbiamo in programma una serie di funzionalità interessanti per Angular, come la generazione di suggerimenti automatici di preconnessione, gli strumenti di migrazione per facilitare la transizione dagli elementi <img> di base, il supporto degli elementi <picture> e i segnaposto. Inoltre, ci rivolgeremo al team Nuxt su una serie di nuove funzionalità per nuxt/image.

  • Ricerca INP (cross-framework): poiché Interaction to Next Paint (INP) sostituirà First Input Delay (FID) nel 2024, stiamo aumentando il supporto per migliorare l'INP nei framework. Ciò comporterà l'analisi delle cause principali dei problemi INP nei framework e la creazione di soluzioni integrate per gli utenti del framework ove possibile.

  • Tachimetro 3: stiamo anche contribuendo a implementare la nuova generazione dello strumento di benchmarking Tachimetro per rappresentare il moderno panorama del framework web del 2023.

Non perderti gli aggiornamenti

Aggiungi ai preferiti la nostra pagina di destinazione per non perderti le ultime notizie, i discorsi tecnici e i post del blog del team Aurora. Puoi anche seguirci su Twitter: