Kuzey ışıkları ile ilgili Yenilikler

Kara Erickson
Kara Erickson
X

Chrome'un Aurora girişimi, web'de kullanıcı deneyimini iyileştirmek üzere Chrome ile açık kaynak JavaScript çerçeveleri ve araçları arasındaki bir işbirliğidir. Aurora sizin için yeniyse misyonumuz ve metodolojimiz hakkında daha fazla bilgi edinmek için tanıtım yayınımıza göz atın.

2021'den bu yana bir yol haritası yayınlamadığımızdan, 2023'te neler yaptığımızı ve bazı heyecan verici projelerimizi sizinle paylaşmak istiyoruz.

Projede yakın zamanda öne çıkanlar

Son birkaç yıldır, Önemli Web Verileri'ni optimize etmek için Next.js, Angular ve Nuxt gibi çerçevelerle iş ortaklığı yapıyoruz. İşte son güncellememizden bu yana öne çıkan bazı noktalar.

Resimler

Resimler genellikle performans sorunlarının kaynağıdır. Geliştiricilerin, birlikte çalıştığımız çerçeveleri kullanırken varsayılan olarak en iyi şekilde görüntü sunmasını sağlamak amacıyla çerçeve paydaşlarıyla birlikte çalıştığımız yöntemlerden bazılarını aşağıda bulabilirsiniz.

Angular resim yönergesi

Angular çerçevesi için bir kararlı görüntü yönergesi yayınladık. Bu yönerge, Angular 15'te kullanıma sunulmuştur ve özellikle 13.4 ve 14.3'e geri çekilmiştir. Bu yönerge, varsayılan olarak yerel geç yüklemeyi etkinleştirir, öncelikli resimlere fetchpriority ipuçları ekler ve duyarlı resimler için uygun srcset özelliklerini otomatik olarak oluşturur.

Etki: Lighthouse laboratuvar testi, görüntü yönergesi kullanılmadan önce ve kullanıldıktan sonra Land's End'in QA ortamında gerçekleştirildi. Masaüstünde Largest Contentful Paint (LCP) ortanca değeri 12, 0 saniyeden 3, 0 saniyeye düştü. Bu da LCP'de% 75 bir iyileşme sağladı.

Film şeridi karşılaştırması: Yerel resim etiketleri içeren Birinci Web Sitesi ile Angular resim yönergesi içeren İkinci Web Sitesi.

Resimleri Angular resim yönergesiyle optimize etme başlıklı blog yayınımızda yönerge hakkında daha fazla bilgi edinebilirsiniz.

next/image yenilendi

Ayrıca, yerel geç yükleme ve fetchpriority HTML özelliği gibi yeni tarayıcı özelliklerini kullanmak üzere resim bileşenini güncellemek için Next.js ekibiyle de çalıştık. Yeni sürüm, varsayılan olarak Next 13 sürümünden itibaren kullanılabilir.

Etki : İş ortağımız Leboncoin, yeni next/image sürümüne geçerek bazı sayfaların LCP'sini% 60'a kadar artırmayı başardı.

Web yazı tipleri

Yazı tipi kaynaklarının aktarım boyutunu küçültmekten daha fazla iş gerektiğinden, web yazı tipi optimizasyonunun doğru yapılması zor olabilir. Web yazı tipleri de bir sayfanın Cumulative Layout Shift (CLS) metriğine önemli ölçüde katkıda bulunabilir. Yazı tipi değişikliklerinden kaynaklanan düzen kaymalarını en aza indirmek büyük çaba gerektirir. Neyse ki web geliştiricileri için bu görevi daha da kolaylaştırmak için çerçevelerle ortaklık kurduk.

Next.js, Nuxt ve Vite'ta iyileştirilmiş yazı tipi yedekleri için araçlar

Sonraki 13'te, bir sayfanın yedek yazı tipinin boyutlarını, sayfa yüklendiği sırada web yazı tipiyle daha uyumlu olacak şekilde ayarlayan bir özellik sunduk. Bu, yazı tipiyle ilgili CLS'yi azaltır. Metodolojimizi Nuxt ekibiyle paylaştık ve her ikisi de aynı temel algoritmayı kullanan nuxtjs/fontaine modülü ve fontaine Vite eklentisi için ilham kaynağı oldu.

Etki: İş ortağımız Vox Media, bu özelliği kullanarak bazı sayfalarda The Verge'deki CLS'yi üretimde 0'a indirmeyi başardı.

Daha fazla bilgi için iyileştirilmiş yazı tipi yedekleri oluşturma ve yazı tipi yedek çerçevesi araçları konusuna bakın.

nuxtjs/google-fonts modülü

Google Font performansını optimize etmek için Nuxt ekibiyle bir modül kullanıma sunduk. Modül, sunucunun fazladan gidiş dönüşünü önlemek için Google yazı tiplerini otomatik olarak indirir ve barındırır. Ayrıca, yazı tipi satır içine alma seçeneklerini de destekler.

