Apa yang Baru dari Aurora?

Kara Erickson
Kara Erickson
X

Inisiatif Aurora Chrome adalah kolaborasi antara Chrome dan framework serta alat JavaScript open source untuk meningkatkan pengalaman pengguna di web. Jika Anda baru mengenal Aurora, lihat postingan pengantar kami untuk mempelajari lebih lanjut misi dan metodologi kami.

Mengingat kami belum memublikasikan roadmap sejak tahun 2021, kami ingin membagikan apa yang telah kami lakukan dan beberapa project menarik yang kami siapkan untuk tahun 2023.

Sorotan project terbaru

Selama beberapa tahun terakhir, kami telah berpartner dengan framework seperti Next.js, Angular, dan Nuxt untuk mengoptimalkan Core Web Vitals. Berikut beberapa sorotan sejak update terakhir kami.

Gambar

Gambar sering kali menjadi sumber masalah performa. Berikut adalah beberapa metode yang telah kami tempuh bersama pemangku kepentingan framework untuk memastikan bahwa praktik terbaik tersedia secara langsung, sehingga developer dapat mengirimkan gambar secara optimal secara default saat mereka menggunakan framework yang menjadi partner kami.

Directive gambar Angular

Kami memublikasikan perintah gambar stabil untuk framework Angular, yang tersedia di Angular 15 dan di-backport secara khusus ke 13.4 dan 14.3. Perintah ini mengaktifkan pemuatan lambat native secara default, menambahkan petunjuk fetchpriority ke gambar prioritas, dan otomatis membuat atribut srcset yang sesuai untuk gambar responsif.

Dampak: Pengujian lab Lighthouse dilakukan di lingkungan QA Land's End sebelum dan sesudah menggunakan perintah gambar. Di desktop, median Largest Contentful Paint (LCP) mereka menurun dari 12,0 detik menjadi 3,0 detik, yang berarti peningkatan LCP sebesar 75%.

Perbandingan filmstrip: Situs Satu dengan tag gambar native versus Situs Dua dengan perintah gambar Angular.

Baca selengkapnya tentang perintah ini di postingan blog kami, Mengoptimalkan Gambar dengan perintah gambar Angular.

next/image yang diperbarui

Kami juga bekerja sama dengan tim Next.js untuk mengupdate komponen gambar agar dapat menggunakan fitur browser baru seperti pemuatan lambat native dan atribut HTML fetchpriority. Versi baru tersedia secara default dari Next 13.

Dampaknya : Partner kami, Leboncoin, dapat meningkatkan LCP beberapa halaman hingga 60% dengan beralih ke next/image versi baru.

Font web

Pengoptimalan font web bisa jadi sulit dilakukan dengan benar, karena ada lebih banyak hal yang terlibat daripada sekadar mengurangi ukuran transfer resource font. Font web juga dapat berkontribusi secara signifikan pada metrik Pergeseran Tata Letak Kumulatif (CLS) halaman, dan meminimalkan pergeseran tata letak karena penggantian font memerlukan upaya yang cukup besar. Untungnya, kami berpartner dengan framework untuk mempermudah tugas ini bagi developer web.

Alat untuk penggantian font yang lebih baik di Next.js, Nuxt, dan Vite

Kami merilis fitur di Next 13 yang menyesuaikan dimensi font penggantian halaman agar lebih selaras dengan font web saat dimuat. Hal ini akan mengurangi CLS terkait font. Kami membagikan metodologi kami kepada tim Nuxt, dan hal ini menjadi inspirasi untuk modul nuxtjs/fontaine dan plugin fontaine Vite, yang keduanya menggunakan algoritma dasar yang sama.

Dampaknya: Partner kami, Vox Media, dapat mengurangi CLS di The Verge hingga 0 dalam produksi di beberapa halaman menggunakan fitur ini.

Baca selengkapnya di postingan blog kami tentang membuat penggantian font yang lebih baik dan alat framework penggantian font.

Modul nuxtjs/google-fonts

