Pada Mei 2022, tim Aurora dan Angular mengumumkan bahwa mereka akan berkolaborasi dalam perintah gambar untuk Angular. Perintah ini baru-baru ini dirilis untuk pratinjau developer sebagai bagian dari Angular v14.2. Postingan ini membahas cara perintah gambar baru, NgOptimizedImage, mendukung pengoptimalan gambar di Angular.
Latar belakang
Gambar adalah komponen umum dan penting dari pengalaman pengguna web, dengan 99,9% halaman web yang menghasilkan permintaan untuk satu atau beberapa gambar. Gambar juga merupakan kontributor paling signifikan terhadap berat halaman, yang merupakan median 982 kilobyte per halaman.
Karena jumlah dan ukurannya yang terus bertambah, gambar dapat menghambat performa halaman web dan memengaruhi metrik Data Web Inti. Untuk 79,4% halaman desktop, gambar adalah elemen Largest Contentful Paint (LCP) pada tahun 2021. Oleh karena itu, upaya untuk mendapatkan gambar yang dioptimalkan telah menjadi upaya yang terus-menerus bagi banyak orang.
Tim Aurora percaya pada pemanfaatan kekuatan framework untuk memberikan solusi bawaan bagi tantangan umum developer. Langkah pertama mereka dalam bidang pengoptimalan gambar adalah komponen gambar Next.js. Mereka menganggap komponen ini sebagai tempat pengujian untuk mengetahui apakah meningkatkan pengalaman developer (DX) pengoptimalan gambar dapat meningkatkan performa untuk lebih banyak aplikasi yang menggunakan framework.
Kumpulan hasil pertama dari pengguna Next.js Leboncoin sangat menggembirakan. Leboncoin mengalami peningkatan LCP yang signifikan (dari 2,4 detik menjadi 1,7 detik) setelah mereka mulai menggunakan next/image. Penerapan next/image berikutnya di komunitas berperan dalam peningkatan origin Next.js yang memenuhi nilai minimum LCP. Segera setelah itu, ada permintaan untuk fitur serupa di framework lain, salah satunya adalah Angular.
Oleh karena itu, Aurora berkonsultasi dengan Angular dan Nuxt untuk membuat prototipe komponen gambar untuk framework ini. Komponen gambar Nuxt dirilis tahun lalu. Sekarang, perintah gambar Angular (NgOptimizedImage) telah dirilis untuk menghadirkan setelan default pengoptimalan gambar ke Angular.
Peluang
Angular adalah salah satu framework JavaScript terkemuka yang digunakan oleh developer saat ini. Library ini digunakan oleh lebih dari 50 ribu origin yang di-crawl oleh HTTPArchive di perangkat seluler dan memiliki hampir 3 juta download mingguan di NPM.