Üçüncü taraf komut dosyaları

Üçüncü taraf JavaScript, performans sorunlarının olası bir kaynağıdır ve Sonraki Boyamayla Etkileşim (INP) gibi metrikleri etkileyebilir. Çünkü bu komut dosyalarının planladığı çalışma, kullanıcı etkileşimlerinin çalışmasını geciktirebilir.

Üçüncü taraf komut dosyaları için next/script bileşeni

Next 12+ için, yükleme sırasında kritik yolun engellenmesini önlemek amacıyla hidrasyondan sonra varsayılan olarak komut dosyalarını yükleyen bir komut dosyası bileşeni oluşturduk. Ayrıca, komut dosyalarını ana iş parçacığının dışına taşımak için Partytown ile entegre olan bir web çalışanı modu vardır.

Etki: Lighthouse laboratuvar testlerinde, CareerKarma, çalışan modu etkin durumdayken next/script component kullanıldığında LCP'de% 24 azalma elde etti.

LCP'de doğaçlama yapılan film şeridi karşılaştırması

Next.js'de üçüncü taraf komut dosyası yüklemesini optimize etme başlıklı blog yayınımızdan daha fazla bilgi edinebilirsiniz.

Çeşitli

Çerçeve geliştiricileriyle olan iş ortaklıklarımız, Core Web Vitals'ı iyileştirmeyle sınırlı değildir. Ayrıca, yeniliklerden daha çok yararlanmak ve geliştiricilerin, yeni web platformu özelliklerini kullanmaya başlamasını daha da kolaylaştırmak için çalışıyoruz.

Kapsayıcı sorguları çoklu dolgusu

Daha fazla CSS özelliğini desteklemek için kapsayıcı sorguları çoklu dolgusunu güncelledik ve 1.0 sürümüne doğru çalışarak performansını iyileştirdik.

Inside the Container Query Polyfill (Kapsayıcı Sorgusu Polyfill'in İçinden) başlıklı blog yayınımızdan daha fazla bilgi edinebilirsiniz.

Aurora için sırada ne var?

2023-2024'te, çerçeve geliştiricileri için Core Web Vitals'ı optimize etmeyi amaçlayan heyecan verici birkaç projemiz daha olacak.

Gelecek yıl aşağıdaki konulara odaklanacağız:

  • Next.js ve Nuxt için üçüncü taraf sarmalayıcı bileşenleri: Sarmalayıcı bileşenleri, popüler 3. taraf kitaplıkların LCP ve INP için en uygun şekilde yüklenmesini kolaylaştırabilir. Komut dosyası etiketi yerine üçüncü taraf öğenizi yüklemek için DOM'ye bileşen etiketi bırakın. Çerçeve, en iyi yükleme stratejisini seçer. Diğer ayrıntılar için RFC sayfasına göz atın.

  • Angular SSR ve hidrasyon geliştirici deneyimi: SSR ve hidrasyon projesi üzerinde Angular ekibiyle yakın bir şekilde çalışıyoruz. Amacımız, SSR kullanımına yönelik geliştirici deneyimini yükselterek daha fazla uygulamanın LCP avantajlarından yararlanmasını sağlamak. SSR DOM işleme özellikleriyle ilgili resmi RFC bilgisini takip etmeye devam edin.

  • Açısal resim yönergesi ve nuxt/image özellikleri: Angular için otomatik önceden bağlantı ipucu oluşturma, temel <img> öğelerinden geçişe yardımcı olacak taşıma araçları, <picture> öğe desteği ve yer tutucular gibi bazı heyecan verici özellikler sunmayı planladık. Ayrıca, nuxt/image ile ilgili bir dizi yeni özellik hakkında Nuxt Ekibi'ne danışacağız.

  • INP araştırması (çerçeveler arası): 2024'te İlk Giriş Gecikmesi (FID)'nin yerini Sonraki Boyamayla Etkileşim (INP) alacak. Bu nedenle çerçevelerde INP'yi iyileştirme desteğini artırıyoruz. Bu çalışma, çerçevelerdeki INP sorunlarının temel nedenlerini analiz etmeyi ve mümkün olduğunda çerçeve kullanıcıları için yerleşik çözümler oluşturmayı içerecektir.

  • Hız saati 3: Ayrıca, 2023'ün modern web çerçevesi ortamını temsil etmek için yeni nesil karşılaştırma aracı Speedometer'in kullanıma sunulmasına da yardımcı oluyoruz.

En son gelişmeleri kaçırmayın

Aurora ekibinden en son haberleri, teknoloji konuşmalarını ve blog yayınlarını takip etmek için açılış sayfamıza yer işareti koyun. Bizi Twitter'da da takip edebilirsiniz: