A maggio 2022, i team di Aurora e Angular hanno annunciato che avrebbero collaborato a una direttiva per le immagini per Angular. La direttiva è stata rilasciata di recente per la preview per sviluppatori nell'ambito di Angular v14.2. Questo post spiega in che modo la nuova direttiva image, NgOptimizedImage, supporta l'ottimizzazione delle immagini in Angular.
Sfondo
Le immagini sono un componente comune e fondamentale dell'esperienza utente web, con il 99,9% delle pagine web che generano richieste di una o più immagini. Le immagini sono anche il fattore più significativo nel determinare il peso della pagina, costituendo una media di 982 kilobyte per pagina.
A causa del loro numero e delle loro dimensioni in crescita, le immagini possono ostacolare il rendimento delle pagine web e influire sulle metriche di Segnali web essenziali. Nel 2021, per il 79,4% delle pagine desktop, un'immagine era l'elemento Largest Contentful Paint (LCP). La ricerca di immagini ottimizzate è quindi diventata un'attività costante per molti di noi.
Il team di Aurora crede nell'utilizzo della potenza dei framework per fornire soluzioni integrate alle sfide comuni degli sviluppatori. Il loro primo approccio allo spazio di ottimizzazione delle immagini è stato il componente immagine Next.js. Hanno considerato questo componente un banco di prova per verificare se il miglioramento dell'esperienza degli sviluppatori (DX) dell'ottimizzazione delle immagini potesse portare a un miglioramento delle prestazioni per un maggior numero di app che utilizzano i framework.
La prima serie di risultati dell'utente Next.js Leboncoin è stata incoraggiante. Leboncoin ha registrato un miglioramento significativo dell'LCP (da 2,4 a 1,7 secondi) dopo aver iniziato a utilizzare next/image. L'adozione successiva di next/image nella community ha contribuito all'aumento delle origini Next.js che soddisfano le soglie LCP. Ben presto sono arrivate richieste di funzionalità simili in altri framework, tra cui Angular.
Di conseguenza, Aurora ha consultato Angular e Nuxt per realizzare il prototipo dei componenti immagine per questi framework. Il componente immagine Nuxt è stato rilasciato lo scorso anno. Ora è stata rilasciata la direttiva immagine Angular (NgOptimizedImage) per portare le impostazioni predefinite di ottimizzazione delle immagini ad Angular.
Opportunità
Angular è uno dei principali framework JavaScript utilizzati oggi dagli sviluppatori. Viene utilizzato da più di 50.000 origini sottoposte a scansione da HTTPArchive sui dispositivi mobili e vanta quasi 3 milioni di download settimanali su NPM.