Kami berpartner dengan tim Nuxt untuk merilis modul guna mengoptimalkan performa Google Font. Modul ini otomatis mendownload dan menghosting sendiri font Google untuk menghindari perjalanan bolak-balik server tambahan dan juga mendukung opsi penyematan font.

Skrip pihak ketiga

JavaScript pihak ketiga adalah sumber potensial masalah performa, dan dapat memengaruhi metrik seperti Interaction to Next Paint (INP), karena pekerjaan yang dijadwalkan skrip ini dapat menunda interaksi pengguna agar tidak berjalan.

Komponen next/script untuk skrip pihak ketiga

Kami membuat komponen skrip untuk Next 12+ yang secara default memuat skrip setelah hidrasi untuk mencegah pemblokiran jalur kritis selama pemuatan. Versi ini juga memiliki mode pekerja web yang mengintegrasikan Partytown untuk memindahkan skrip sepenuhnya dari thread utama.

Dampak: Dalam pengujian lab Lighthouse, CareerKarma mengalami penurunan LCP sebesar 24% menggunakan next/script component dengan mode pekerja diaktifkan.

Perbandingan strip film yang menunjukkan peningkatan LCP

Baca selengkapnya di postingan blog kami, Mengoptimalkan pemuatan skrip pihak ketiga di Next.js.

Lain-lain

Kemitraan kami dengan developer framework tidak hanya berhenti pada peningkatan Core Web Vitals. Kami juga berupaya untuk memanfaatkan lebih banyak hal baru, dan mempermudah developer untuk mulai menggunakan fitur platform web terbaru.

Polyfill kueri penampung

Kami memperbarui polyfill kueri penampung untuk mendukung serangkaian fitur CSS yang lebih luas dan meningkatkan performanya, yang mengarah ke rilis 1.0.

Baca selengkapnya di postingan blog kami, Di Dalam Polyfill Kueri Penampung.

Apa yang akan terjadi selanjutnya untuk Aurora?

Pada tahun 2023-2024, kami memiliki sejumlah project menarik yang akan diluncurkan untuk mengoptimalkan Data Web Inti bagi developer framework.

Pada tahun mendatang, kami akan berfokus pada hal berikut:

  • Komponen wrapper pihak ketiga untuk Next.js dan Nuxt: Komponen wrapper dapat memfasilitasi pemuatan library pihak ketiga populer dengan cara yang optimal untuk LCP dan INP. Masukkan tag komponen ke DOM untuk memuat pihak ketiga, bukan tag skrip, dan framework akan memilih strategi pemuatan terbaik. Lihat RFC untuk mengetahui detail selengkapnya.

  • Pengalaman developer SSR dan hidrasi Angular: Kami telah bekerja sama dengan tim Angular dalam project SSR dan hidrasi. Fokus kami adalah mengupgrade pengalaman developer dalam menggunakan SSR, sehingga lebih banyak aplikasi dapat memanfaatkan manfaat LCP. Nantikan RFC resmi terkait fitur manipulasi DOM SSR.

  • Fitur nuxt/image dan perintah gambar Angular: Kami memiliki sejumlah fitur menarik yang direncanakan untuk Angular, seperti pembuatan petunjuk prakoneksi otomatis, alat migrasi untuk membantu transisi dari elemen <img> dasar, dukungan elemen <picture>, dan placeholder. Kami juga akan berkonsultasi dengan tim Nuxt terkait sejumlah fitur baru untuk nuxt/image.

  • Riset INP (lintas framework): Karena Interaction to Next Paint (INP) akan menggantikan First Input Delay (FID) pada tahun 2024, kami meningkatkan dukungan untuk meningkatkan INP dalam framework. Hal ini akan melibatkan analisis akar masalah untuk masalah INP dalam framework dan membuat solusi bawaan untuk pengguna framework jika memungkinkan.

  • Speedometer 3: Kami juga membantu menerapkan alat benchmark generasi berikutnya, Speedometer, untuk mewakili lanskap framework web modern pada tahun 2023.

Selalu dapatkan info terbaru

Bookmark halaman landing kami untuk terus mendapatkan berita terbaru, diskusi teknologi, dan postingan blog dari tim Aurora. Anda juga dapat mengikuti kami di Twitter: